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:********,  //腾讯云语音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"); //改为空闲状态

效果如下

web端对接语音通话（腾讯云）相关推荐

php+socket+Recorder搭建web端实时语音通话
兼容没有测试只测试了谷歌浏览器不适合长时间通话延迟2s~5s时间长了延迟会高可以自己接着调试 **1.搭建socket ** 参照官网 https://www.workerman.net/we ...
[Web端接入经验分享] 腾讯云即时通信TIM、实时音视频TRTC
[Web端接入经验分享] 腾讯云即时通信TIM.实时音视频TRTC 即时通信TIM官网地址即时通信TIM SDK API文档地址实时音视频TRTC官网地址实时音视频TRTC SDK API文档地 ...
WEB网页短信平台移讯云短信系统
WEB网页短信平台移讯云短信系统一:短信平台组成短信平台由C#源码开发,系统由: 1:短信平台客户端网页版. 2:短信平台总后台网页版. 3:短信平台发送服务端. 4:短信平台数据库. 5:短信服 ...
网易七鱼在线客服系统web端对接
网易七鱼在线客服系统web端对接文档:http://docs.qiyukf.com/?page_id=28 具体接入代码 function get_WYQY_info(){/*--------七鱼配 ...
2021最新腾讯通信云服务端使用心得，腾讯云IM
腾讯通信云服务端使用心得 1.腾讯通信服务入口并创建应用方便使用保留url地址 : https://cloud.tencent.com/product/im 注册账号腾讯云账号->通过审核 ...
腾讯云php代码上传,OA对接上传腾讯云存储帮助
一.安装和要求: 1.更新到最新版本,信呼OA版本v2.1.8+支持. 2.安装node版本的服务端,队列要可以用,是使用队列上传到腾讯云存储的,看看服务端. 3.下载腾讯云存储对象sdk到oa的,确 ...
web端对接海康平台V1.5.1插件
1.下载webv1.5.1插件 2.获取APPKey和APPSecret 需要登录综合安防平台(可以对接平台的话会有一套可访问的管理页面),点击状态监控,选择API网关下的API管理,进入API网关后 ...
大厂出品的Web端AI语音转文字神器
有朋友在"十点神器"回复提问录音转文字的工具,手机上我一直在用讯飞语记,不过后期可能要收费,电脑上一直也没用到过语音转文字这样的场景,倒是文字转语音用过不少,不过既然有朋友问,那就 ...
web端对接海康视频3.2开发包以及遇到的坑
须知: 3.0开发包功能比较全,但是只支持ie浏览器,所以使用的功能相对来说较少的3.2开发包,开发包官网上可以下载,可自行下载,并按照要求引入文件. 我的项目需求是左侧显示摄像头树状列表,中间部分显 ...

web端对接语音通话（腾讯云）

web端对接语音通话（腾讯云）相关推荐

最新文章

热门文章