由于网易云信的音视频demo,是依据原生js,jq操作dom和ui视图,总觉得不好做本地化二次开发。
所以这里把他demo以及文档中核心的部分取出来,并使用vue开发实现通话。
完整的项目是 小程序端+后台 实现两端聊天,这里介绍后台的写法。

第一步:新建vue项目
新建项目不做描述,vue create demo即可

第二步:引入sdk
官方sdk下载地址(下载你需求的sdk,这里用的音视频的): https://netease.im/im-sdk-demo
下载后解压,把用到的sdk放进项目里,引入sdk(注意版本号)一般是在main.js中引入:
在这里插入图片描述
第三步: 初始化NIM

nim = NIM.getInstance({
  appKey: appkey, // 你的appkey ,没有就用demo里测试的
  account,  // 你这个appkey下的账号
  token, // 密码 注意是否需要md5加密与解密
  debug : true, // 是否开启console
})

这里的nim将作为后面NIM的这个实例,我这里做法是将其赋值到data,方便后面使用

第四步:初始化Netcall
在初始化Netcall之前,一定要在实例NIM后面加上: NIM.use(WebRTC)
WebRTC是前面import进来的

// 初始化 Netcall
 this.netcall = Netcall.getInstance({
       nim: this.nim, // 刚刚初始化的nim
    container: this.$refs.doctor, // 这里是你要展示“我的“视图的地方 在dom里加上ref
    remoteContainer: this.$refs.people, // 这里是你要展示“对方”视图的地方
    chromeId: '', 
    // 是否开启日志打印
    debug: false,
    onmsg: function(message){
      // 自定义通知
      if(/notification/i.test(message.type)){
        // 取出消息体
        const content = message.attach
        // 判断消息体类型
        if(/netcallbill/i.test(content.type)) {
          console.log('话单通话双方账号:', content.accounts)
          console.log('话单通话时长:' + content.duration + ' 秒')
        }
      }
    }
  })
  // 判断浏览器是否支持webrtc
  const isSupportWebrtc = this.netcall.isSupportWebrtc()
   console.log('是否支持RTC:', isSupportWebrtc)
   if(isSupportWebrtc){
     this.$Message['success']({
       background: true,
       content: '支持RTC'
     });
     // 初始化事件
     this.init()
   }

第五步:初始化信令
第四步的末尾:this.init()调用初始化事件
详情事件可见文档:云信初始化事件
这里举个例子:对方接受呼叫的事件

// 对方接受呼叫
 netcall.on('callAccepted', function(obj) {
   console.log(obj)
   // 缓存呼叫类型,后面开启音视频连接需要用到
   let type = obj.type;
   console.log('on callAccepted  对方接受呼叫', obj);
   // this.$Message['success']({
   //   background: true,
   //   content: '对方接受呼叫,准备通话'
   // });
   that.Calling = false
   that.onCalling = true
   // 取消呼叫倒计时
   that.clearCallTimer()
   that.beginjishi()
   // 可以开启音视频连接操作。。。
   // that.jietong()
   netcall.startRtc().then(function() {
     // 开启麦克风
     return netcall.startDevice({
       type: Netcall.DEVICE_TYPE_AUDIO_IN
     }).catch(function(err) {
       console.log('启动麦克风失败')
       console.error(err)
       this.$Message['warning']({
         background: true,
         content: '启动麦克风失败'
       });
     })
   })
   .then(function() {
     // 设置采集音量
     netcall.setCaptureVolume(255)
     // 开启摄像头
     return netcall.startDevice({
         type: Netcall.DEVICE_TYPE_VIDEO
       })
     .catch(function(err) {
       console.log('启动摄像头失败')
       console.error(err)
       this.$Message['warning']({
         background: true,
         content: '启动摄像头失败'
       });
     })
   })
   .then(function() {
     // 预览本地画面
     netcall.startLocalStream(
       document.getElementById('localContainer')
     )
     // 设置本地预览画面大小
     netcall.setVideoViewSize({
         width: 450,
         height: 300,
         cut:true
     })
   })
   .catch(function(err) {
     console.log('发生错误')
     console.log(err)
     this.$Message['error']({
       background: true,
       content: err
     });
     netcall.hangup()
   })

基本上视频就用vue项目二次开发出来了。