网易云信浏览器WebRTC视频聊天集成

复制一篇当初做pc端记录自己写的视频通话文稿：
1 初始化IM
在这里插入图片描述

SDK在工程中调用示例：

 // 使用示例
 
  	import SDK from 'NIM_Web_SDK.js'
  	const nim = SDK.NIM.getInstance({
   	 // ...
 	 })

相对应Webpack配置：

rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /NIM_Web_SDK.*\.js/,
        query: {
          presets: [
            // ...
          ],
          // ...
        }
        // ...
      },
      // ...
    ],

实例调用方式
所有业务均通过 NIM SDK 单例调用：

// 引入SDK类的引用以后，获取SDK对象实例
  var nim = SDK.NIM.getInstance({
    // debug: true,
    appKey: 'appKey',
    account: 'account',
    token: 'token',
    // privateConf: {}, // 私有化部署方案所需的配置
    // ...
  })

以发送点对点消息为例：

  var msg = nim.sendText({
    scene: 'p2p',
    to: 'account',
    text: 'hello',
    done: function sendMsgDone (error, msg) {
      // ...
    }
  })

事件通知方式
SDK 通过两种方式通知上层 API 调用结果：回调(callback)和委托 (delegate)，两种方式都只在主线程触发(为保证浏览器兼容性，没有使用web worker)。
一般回调接口直接反映在对应接口的 done 参数上，调用时设置即可。
委托则需要开发者在合适时机在初始化异步监听函数上进行处理

// 委托通知示例
  var nim = NIM.getInstance({
    // ... 此处省略其他配置
    onmsg: function (msg) {
      // 此处为委托消息事件，消息发送成功后，成功消息也在此处处理
    }
  })
  // 回调通知示例
  var msg = nim.sendText({
    scene: 'p2p',
    to: 'account',
    text: 'hello',
    done: function sendMsgDone (error, msg) {
      // 此处为回调消息事件，仅仅通知开发者，消息是否发送成功
    }
  })

不使用数据库
如果开发者不想使用数据库, 那么可以设置初始化参数db为false来禁用数据库。云信Sdk默认为开启。

var nim = NIM.getInstance({
    db: false
});

初始化连接参数：

var data = {};
// 注意这里, 当引入的SDK文件是NIM_Web_NIM_v.js时，请通过 NIM.getInstance 来初始化；当引入的SDK文件为NIM_Web_SDK_v时，请使用 SDK.NIM.getInstance 来初始化。SDK文件的选择请参见集成方式。
var nim = NIM.getInstance({
  debug: true,   // 是否开启日志，将其打印到console。集成开发阶段建议打开。
  appKey: 'appKey',
  account: 'account',
  token: 'token',
  db:true, //若不要开启数据库请设置false。SDK默认为true。
  // privateConf: {}, // 私有化部署方案所需的配置
  onconnect: onConnect,
  onwillreconnect: onWillReconnect,
  ondisconnect: onDisconnect,
  onerror: onError
});
function onConnect() {
  console.log('连接成功');
}
function onWillReconnect(obj) {
  // 此时说明 SDK 已经断开连接, 请开发者在界面上提示用户连接已断开, 而且正在重新建立连接
  console.log('即将重连');
  console.log(obj.retryCount);
  console.log(obj.duration);
}
function onDisconnect(error) {
  // 此时说明 SDK 处于断开状态, 开发者此时应该根据错误码提示相应的错误信息, 并且跳转到登录页面
  console.log('丢失连接');
  console.log(error);
  if (error) {
    switch (error.code) {
      // 账号或者密码错误, 请跳转到登录页面并提示错误
      case 302:
        break;
      // 重复登录, 已经在其它端登录了, 请跳转到登录页面并提示错误
      case 417:
        break;
      // 被踢, 请提示错误后跳转到登录页面
      case 'kicked':
        break;
      default:
        break;
    }
  }
}
function onError(error) {
  console.log(error);
}

参数解释：超链接

初始化音视频(WebRTC)：
1、点对点连接

2、WebRTC
以下是示例代码：

// SDK重命名
const Netcall = WebRTC;
const netcall = Netcall.getInstance({
  nim: nim,
  container: document.getElementById('container'),
  remoteContainer: document.getElementById('remoteContainer'),
  chromeId: '', 
  // 是否开启日志打印
  debug: true
});

参数说明：
参数名类型说明nimobject音视频通话是基于 IM 的, 需要传入 NIM 初始化后的实例containerdom播放自己视频画面的容器节点remoteContainerdom播放对方画面的容器节点chromeIdstringchrome屏幕共享插件id（chrome 72版本开始，允许用户不适用插件就可以使用屏幕共享功能。如果用户这里填写插件id，sdk就使用插件的方式进行屏幕共享，不填写则使用chrome原生接口进行屏幕共享）debugbool是否开启日志打印，默认 false，被叫收到呼叫的通知
主叫发起通话请求后，被叫将收到呼叫通知，这时开发者可以依据一些自己的逻辑进行状态判断是否展示对应的 UI 和响应按钮。

示例：

// 是否被叫中
let beCalling = false;
// 呼叫类型
let type = null;
// 被叫信息
let beCalledInfo = null;
// 是否正忙
let busy = false;
// 开启监听
netcall.on('beCalling', function(obj) {
  console.log('on beCalling', obj);
  const channelId = obj.channelId;
  // 被叫回应主叫自己已经收到了通话请求
  netcall.control({
    channelId: channelId,
    command: Netcall.NETCALL_CONTROL_COMMAND_START_NOTIFY_RECEIVED
  });
  // 只有在没有通话并且没有被叫的时候才记录被叫信息, 否则通知对方忙并拒绝通话
  if (!netcall.calling && !beCalling) {
    type = obj.type;
    beCalling = true;
    beCalledInfo = obj;
  } else {
    if (netcall.calling) {
      busy = netcall.notCurrentChannelId(obj);
    } else if (beCalling) {
      busy = beCalledInfo.channelId !== channelId;
    }
    if (busy) {
      netcall.control({
        channelId: channelId,
        command: Netcall.NETCALL_CONTROL_COMMAND_BUSY
      });
      // 拒绝通话
      netcall.response({
        accepted: false,
        beCalledInfo: obj
      });
    }
  }
});

参数说明 obj 为收到的呼叫通知内容对象，这里只展示对开发者有用的几个字段
obj 属性类型说明accountstring主叫 accounttypenumber主叫发起的通话类型（音频还是视频）channelIdstring该通呼叫会话的唯一 id 值，开发者可用于判断是否是同一通呼叫
主叫收到被叫接受的通知
API 介绍
被叫同意通话后，主叫会收到该通知，请参见主叫收到被叫响应回调
收到该通知后，可以开启音视频连接
示例：

// 被叫接受的通知
netcall.on('callAccepted', function(obj) {
  console.log('on callAccepted', obj);
  // 如果呼叫之前，启动了超时倒计时，这里可以取消呼叫倒计时
  clearCallTimer();
  // 可以开启音视频连接操作。。。
});
参数说明
obj 为呼叫应答的回调通知对象
obj 属性类型说明accountstring被叫账号typenumber音视频呼叫类型：音频、视频
主叫收到被叫拒绝的通知
API 介绍
被叫拒绝通话后，主叫会收到该通知，此时主叫就应该做如下一系列 扫尾工作，请见这里
停止计时器
清空各种呼叫状态
示例
// 被叫拒绝的通知
netcall.on('callRejected', function(obj) {
  console.log('on callRejected', obj);
  // 如果呼叫之前，启动了超时倒计时，这里可以取消呼叫倒计时
  clearCallTimer();
  // 挂断
  hangup();
  // 做清理工作
  resetWhenHangup();
});

参数说明
obj 为呼叫应答的回调通知对象
obj 属性类型说明accountstring被叫账号typenumber音视频呼叫类型：音频、视频

音视频清理：
返回类型方法名说明
voidnetcall.stopLocalStream 停止播放本地视频
voidnetcall.stopRemoteStream 停止播发对端视频
voidnetcall.stopDevice 停止设备麦克风，不再向对端发送音频流
voidnetcall.stopDevice 停止设备摄像头，不再像对端发送视频流
voidnetcall.stopDevice 停止播放本地音频
voidnetcall.stopDevice 停止播放远程音频
示例：

// 清除上层逻辑自己维护的各种状态
clear();

// 停止本地视频预览
netcall.stopLocalStream();

// 停止对端视频预览
netcall.stopRemoteStream();

// 停止设备麦克风
netcall.stopDevice(Netcall.DEVICE_TYPE_AUDIO_IN);

// 停止设备摄像头
netcall.stopDevice(Netcall.DEVICE_TYPE_VIDEO);

// 停止播放本地音频
netcall.stopDevice(Netcall.DEVICE_TYPE_AUDIO_OUT_LOCAL);

// 停止播放对端音频
netcall.stopDevice(Netcall.DEVICE_TYPE_AUDIO_OUT_CHAT);

2、多人音视频通话

PS：以上个人笔记，仅供个人参考。

网易云信浏览器WebRTC视频聊天集成

猜你喜欢