快速入门
本文为您介绍如何使用 NERTC SDK 快速实现音视频通话功能。
前提条件
在开始运行工程之前，需要准备好如下材料：
- 安全环境：https环境或者本地链接 localhost/127.0.0.1 环境
- Chrome 72+、Safari 12+
快速跑通Sample Code
注意：在运行前，请联系商务经理开通非安全模式。非安全模式建议只在集成开发阶段使用，正式上线前请改回安全模式。
下载完 Sample Code 源码工程后打开 /src/views/home/index.vue 文件，在指定位置填入您的appkey：
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
集成前，请先前往SDK下载页面查看当前最新版本。将下载得到的 NIM_Web_WebRTC2_vx.x.x.js 文件拷贝到项目文件所在的目录下。通过如下方式引入：
import方式引入
import WebRTC2 from '../../NIM_Web_WebRTC2_vx.x.x.js'script标签引入
<script src="./NIM_Web_WebRTC2_vx.x.x.js"></script>至此，SDK 已经导入完成。
实现音视频通话
本节主要介绍如何使用 SDK 实现音视频通话。主要流程如下图所示：
注意图中的方法是对不同的对象调用的：
- Client 对象
代表一个本地客户端。Client 类的方法提供了音视频通话的主要功能，例如加入频道、发布音视频流等。
- Stream 对象
代表本地和远端的音视频流。Stream 类的方法用于定义音视频流对象的行为，例如流的播放控制、音视频的编码配置等。调用 Stream 方法时，请注意区分本地流和远端流对象。
初始化
为方便起见，我们为下面要用到的示例代码定义了两个变量。此步骤不是必须的，你可以根据你的项目有其他的实现。
// rtc object
let rtc = {
client: null,
localStream: null,
};以下为创建Client对象实例的方法：
//创建client实例
rtc.client = WebRTC2.createClient({
appkey: 'xxx', //您的 appkey
debug: true, //是否开启调试日志
});加入频道
加入频道前，请确保已完成初始化相关事项。若您的业务中涉及呼叫邀请等机制，可以使用信令。
//加入频道
rtc.client.join({
channelName: '频道名称',
uid: uid,
token: ''
}).then((obj) => {
console.info('加入频道成功...')
//初始化本地流，并且发布
initLocalStream() //后面介绍说明
})参数说明
- token：频道token。支持传入以下内容：
- 空字符串。该种方式需要先开通非安全模式。安全性不高，建议在产品正式上线前转为安全模式。
- 安全认证签名密钥。安全模式下必需。若未传入正确的token将无法进入频道。建议使用安全模式。
- channelName：频道名称，传入相同频道名称的用户会进入同一个通话频道。
- uid：用户的唯一标识Id，频道内每个用户的 uid 必须是唯一的。
设置本地视图
在加入频道成功之后就可以启动本地音视频流。
//初始化本地流并且发布
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 成功')
})
})
}设置远端视图
视频通话过程中，除了要显示本地的视频画面，通常也要显示参与通话的其他用户的远端视频画面。
监听远端用户进出频道
创建client实例后，可以监听监听远端用户进出频道：
//监听用户进入频道事件
rtc.client.on('peer-online', (_event) => {
console.log('有人加入', _event)
})
//监听用户离开频道事件
rtc.client.on('peer-leave', (_event) => {
console.log('有人离开频道', _event)
})监听到远端用户加入频道后，做自己的上层业务逻辑处理
监听远端音视频流发布
当频道中的其他用户有音视频流发出/关闭时，分别会走入以下回调：
//监听频道里其他人发布音视频
rtc.client.on('stream-added', evt => {
var remoteStream = evt.stream;
console.warn('收到别人的发布消息: ', remoteStream.streamID)
// 发起视频订阅
})
//监听频道里其他人停止发布音视频
rtc.client.on('stream-removed', evt => {
var remoteStream = evt.stream;
console.warn('对方停止发布: ', remoteStream.getId())
this.preprocessingDiv()
remoteStream.stop()
})订阅远端音视频流
监听到远端用户有音视频发布时，可以订阅远端用户的音视频流。
//设置要订阅音频或者视频
remoteStream.setSubscribeConfig({
audio: true,
video: true
})
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
})
})
})离开频道
当通话结束，需要离开频道，可以调用以下接口：
//用户无需做一些清除动作，sdk会自动做清除逻辑
rtc.client.leave()销毁音视频实例
释放当前的 client 实例，建议在程序确定不再需要使用 client 实例时，通过该接口释放 client 实例的对象资源。实例销毁后需要重新初始化。
//一般情况下无需使用
rtc.client.destroy()
有帮助
我要吐槽
此文档对你是否有帮助
有帮助
我要吐槽
反馈成功
非常感谢您的反馈，我们会继续努力做得更好。