基于腾讯云实现微信小程序与Web视频通话

2018-08-03 本文已影响534人予你挚终_cc3a

公司有个需求需要实现微信小程序和web视频通话功能，刚接触的时候真是一脸懵逼，但是自己真正做过后就觉得其实还好，没有想象中那么难所以来做一波总结

1.准备工作

要实现微信小程序和web视频通话首先需要开通腾讯云实时音视频服务，这个是必须的，还有就是IM服务，如果不开通也不影响但是就不能实现聊天的功能，还有就是服务器要支持https 访问才行，小程序端是对于这个有要求的

2.搭建服务端

要实现视频通话必须要有一个服务端，通过服务端来给我们派发必须的参数，服务端建议不要自己写直接去下载腾讯云官网提供的就好了下载地址,把相关的参数按照提示配置进去就可以了，官方还为服务端提供了文档文档地址,通过提供的文档就能很直观了解服务端API接口的各个作用了基本上服务端的搭建就这么多

3.web端开发

web端的开发主要分这么几步，访问服务获取必须的参数--进入或者创建房间--获取本地视频流--获取远程视频流--通话结束，web端视频需要使用video标签进行，首先新建两个标签一个代表本地一个代表远程

<video id="localVideo" muted autoplay playinline></video>
<video id="remoteVideo" muted autoplay playinline></video>

需要引用腾讯云提供的sdk将下面这个sdk引入我们的项目

<script src="https://sqimg.qq.com/expert_qq/webrtc/2.5.2/WebRTCAPI.min.js" >

访问我们刚才搭建的服务器获取必须的参数，访问get_login_info接口获取所需参数，一定要认真看官方提供的服务端接口文档，不然根本就不知道这是啥意思，这就已经返回了我们所需要的参数sdkAppid,accountType,userID,userSig这四个必须的参数，接下来就是进行第二步，创建或者进入房间，如果你是进入别人的房间那么你就访问enter_room接口，进入一个房间，如果你要自己创建房间就要访问create_room并且创建成功后在访问enter_room进入自己创建的房间但是光进入房间还不行必须要一直发送心跳，心跳就是相当于告诉服务端你现在是在房间中呢，如果你不发送心跳的话服务端就会以为你不在房间中就会把你给提出这个房间开一个定时器一直访问heartbeat接口刚才访问服务端获取的参数一定要都存在本地因为一会还需要用这些参数进行sdk的操作，接下来贴上完整的sdk操作代码

function getApi(){
            RTC = new WebRTCAPI({
                sdkAppId: sdkAppID,
                openid: userID,
                userSig: userSig,
                accountType: accountType
              }, function () {
                  
                 RTC.createRoom( {
                        roomid : roomID,
                        privateMapKey: privateMapKey,
                        role : "miniwhite",
                    },function(){
                        //进房房间成功
                        console.log("进入房间成功");
                    },function(data){
                        //进入房间失败
                        console.log("进入房间失败"+data);
                    });
              }, function (error) {
                console.error(error)
              });
            
            
            //本地视频流新增/更新通知
            this.RTC.on("onLocalStreamAdd", function (info) {
                var videoElement = document.getElementById("localVideo");
                videoElement.srcObject = info.stream;
                videoElement.muted = true;
              });
            
            //远程视频流新增/更新通知
            this.RTC.on("onRemoteStreamUpdate", function (info) {
                var videoElement = document.getElementById("remoteVideo");
                videoElement.srcObject=info.stream;
                videoElement.muted = false;
          })
            //检测房间人员退出
            this.RTC.on("onRemoteStreamRemove", function (info) {
                 console.log("当前房间有人退出："+info.userId + ' leave this room with unique videoId '+ info.videoId  );
                 $("#remoteVideo").css("display","none");
              });
              
            this.RTC.on("onKickOut", function () {
                console.log("其他地方登录，被踢下线");
              });
        
            this.RTC.on("onWebSocketClose", function () {
                console.log("websocket断开");
              });
        
        
            this.RTC.on("onRelayTimeout", function () {
                console.log("服务器超时断开");
              });
            
        }

把上面相关的所需参数填写上就能够实现web端的视频通话功能

4.小程序端

小程序端是里面最麻烦的也是坑最多的，小程序端要想实现和web端的通话可以webrtc-room这个标签，这个标签不是小程序原生标签是自定义标签所以我们需要去官网下载官方提供的demo把里面相关的文件拷贝到我们的项目中

image.png

上面截图的文件是都需要放到我们项目中的，然后还需在你需要视频的文件的json文件里加入如下配置

"usingComponents": {
   "webrtc-room": "/pages/components/webrtc-room/webrtc-room",
   "sketchpad": "/pages/components/sketchpad/sketchpad"
 }

这些都是必不可少的每一步都不能少，接下来就是去访问我们的服务器去做相关的操作，操作步骤和web访问的流程一样不过多阐述
这是我们页面的代码

<webrtc-room id="webrtcroom"
    roomID="{{roomID}}"
    userID="{{userID}}"
    userSig="{{userSig}}"
    sdkAppID="{{sdkAppID}}"
    privateMapKey="{{privateMapKey}}"
    template="1v3"
    beauty="{{beauty}}"
    muted="{{muted}}"
    debug="{{debug}}"
    bindRoomEvent="onRoomEvent"
    enableIM="{{enableIM}}"
    bindIMEvent="onIMEvent">
</webrtc-room>

把上面所需的参数通过访问服务端都给补齐就行了然后是对于webrtc-room标签的操作主要有