由于网易云信的音视频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项目二次开发出来了。