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，按顺序引入以下资源
<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:********,  //腾讯云语音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、通话弹框组件

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

效果如下