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

京公网安备 11010502036488号