多人音视频通话

在多人视频聊天、视频会议等场景中，用户需要在房间内与其他用户进行实时音视频通话、互相推拉流。本文将对这种场景进行构造展示。

前提条件

• 已在项目中集成 NERTC SDK，实现了基本的实时音视频通话功能。可参考 快速跑通 Sample Code 和 集成 SDK

示例代码下载

请参考 多人通话示例代码

使用步骤

本节将介绍如何使用 NERTC SDK 实现多人音视频通话。

1. 创建 client 实例，参考 createClient

//创建client实例
rtc.client = NERTC.createClient({
  appkey: '<yourAppKey>', //您的 App Key
  debug: true, //是否开启调试日志
});

2. 调用 join 加入房间，参考 join

//加入房间
rtc.client.join({
    channelName: '房间名称',
    uid: uid,
    token: ''  //调试模式下可设置为 null。正式上线前设置为相应的 Token，具体请参见“Token 鉴权”章节。
}).then((obj) => {
    console.info('加入房间成功...')
    //初始化本地流，并且发布
    initLocalStream() //后面介绍说明
})

3. 监听回调事件 client.on()， 参考 client.on

//房间连接状态改变通知回调
rtc.client.on('connection-state-change', (evt)=>{
  console.log(`connection-state-change ${evt.prevState} => ${evt.curState}。是否重连：${evt.reconnect}`)
})
//远端用户加入房间通知回调，建议在收到此回调后再进行设置远端视图等的操作
rtc.client.on('peer-online', evt => {
  console.log(`${evt.uid} 加入房间`)
  addLog(`${evt.uid} 加入房间`)
})
//远端用户退出房间通知回调
rtc.client.on('peer-leave', evt => {
  console.log(`${evt.uid} 退出房间`)
  leaveLog(`${evt.uid} 退出房间`)
})
//远端用户推流/停止推流通知回调，建议在收到此回调后再进行订阅或取消订阅音视频流的操作
rtc.client.on("stream-added", (evt)=>{
  console.log(`远端${evt.stream.getId()}发布了 ${evt.mediaType} 流`)
  rtc.client.subscribe(evt.stream)
});
rtc.client.on("stream-removed", (evt)=>{
  // 远端流停止，则关闭渲染
  evt.stream.stop(evt.mediaType);
});
//网络质量通知回调（请列出所有枚举）
rtc.client.on('network-quality', stats => {
  console.log('=====房间里所有成员的网络状况：', stats)
  let status = null
  stats.forEach(item => {
    status = 'uid: ' + item.uid + ',上行： ' + item.uplinkNetworkQuality + ',下行： ' + item.downlinkNetworkQuality
    console.log(status)
  })
})

4. 设置本地视图，调用 createStream，调用 init 和 play 方法初始化并播放本地音视频流，再通过调用 setLocalRenderMode 设置本地视频画面的渲染模式，最后调用 publish 方法发布本地的音视频流，供房间内其他用户订阅。

//初始化本地流并且发布
async function initLocalStream() {
  const cameras = await NERTC.getCameras();    //获取可用的视频输入设备
  const microphones = await NERTC.getMicrophones();     //获取可用的麦克风设备
  //创建本端stream实例，销毁前无需重复创建
  rtc.localStream = NERTC.createStream({
    uid: uid,                      // 本端的uid
    audio: true,                   // 是否从麦克风采集音频
    microphoneId: microphones.microphoneId,    // 麦克风设备 deviceId，通过 getMicrophones() 获取
    video: true,                   // 是否从摄像头采集视频
    cameraId: cameras.cameraId             // 摄像头设备 deviceId，通过 getCameras() 获取
  })

  //启动本地音视频流，销毁前无需重复初始化
  rtc.localStream.init().then(()=>{
    console.warn('音视频初始化完成，播放本地视频')
    //用于播放视频的div元素
    let div = document.getElementById('local-container')
    //开始播放本地视频流
    rtc.localStream.play(div)
    //设置播放的视频容器大小
    rtc.localStream.setLocalRenderMode({
      width: 180,
      height: 150,
      cut: true    // 是否裁剪
    })

    // 将本地音视频流发布至云信服务器，加入房间前不用执行此方法。
    rtc.client.publish(rtc.localStream).then(()=>{
      console.warn('本地 publish 成功')
    })
  })
}

5. 设置远端视图，通过 Client.on("peer-online") 监听远端用户加入房间的事件；通过 Client.on("stream-added") 监听远端用户发布的音视频流事件，监听到之后，本端可通过 subscribe 方法对起发布的音视频流进行订阅，订阅成功之后， 可通过 Client.on("stream-subscribed") 的回调中，调用 play 方法播放远端视频流。

// 监听远端用户加入通话房间的事件，并抛出对方的 uid
rtc.client.on('peer-online', evt => {
  console.log(`${evt.uid} 加入房间`)
  addLog(`${evt.uid} 加入房间`)
})

// 监听远端用户发布视频流的事件，回调中携带对方的 uid 与发布的视频分辨率。
rtc.client.on('stream-added', evt => {
    var remoteStream = evt.stream;
    console.log('收到别人的发布消息: ', remoteStream.streamID, 'mediaType: ', evt.mediaType)
})

//设置要订阅音频或者视频
remoteStream.setSubscribeConfig({
    audio: true,//订阅麦克风音频
    audioSlave: true,//订阅音频辅流
    video: true,//订阅视频
    screenShare: true,//订阅屏幕共享
    highOrLow: NERTC.STREAM_TYPE.HIGH,//订阅大流
  })
//发起订阅
rtc.client.subscribe(remoteStream).then(()=>{
    console.log('发起订阅对端成功')
  })

//播放订阅的对端的音视频流
  rtc.client.on('stream-subscribed', evt => {
      console.warn('订阅别人的流成功的通知')
      var remoteStream = evt.stream;
      let div = document.getElementById('remote-container')
      //开始播放远端音视频流
      remoteStream.play(div).then(()=>{
        console.log('播放对端的流成功')
        remoteStream.setRemoteRenderMode({
          width: 180,
          height: 150,
          cut: true
        })
      })
    })