文档反馈
文档反馈

实现音视频通话(Web)

网易云信音视频通话产品的基本功能包括高质量的实时音视频通话。当您成功初始化 SDK 之后,您可以简单体验本产品的基本业务流程。本文档为您展示音视频通话提供的基本业务流程。

前提条件

请确认您已完成以下操作:

快速跑通Sample Code

注意:在运行示例项目之前,请联系商务经理开通非安全模式。非安全模式建议只在集成开发阶段使用,请在应用正式上线前改回安全模式。

  1. SDK和示例代码下载页面或 Demo 体验页面下载需要体验的示例项目或 Demo 源码工程。

  2. /src/views/home/index.vue 文件中配置 App Key。

     data () {
         return {
             isSilence: false,
             isDesc: true,
             isStop: false,
             desc: '等待对方进入...',
             appkey: '',    //填入您的appkey
             token: '',    
             client: null,
             localUid: Math.ceil(Math.random() * 1e5),
             localStream: null,
             remoteStream: null
                 }
             },
  3. 运行项目。

    该工程使用 vue(vue-cli 4.x) 技术栈,请使用 node 开发环境 version 8+

     // Project setup
     npm install
    
     // Compiles and hot-reloads for development
     npm run dev
    
     // Compiles and minifies for production
     npm run build
    
     // Lints and fixes files**
     npm run lint

实现音视频通话

本节主要介绍如何使用 SDK 实现音视频通话。主要流程如下图所示:

流程图

WebRTC2 中有两个重要类:

1. 引用文件

在项目相应的前端页面文件中,对 NIM_Web_WebRTC2_vx.x.x.js 文件进行引用。

2. 初始化

执行 createClient 方法创建 client 实例。

  //示例
  //创建client实例
  rtc.client = WebRTC2.createClient({
    appkey: 'xxx', //您的 appkey
    debug: true, //是否开启调试日志
  });

3. 设置本地视图

初始化成功后,可以设置设置本地视图,预览本地图像。加入房间后,可以执行 publish 方法发布自己的多媒体流至流媒体,供其他用户订阅。

    //初始化本地流并且发布
    function initLocalStream() {
      //创建本端stream实例,销毁前无需重复创建
      rtc.localStream = WebRTC2.createStream({
        uid: uid,                      // 本端的uid
        audio: true,                   // 是否从麦克风采集音频
        microphoneId: microphoneId,    // 麦克风设备 deviceId,通过 getMicrophones() 获取
        video: true,                   // 是否从摄像头采集视频
        cameraId: 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 成功')
        })
      })
    }

4. 加入房间

加入房间前,请确保已完成初始化相关事项。若您的业务中涉及呼叫邀请等机制,可以使用信令

//加入频道
rtc.client.join({
    channelName: '频道名称',
    uid: uid, 
    token: ''
}).then((obj) => {
    console.info('加入频道成功...')
    //初始化本地流,并且发布
    initLocalStream() //后面介绍说明
})

参数说明

参数 说明
token 安全认证签名 Token。可设置为:
  • null。非安全模式下可设置为 null。安全性不高,建议在产品正式上线前联系对应商务经理转为安全模式。
  • 已获取的安全认证签名 Token。安全模式下必须设置为获取到的 Token 。若未传入正确的 Token 将无法进入房间。

    推荐使用安全模式。

channelName 房间名称,设置相同房间名称的用户会进入同一个通话房间。
注意:您也可以在加入通道前,通过创建房间接口创建房间。加入房间时,若传入的 {channelName} 未事先创建,则云信服务器内部将为其自动创建一个名为 {channelName} 的通话房间。
uid 用户的唯一标识 id,房间内每个用户的 uid 必须是唯一的。

5. 设置远端视图

音视频通话过程中,除了要显示本地的视频画面,通常也要显示参与互动的其他连麦者/主播的远端视频画面。

  1. 通过以下回调获取相关信息:

    • peer-online:监听远端用户加入通话房间的事件,并抛出对方的 uid。当本端加入房间后,也会通过此回调抛出通话房间内已有的其他用户。

    • stream-added:监听远端用户发布视频流的事件,回调中携带对方的 uid 与发布的视频分辨率。

  2. 在监听到远端用户发布视频流后,本方可以通过 subscribe 方法对其发起视频流的订阅,来将对方的视频流渲染到视频画布上。

       // 示例
       //设置要订阅音频或者视频
       remoteStream.setSubscribeConfig({
         audio: true,
         video: true
       })
       // 发起订阅
       rtc.client.subscribe(remoteStream).then(()=>{
         console.log('发起订阅对端成功')
       })
  3. 订阅成功后,可进一步在 stream-subscribed 回调中播放远端视频流。

     //播放订阅的对端的音视频流
       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
           })
         })
       })

6. 退出通话房间

通过 leave() 接口退出通话房间。

  //用户无需做一些清除动作,sdk会自动做清除逻辑
  rtc.client.leave()

7. 销毁实例

当确定短期内不再使用音视频通话实例时,可以释放对应的对象资源。

  //一般情况下无需使用
  rtc.client.destroy()
×

反馈成功

非常感谢您的反馈,我们会继续努力做得更好。