小程序实时视频流程及api

男娘i 2021-08-19 19:44 454阅读 0赞

一.前期准备及开发流程

1、小程序申请（非个人的）

2、到小程序后台中 开发-设置 （这2个打开）

![2019091910141151.png][]

3、开通腾讯云直播服务

3.1 申请开通视频直播服务 进入 云直播管理控制台 开通云直播服务。  
3.2 添加自有域名（[查看腾讯云文档][Link 1]）  
3.3 域名 CNAME 在您添加域名成功后，您的域名需要指向腾讯云直播的云服务集群。

4、开通腾讯云通信服务

5、开通房间管理服务  
5.1 创建应用 进入云直播控制台的【直播SDK】>【房间管理】页面，单击【创建应用】填写应用信息。  
5.2 获取直播服务配置信息

6、小程序开发

7、把腾讯云域名添加到小程序后台 【开发】>【开发设置】>【服务器域名】中配置“request 合法域名”

[详情流程可以参考][Link 2]

[腾讯云视频dome][dome]

二、开发组件及api

1、视频播放主要组件

[<live-player>播放][live-player]  
<[live-pusher>推流][live-pusher]

2.文本组件(覆盖在视频上的)

[<cover-view>][cover-view]显示文本

覆盖在原生组件之上的文本视图。

可覆盖的原生组件包括 [map][]、[video][]、[canvas][]、[camera][]、[live-player][live-player 1]、[live-pusher][live-pusher 1]

只支持嵌套 [cover-view][]、[cover-image][]，可在 [cover-view][] 中使用 [button][]。组件属性的长度单位默认为px，[2.4.0][]起支持传入单位(rpx/px)。

[<cover-image>][cover-image]图片

3.[webrtc-room][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70][]

4.[websocket][]的方法，唤起和关闭视频的作用

wx.connectSocket 连接服务

wx.sendSocketMessage连接发送数据

wx.onSocketMessage 监听WebSocket接受到服务器的消息事件

wx.onSocketMessageCallback  收到消息回调

wx.onSocketOpen监听WebSocket连接打开事件。callback 回调函数

wx.onSocketError监听WebSocket错误

wx.closeSocket关闭连接(必须在onUnload 事件里面关闭)

5.[视频截图][Link 3]

// 截取远端用户视频图像
    trtcRoomContext.snapshot({
      userID: 'xxx',            // 远端用户 ID
      streamType: 'main'        // 远端用户流类型
    }).then((event)=>{
      // 截图成功
    })

[2019091910141151.png]: /images/20210813/3e98463f221e446aa43659afd5e858d6.png
[Link 1]: https://cloud.tencent.com/document/product/267/20381
[Link 2]: https://github.com/tencentyun/MLVBSDK/tree/master/WXMini
[dome]: https://cloud.tencent.com/document/product/454/6555#.E5.B0.8F.E7.A8.8B.E5.BA.8F-demo
[live-player]: https://cloud.tencent.com/document/product/454/12518
[live-pusher]: https://cloud.tencent.com/document/product/454/12519
[cover-view]: https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html
[map]: https://developers.weixin.qq.com/miniprogram/dev/component/map.html
[video]: https://developers.weixin.qq.com/miniprogram/dev/component/video.html
[canvas]: https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
[camera]: https://developers.weixin.qq.com/miniprogram/dev/component/camera.html
[live-player 1]: https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html
[live-pusher 1]: https://developers.weixin.qq.com/miniprogram/dev/component/live-pusher.html
[cover-image]: https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html
[button]: https://developers.weixin.qq.com/miniprogram/dev/component/button.html
[2.4.0]: https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html
[webrtc-room]: https://cloud.tencent.com/document/product/647/17018
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70]: /images/20210813/ebf27456372c4714951d2aee12999157.png
[websocket]: https://blog.csdn.net/yyjjyysleep/article/details/81318711
[Link 3]: https://cloud.tencent.com/document/product/647/17018#snapshot%28params%29