基于腾讯云实现微信小程序和网络视频通话
公司有个需求需要实现微信小程序和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并且还要一直发送心跳,心跳就是相当于告诉服务端你现在是在房间中呢,如果你不发送心跳的话服务端就会以为你不在房间中就会把你给提出这个房间开一个定时器一直访问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把里面相关的文件拷贝到我们的项目中
上面截图的文件是都需要放到我们项目中的,然后还需在你需要视频的文件的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标签的操作主要有
基本上就这么几个操作,其他和web的操作流程基本一样,最后在提醒一句一定要仔细看官方提供的服务器的接口文档,所有的操作都是围着这几个接口进行的。
上一篇: 翩翩音视频呼叫项目。
下一篇: 红米电话呼叫困难
推荐阅读
-
利用腾讯云实时音视频录制实现类似微信语音通话功能(小程序端)
-
基于腾讯云实现微信小程序和网络视频通话
-
实时音视频通话的实现:使用微信小程序
-
uniApp 实现微信小程序和应用程序视频播放 flv 格式视频监控
-
基于STM32+ESP8266设计的物联网产品(重点:支持微信小程序一键连接腾讯云平台)
-
实时音频和视频技术的发展与应用-1.1 双重音频和视频 从架构上看,双人音视频系统相对简单明了。红点代表房间信令服务,房间信令服务的主要功能是管理房间信息,实现容量协商和上下行链路的质量调节,例如当下行信道发生拥塞时,上行线路的码率和分辨率会降低。 在传输信道层面,我们的策略是优先直连,在跨区域、跨运营商的情况下,我们会选择单中转或双中转信道,在策略上尽量保持直连和中转信道同时存在,当其中一个信道的质量不好时,系统会自动切断到另一个信道的流量。 1.2 多人音视频 多人视频通话的产品形态是整个房间不超过 50 人,大盘平均房间规模约为 4.x 人,房间内部最多满足一个大视频和三个小视频(四屏)。根据这一条件,我们在架构中采用了典型的 SFU 小房间设计。 上图中的红点代表房间信令服务,主要用于房间管理和状态信息同步。房间管理主要包括用户列表的管理,例如哪些用户打开了视频/音频,我看了谁,谁看了我,这些都是基于房间管理的信息,然后房间信令服务会将这些信息同步到媒体传输服务进行数据分发。 房间服务的另一个作用是房间级容量协商和质量控制,例如,房间里的每个人一开始都支持 H.265 编码,当某个时刻进来一个只支持 H.264 编码的用户时,房间里所有的上游主播就必须把 H.265 切成 H.264。还有一种情况是,房间里有一定比例的人下行链路信道质量较差,这会导致上行链路房间质量下降。 在传输层面,我们采用的是单层分布式媒体传输网络,大家都选择中转方式,不区分双人和多人,采用 Full-Mesh 传输机制将所有数据推送过去,比如一个节点上的人并不都看另外两个人的视频,但还是会将视频推送给他们。
-
使用JavaWeb、SSM和Vue开发基于微信小程序的在线商城系统的设计与实现-论文目录
-
基于JavaWeb+SSM+Vue实习记录微信小程序系统的设计和实现-系统设计
-
基于JavaWeb+SSM+Vue微信阅读小程序的设计和实现-系统设计