快速入门

本文为您介绍如何使用 NERTC SDK 快速实现音视频通话功能。

前提条件

在开始运行工程之前,需要准备好如下材料:

快速跑通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 类的方法提供了音视频通话的主要功能,例如加入频道、发布音视频流等。

代表本地和远端的音视频流。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() //后面介绍说明
})

参数说明

设置本地视图

在加入频道成功之后就可以启动本地音视频流。

//初始化本地流并且发布
function initLocalStream() {
  //创建本端stream实例,销毁前无需重复创建
  rtc.localStream = WebRTC2.createStream({
    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()