实时音视频 实时语音通话(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，按顺序引入以下资源
<script src="./trtc.js"></script>
<script src="./tim-js.js"></script>
<script src="./tsignaling.js"></script>
<script src="./trtc-calling-js.js"></script>

2、在main.js中引入腾讯云通话

import TRTCCalling from 'trtc-calling-js'
Vue.prototype.$TRTCCalling = TRTCCalling;

3、定义全局变量

var CONFIG_OBJ = {SDKAppID:********,  //腾讯云语音idtrtcCalling: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、通话弹框组件

<template><div class="call_bounced_warp" id="call_bounced_warp"><span class="message" id="message">{{callMessage}}</span><div slot="footer" class="manage_dialog_footer dialog-footer"><el-button type="success" v-show="acceptBtn"@click="acceptThis">接 听</el-button><el-button type="danger" v-show="rejectBtn" @click="rejectThis">拒 绝</el-button><el-button type="danger" v-show="endBtn" @click="endThis">挂 断</el-button></div></div>
</template><script>export default {name: "call_bounced",data(){return{message:"",acceptBtn:true,rejectBtn:true,endBtn:false,}},props:{callMessage:String},mounted(){this.dragBox(document.querySelector("#message"),document.querySelector("#call_bounced_warp"));},methods:{acceptThis(){CONFIG_OBJ.trtcCalling.accept();this.$store.commit("$_updateCallStatus", "calling");},rejectThis(){CONFIG_OBJ.trtcCalling.reject();this.$store.commit("$_updateCallStatus", "idle");},endThis(){CONFIG_OBJ.trtcCalling.hangup();this.$store.commit("$_updateCallStatus", "idle");},dragBox(drag, wrap){function getCss(ele, prop) {return parseInt(window.getComputedStyle(ele)[prop]);}var initX,initY,dragable = false,wrapLeft = getCss(wrap, "left"),wrapRight = getCss(wrap, "top");drag.addEventListener("mousedown", function (e) {dragable = true;initX = e.clientX;initY = e.clientY;}, false);document.addEventListener("mousemove", function (e) {if (dragable === true ) {var nowX = e.clientX,nowY = e.clientY,disX = nowX - initX,disY = nowY - initY;wrap.style.left = wrapLeft + disX + "px";wrap.style.top = wrapRight + disY + "px";}});drag.addEventListener("mouseup", function (e) {dragable = false;wrapLeft = getCss(wrap, "left");wrapRight = getCss(wrap, "top");}, false);}},computed:{callStatus(){return this.$store.state.callStatus},},watch:{/*监听当前通话状态改变*/callStatus(val){if(val == "calling"){this.acceptBtn = false;this.rejectBtn = false;this.endBtn = true;}else if(val == "connect"){//正在连接的状态并且是当前人发起的视频  不显示接收按钮if(this.$store.state.isInviter){this.acceptBtn = false;this.rejectBtn = false;this.endBtn = true;}else{this.acceptBtn = true;this.rejectBtn = true;this.endBtn = false;}}}}}
</script><style scoped lang="scss">
.call_bounced_warp{width: 3rem;height: 1.55rem;background: #000;position: absolute;bottom: 0.14rem;right: 0.15rem;z-index: 9999;border-radius: 4px 4px 0 0;text-align: center;padding: 0.15rem 0;.message{line-height: 0.6rem;color: #fff;cursor: move;}
}
</style>

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"); //改为空闲状态

效果如下