实现音视频通话(Web)

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

前提条件

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

快速跑通Sample Code

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

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

在 /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

}

},

运行项目。

该工程使用 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 中有两个重要类：

Client

代表一个本地客户端。Client 类的方法提供了音视频通话的主要功能，例如加入房间、发布音视频流等。

Stream

代表本地和远端的音视频流。Stream 类的方法用于定义音视频流对象的行为，例如流的播放控制、音视频的编码配置等。调用 Stream 方法时，请注意区分本地流和远端流对象。

1. 引用文件

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

import 方式引入：

import WebRTC2 from '../../NIM_Web_WebRTC2_vx.x.x.js'

script 标签引入：

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

安全认证签名(NERTC Token)。可设置为：null。非安全模式下可设置为 null。安全性不高，建议在产品正式上线前联系对应商务经理转为安全模式。

已获取的NERTC Token。安全模式下必须设置为获取到的 Token 。若未传入正确的 Token 将无法进入房间。

推荐使用安全模式。

channelName

房间名称，设置相同房间名称的用户会进入同一个通话房间。

注意：您也可以在加入通道前，通过创建房间接口创建房间。加入房间时，若传入的 {channelName} 未事先创建，则云信服务器内部将为其自动创建一个名为 {channelName} 的通话房间。

uid

用户的唯一标识 id，房间内每个用户的 uid 必须是唯一的。

5. 设置远端视图

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

通过以下回调获取相关信息：

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

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

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

// 示例

//设置要订阅音频或者视频

remoteStream.setSubscribeConfig({

audio: true,

video: true

})

// 发起订阅

rtc.client.subscribe(remoteStream).then(()=>{

console.log('发起订阅对端成功')

})

订阅成功后，可进一步在 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()

本篇文档内容是否对您有帮助？

有帮助

我要吐槽

如果遇到产品相关问题，您可 提交工单 或 在线客服 寻求帮助。

您的改进建议

×

问题类型

内容错误

内容没更新

描述不清

链接有误

步骤不完整

内容缺失(缺少代码/示例)

其他

更多建议

请输入您的建议或问题(至少5个字符，至多500个字符)

联系方式

标记内容

同时提交标记内容

提交

此文档对你是否有帮助

×

有帮助

我要吐槽

×

反馈成功

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