腾讯云小程序云直播解决方案-使用推流组件-同尘科技
在正式接入前，请先阅读微信小程序提供的 插件文档，了解插件的使用范围和限制。
版本支持
最新插件版本：1.3.9。新增小窗及美颜相关功能。需在云直播控制台添加插件，使用小程序直播域名才能调用，无需通过 version 标识方案（即与旧版本不兼容，需要在云直播控制台接入插件）。最低插件版本限制：1.2.4。仍支持旧方案，但是新功能暂时不支持，需要通过 version 2 来标识新方案。
准备工作
1. 在 微信公众平台 注册并登录小程序。2. 符合接入要求，申请插件并购买小程序·云直播服务，详见 小程序·云直播插件。3. 开通小程序·云直播服务后，登录 云直播控制台，在 域名管理 中添加小程序直播域名，然后 自助拼接直播地址。4. 下载并安装最新版本的 微信开发者工具，使用小程序绑定的微信号扫码登录开发者工具。
引入插件代码
在小程序中引入插件代码，可参考 Demo 源码。使用插件前需在小程序工程的app.json中声明要使用的插件，例如：
{ …… "plugins": { "liveRoomPlugin": { "version": "1.3.0", "provider": "wx95a7d2b78cf30f98" } }}
使用插件中的推流组件
在 page 的.json文件中定义需要引入的live-room-push组件，使用plugin://协议。
{ "usingComponents": { "live-room-push": "plugin://liveRoomPlugin/live-room-push" //推流组件 }}
在 page 的.wxml文件加载上一步引入的live-room-push组件。
直播推流组件相关属性说明
直播插件的使用方法和微信原生标签的方法一致，可参考微信小程序标签 live-pusher 的文档说明。
| 属性 | 类型 | 默认值 | 必填 | 说明 |
| liveAppID | Number | 0 | 是 | 用户的腾讯云 AppID |
| pushUrl | String | “” | 是 | 需用小程序直播推流域名生成的推流地址，详见 自助拼接直播地址 |
| version | Number | 1 | 否 | 1.2.4版本插件参数，此处必填值为：2。旧方案接入：填1或不填。高版本无需填写。 |
| orientation | String | “vertical” | 否 | 推流画面方向，可选值有 vertical、horizontal |
| muted | Boolean | false | 否 | 是否静音 |
| mode | String | “SD” | 否 | 清晰度，可选值：SD（标清）、HD（高清）、FHD（超清）、RTC（实时通话） |
| waitingImage | String | “” | 否 | 进入后台推流时候的垫片图片 |
| enableCamera | Boolean | true | 否 | 是否开启摄像头 |
| beauty | Number | 0 | 否 | 美颜指数，取值0 – 9，数值越大效果越明显 |
| whiteness | Number | 0 | 否 | 美白指数，取值0 – 9，数值越大效果越明显 |
| backgroundMute | Boolean | false | 否 | 进入后台时是否静音，初始化设置生效 |
| debug | Boolean | false | 否 | 是否显示日志 |
| autoFocus | Boolean | true | 否 | 自动聚焦，初始化设置生效 |
| aspect | String | “9:16” | 否 | 宽高比，可选值有3:4，9:16 |
| minBitrate | Number | 200 | 否 | 最小码率，仅在 mode 为”RTC”的时候生效 |
| maxBitrate | Number | 1000 | 否 | 最大码率，仅在 mode 为”RTC”的时候生效 |
| zoom | Boolean | false | 否 | 自动调整焦距，初始化设置生效 |
| devicePosition | String | “front” | 否 | 摄像头前置或后置，值为 front，back。注意，这个值只是在组件初始化时生效，不能动态修改。动态切换摄像头用接口 switchCamera |
| audioQuality | String | ‘high’ | 否 | 录音质量，’high’ 或者 ‘low’ |
| mirror | Boolean | false | 否 | 是否镜像反转 |
| autopush | Boolean | true | 否 | 是否自动推流 |
| bindPushEvent | EventHandle | null | 否 | 推流状态变化事件回调 |
| bindNetStatus | EventHandle | null | 否 | 网络状态变化事件回调 |
| bindError | EventHandle | null | 否 | 推流错误回调 |
| bindBgmStart | EventHandle | null | 否 | 背景音乐开始播放回调 |
| bindBgmProgress | EventHandle | null | 否 | 背景音乐进度回调 |
| bindBgmComplete | EventHandle | null | 否 | 背景音乐播放完成回调 |
| bindAttachedEvent | EventHandle | null | 否 | 插件加载完成回调 |
| custom-effect | Boolean | false | 否 | 自定义特效 |
| enableVideoCustomRender | Boolean | false | 否 | 自定义渲染 |
| picture-in-picture-mode | Boolean | false | 否 | 推流画中画 |
| skin-whiteness | Number | false | 1 | 自定义特效美白效果，取值 0~1。需要开启 custom-effect |
| skin-smoothness | Number | false | 1 | 自定义特效磨皮效果，取值 0~1。需要开启 custom-effect |
| face-thinness | Number | false | 1 | 自定义特效瘦脸效果，取值 0~1。需要开启 custom-effect |
| eye-bigness | Number | false | 1 | 自定义特效大眼效果，取值 0~1。需要开启 custom-effect |
组件实例化
live-room 组件支持开始推流、截图、切换摄像头等接口，要调用这些接口需要先获取到 live-room-push 的实例。获取 live-room-push 组件实例：
live-room-push 是腾讯视频云直播插件中的一个组件，在腾讯视频云直播插件中暴露了获取 live-room-push 组件实例的接口，您只需要先在 page 的.js文件中，将插件加载进来，即可获取到 live-room-push 组件实例。
// 加载插件var plugin = requirePlugin("liveRoomPlugin")// 获取 live-room 组件实例var liveRoomComponent = plugin.instance.getLiveRoomInstance();
组件接口
live-room-push 组件提供如下接口：可参考微信小程序组件 LivePusherContext 方法。
start
开始推流。调用之后会启动推流。在开始推流之前，pushUrl也要保证已经设置到组件属性中。
// 获取live-room-push组件实例var liveRoomPushComponent = plugin.instance.getLiveRoomPushInstance();liveRoomPushComponent.start();
stop
结束推流。
// 获取live-room-push组件实例var liveRoomPushComponent = plugin.instance.getLiveRoomPushInstance();liveRoomPushComponent.stop();
snapshot
截图。
liveRoomPushComponent.snapshot({ success: function (res){ wx.saveImageToPhotosAlbum({ filePath: {{imagepath}} }) }, fail:function(res) { }});
switchCamera
切换前后摄像头。
liveRoomComponent.switchCamera();
toggleTorch
打开/关闭手电筒。
liveRoomComponent.toggleTorch();
playBGM
播放背景音乐。
liveRoomComponent.playBGM({ url: media_url, success: function(res){}, fail: function(err){}, complete: function(res){}});
stopBGM
停止背景音乐。
liveRoomComponent.stopBGM();
pauseBGM
暂停背景音乐。
liveRoomComponent.pauseBGM();
resumeBGM
恢复背景音乐。
liveRoomComponent.resumeBGM();
setBGMVolume
设置背景音量。
liveRoomComponent.setBGMVolume({ volume: "0.5",// 0-1之间的浮点数字符串 success: function(ers){}, fail: function(err){}, complete: function(res){}});
startPreview
开启摄像头预览。
liveRoomComponent.startPreview();
stopPreview
关闭摄像头预览。
liveRoomComponent.stopPreview();
推流事件
推流事件分为：普通的推流事件，tag 是 pushEvent，code 含义见 状态码。错误事件，tag 是 error。现在只有白名单校验出错时会抛出，code 是-1，具体的错误原因在 detail 中给出。
美颜特效
小程序插件从1.3.9版本开始支持接入Web美颜特效，详情请参考 结合小程序云直播插件的推流美颜。
对解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家
腾讯云限时活动1折起，即将结束： 马上收藏
同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠
阿里云解决方案也看看？： 点击对比阿里云的解决方案
