微信小程序集成TRTC SDK,集成移动直播SDK

2021-03-22 14:21:44 浏览数 (2)

TRTC小程序集成方法

在集成小程序 SDK 前,请确保您已完成以下步骤,具体操作请参见跑通Demo(小程序)。

  • 创建了腾讯云实时音视频应用,购买了相应的套餐,并获取到 SDKAppID 和密钥信息。
  • 开通小程序类目与推拉流标签权限。
  • 小程序服务器域名配置。

环境要求:

  • 微信 App iOS 最低版本要求:7.0.9
  • 微信 App Android 最低版本要求:7.0.8
  • 小程序基础库最低版本要求:2.10.0
  • 由于微信开发者工具不支持原生组件(即 <live-pusher> 和 <live-player> 标签),需要在真机上进行运行体验。

下载组件源码 (直接在小程序Demo中找)

<trtc-room>组件的文件结构如下:

trtc-room组件文件目录结构trtc-room组件文件目录结构

将下载的组件源码直接可以充当你小程序的组件来使用放入你的项目

组件在项目的位置组件在项目的位置

然后在需要引入的页面的json文件中引入组件

代码语言:json复制
"usingComponents": {
"trtc-room": "/components/trtc-room/trtc-room"
}

在需要引入的页面的wxml文件中写入标签(需要给 id 属性方便获取组件对象,配置组件的属性 trtcConfig

代码语言:html复制
<trtc-room id="trtcroom" config="{{trtcConfig}}"></trtc-room>

在对应的js文件中就可以获取组件对象进行操作了,相关方法可以参见<trtc-room>

代码语言:javascript复制
let trtcRoomContext = this.selectComponent('#trtcroom') // 获取组件对象

小程序集成移动直播方法

集成方法和trtc的加成方法一样,都是集成组件,然后在对应的页面中引入,组件源码也可以在移动直播的小程序Demo中找到,

组件<mlvb-live-room>组件文件结构目录组件<mlvb-live-room>组件文件结构目录

在需要引入的页面的json文件中引入组件

代码语言:json复制
"usingComponents": {
    "mlvb-live-room": "/pages/components/mlvb-live-room/mlvbliveroomview"
}

然后在页面中写入标签(设置id属性方便获取组件对象,设置其他必要的配置属性可参考移动直播<mlvb-live-room>)

代码语言:html复制
<mlvb-live-room id="id_liveroom" wx:if="{{showLiveRoom}}" roomid="{{roomID}}" role="{{role}}" roomname="{{roomName}}" pureaudio="{{pureAudio}}" debug="{{debug}}" muted="{{muted}}" beauty="{{beauty}}" template="float" bindRoomEvent="onRoomEvent">

对应的js文件获取<mlvb-live-room>组件对象,对象的相关方法可以参考<mlvb-live-room>

代码语言:javascript复制
self.component = self.selectComponent("#id_liveroom")

移动直播不能直接拿来使用需要在腾讯云的控制台开通云直播服务

开通云直播后需要添加一个播放域名,和推流域名,相关操作可以参考开通云直播服务

0 人点赞