有奖捉虫:办公协同&微信生态&物联网文档专题 HOT
在正式接入前,请先阅读微信小程序提供的 插件文档,了解插件的使用范围和限制。

版本支持

最新插件版本: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-room-push liveAppID="{{liveAppID}}" pushUrl="{{pushUrl}}" orientation="{{orientation}}" muted="{{muted}}" mode="{{mode}}" waitingImage="{{waitingImage}}" enableCamera="{{enableCamera}}" beauty="{{beauty}}" whiteness="{{whiteness}}" backgroundMute="{{backgroundMute}}"
debug="{{debug}}" autoFocus="{{autoFocus}}" aspect="{{aspect}}" minBitrate="{{minBitrate}}" maxBitrate="{{maxBitrate}}" zoom="{{zoom}}" devicePosition="{{devicePosition}}" sdkAppID="{{sdkAppID}}" accountType="{{accountType}}" userID="{{userID}}" userSig="{{userSig}}"
roomID="{{roomID}}" nickName="{{nickName}}" avatar="{{avatar}}" bindPushEvent="onPushEvent" bindIMEvent="onIMEvent">

直播推流组件相关属性说明

直播插件的使用方法和微信原生标签的方法一致,可参考微信小程序标签 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美颜特效,详情请参考 结合小程序云直播插件的推流美颜