web端对接语音通话（腾讯云）
实时音视频 实时语音通话(Web) - 场景实践 - 文档中心 - 腾讯云
按照要求注册腾讯云账号，跑通demo
1、集成TRTCCalling组件
// npm方式安装
npm install trtc-js-sdk --save
npm install tim-js-sdk --save
npm install tsignaling --save
npm install trtc-calling-js --save
// script方式使用 trtc-calling-js，按顺序引入以下资源
2、在main.js中引入腾讯云通话
import TRTCCalling from 'trtc-calling-js'
Vue.prototype.$TRTCCalling = TRTCCalling;3、定义全局变量
var CONFIG_OBJ = {
SDKAppID:********, //腾讯云语音id
trtcCalling:null, //腾讯云语音对象
};4、登录腾讯云语音并且绑定监听事件
methods:{
//初始化腾讯云通话
initCall(){
var that = this;
//登录腾讯云语音
let options = {
SDKAppID: CONFIG_OBJ.SDKAppID
};
CONFIG_OBJ.trtcCalling = new this.$TRTCCalling(options);
CONFIG_OBJ.trtcCalling.login({
userID:that.$store.state.user.name,
userSig:that.$store.state.user.userSig
});
//监听有人发来视频
CONFIG_OBJ.trtcCalling.on(that.$TRTCCalling.EVENT.INVITED, ({
inviteID,
sponsor,
inviteData
}) => {
let message = "来自" + sponsor + "的语音通话";
if (sponsor === that.$store.state.user.name) {
// 邀请人是自己, 同一个账号有可能在多端登录
return;
}
// 考虑忙线的情况
if (that.$store.state.callStatus === "calling" ||
that.callStatus === "connected") {
CONFIG_OBJ.trtcCalling.reject({ inviteID, isBusy: true });
return;
}
that.$store.commit("$_updateIsInviter", false);
that.$store.commit("$_updateCallStatus", "connect");
that.callMessage = message;
});
//监听对方同意（拨打方）
CONFIG_OBJ.trtcCalling.on(that.$TRTCCalling.EVENT.USER_ACCEPT,({userID}) => {
that.callMessage = "与"+userID+"的语音通话";
that.$store.commit("$_updateCallStatus", "calling");
});
//监听有用户进入聊天（接收方）
CONFIG_OBJ.trtcCalling.on(that.$TRTCCalling.EVENT.USER_ENTER,({userID}) => {
that.callMessage = "来自"+userID+"的语音通话";
that.$store.commit("$_updateCallStatus", "calling");
});
//监听对方拒绝接听
CONFIG_OBJ.trtcCalling.on(that.$TRTCCalling.EVENT.REJECT,({userID}) => {
that.callMessage = "对方拒绝接听通话请稍后重试......";
setTimeout(function () {
that.$store.commit("$_updateCallStatus", "idle");
},1500)
});
//监听对方占线
CONFIG_OBJ.trtcCalling.on(that.$TRTCCalling.EVENT.LINE_BUSY,({userID}) => {
that.callMessage = "对方正忙请稍后重试......";
setTimeout(function () {
that.$store.commit("$_updateCallStatus", "idle");
},1500)
});
//监听对方在联通前取消拨打电话
CONFIG_OBJ.trtcCalling.on(that.$TRTCCalling.EVENT.CALLING_CANCEL,({userID}) => {
that.callMessage = "对方已取消";
setTimeout(function () {
that.$store.commit("$_updateCallStatus", "idle");
},1500)
});
//监听通话中时用户挂断电话（双方）
CONFIG_OBJ.trtcCalling.on(that.$TRTCCalling.EVENT.CALL_END,({userID}) => {
that.callMessage = "通话已结束";
setTimeout(function () {
that.$store.commit("$_updateCallStatus", "idle");
},1500)
});
}
},
computed:{
callStatus(){
return this.$store.state.callStatus
},
},
watch:{
/*监听当前通话状态改变*/
callStatus(val){
//空闲
if(val == "idle"){
this.CallBouncedShow = false; //通话提示框
this.$refs.PlayAudioRef.stopAudio("call"); //通话铃声
//正在通话中的状态
}else if(val == "calling"){
this.CallBouncedShow = true; //通话提示框
this.$refs.PlayAudioRef.stopAudio("call"); //通话铃声
//连接中的状态
}else if(val == "connect"){
this.CallBouncedShow = true; //通话提示框
this.$refs.PlayAudioRef.playAudio("call"); //通话铃声
//正在连接的状态并且是当前人发起的视频
if(this.$store.state.isInviter){
this.callMessage = "等待对方接听......"; //修改通话显示框的文字
}
}
}
}
5、通话弹框组件
6、拨打电话
this.$url.trtcCalling.call({
userID:row.id,
type: 1, //通话类型，0-未知， 1-语音通话，2-视频通话
});
this.$store.commit("$_updateCallStatus", "connect"); //更新通话状态为连接中
this.$store.commit("$_updateIsInviter", true); //更新当前登录人是否是发起者7、退出
CONFIG_OBJ.trtcCalling.logout(); //执行退出登录方法
this.$store.commit("$_updateCallStatus", "idle"); //改为空闲状态效果如下
