微信公众号音视频通话

前提

sdkappid参数如果是公司项目跟徐长斌要，是接的项目跟流程顾问说让他跟业务方要

3d860dc15ef9461f31c580b1b814f96003ff90a2b8555e08e148228b189978e9为appsecret（秘钥，如果是公司项目跟徐长斌要，是接的项目跟流程顾问说让他跟业务方要）

微信公众号音视频通话

1.创建XXX.html 和XXX.json

2.编辑XXX.html

2.1 插入腾讯实时音视频web端元素

2.2根据元素文档,进行元素属性绑定：

{"data--callstate":callstatus,"data--switchspeaker":switchmic,"data--mutevideo":mutevideo,"data--muteaudio":mutemic,"data-localplayerid":"localvideo","data-remoteplayerid":"remotevideo","data-trtcuserid":userid,"data-trtcusersig":usersig,"data-trtcsdkappid":sdkappid,"data-trtcroomid":roomid,"data-x-speakers":speakers,"data-trtcroomtype":roomtype}

注意：data-trtcroomtype是音视频聊天类型的给的值为audio/video
data-trtcroomid是房间号必须为数字开头不可为0，长度不可超过10位，两个用户通话房间号必须相同

操作步骤参考图：

2.3 构造视频(或语音)展示内容。在页面上两个div上绑定id localvideo remotevideo (不管是语音通话还是视频通话都需要这两个div)

* 元素在页面中找到对应的id,并在元素下增加html内容

2.4 增加操作按钮并增加数据编程用于控制视频开关,声音等

连接按钮:_vm.callstatus("call")
挂断按钮:_vm.callstatus("stop")
关闭摄像头按钮:if(_vm.mutevideo() == "yes"){_vm.mutevideo("no");}else{_vm.mutevideo("yes")}
关闭语音按钮:if(_vm.mutemic() == "yes"){_vm.mutemic("no");}else{_vm.mutemic("yes")}
切换扬声器按钮:if(_vm.switchmic() == "yes"){_vm.switchmic("no");}else{_vm.switchmic("yes")}
更改通话类型按钮:if(_vm.roomtype()== "video"){_vm.roomtype("audio");}else{_vm.roomtype("video");}

2.5增加同步数据元素和对页面中的变量进行初始化:

{"mutemic":"","mutevideo":"","switchmic":"","callstatus":"wait","userid":"","usersig":"","sdkappid":"","roomid":123,"speakers":"","devices":"","roomtype":"audio"}

3.编辑XXX.json

3.1 插入自定义代码段：

*INSBEGIN:CUSTOM*/
function() {
var TLSSigAPIv2 = require("tls-sig-api-v2");
tmp_data.sdkappid = 1400447762; // 1400447762为sdkappid(sdkappid如果是公司项目跟徐长斌要，是接的项目跟流程顾问说让他跟业务方要)， 
var api = new TLSSigAPIv2.Api(1400447762, "3d860dc15ef9461f31c580b1b814f96003ff90a2b8555e08e148228b189978e9"); //3d860dc15ef9461f31c580b1b814f96003ff90a2b8555e08e148228b189978e9为appsecret（秘钥，如果是公司项目跟徐长斌要，是接的项目跟流程顾问说让他跟业务方要）

tmp_data.sig = api.genSig(tmp_data.userid, 604800); //tmp_data.userid可为当前登陆用户id和604800有效时间,7天的毫秒数，可以那业务逻辑进行修改

},
/*INSEND:CUSTOM*/

3.2 生成房间号 roomid

* xxxxxxxxx(可以是当前时间戳)

注意: roomid也可在当前页面的上级页面(列表页)通过#?形式传过来,文档中是在页面接口中生成的

3.3 获取页面中需要的额外数据比如用于语音时的头像昵称展示

3.4 构造返回值,将roomid usersig sdkappid 以及其他业务数据返回给页面

/*INSBEGIN:STDOUT*/
      function() {
        _.extend(finish_data, {
          "success": true,
          "_runCommand": [{
            "command": "updatelv",
            "params": [{
              "usersig": tmp_data.sig,
              "sdkappid": tmp_data.sdkappid,
              "roomid": tmp_data.roomid
            }]
          }]
        });
      },
      //@wweditorinfo:{"id":"cf760ed9cbd5d5e99d047f3b7ac9dad0","editor":{"jsonValue":{"success":true,"_runCommand":[{"command":"updatelv","params":[{"usersig":"tmp_data.usersig","sdkappid":"tmp_data.sdkappid"}]}]},"steppurpose":{"purpose":"finishdata"}}}
/*INSEND:STDOUT*/

4.注意事项

4.1 关于(苹果/安卓)手机获取权限后还无法通过的处理方法

4.1.1选中元素右击→点击逻辑→再点击逻辑设置中的逻辑→发生某事选择其他事件→填写额外参数：trtcremoteiosplay→产生某效果选择绑定数据编程→点击高级编辑→在逻辑代码中填写_vm.kzanhtrue);→点击保存→增加操作

4.1.2页面新增一个按钮→给按钮加id→remotevideoautoplay→点击确定→选择数据绑定→可见性绑定→增加绑定参数→kzanh)→点击确定

4.1.3在同步元素中的绑定变量初始化→{"kzanhx":false}→点击确定

4.2 问题及处理方式

4.2.1 浏览器console报"进入房间失败"，处理方式1：sdkappid和secretkey失效(即腾讯云实时语音套餐包到期或者套餐时长消耗完，可以前去 https://console.cloud.tencent.com/trtc/package续费)，2：当前登录人id（即元素属性绑定的userid）错误;