更新记录
5.0.1(2022-04-14)
- 修复iOS打包库冲突bug;
5.0.0(2022-03-11)
- 升级uniapp基础库至3.3.10;
4.1.0(2021-12-20)
- 修复iOS和Android部分接口不一致bug;
平台兼容性
Android | Android CPU类型 | iOS |
---|---|---|
适用版本区间:4.4 - 11.0 | armeabi-v7a:未测试,arm64-v8a:未测试,x86:未测试 | 适用版本区间:9 - 14 |
原生插件通用使用流程:
- 购买插件,选择该插件绑定的项目。
- 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
- 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
- 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
- 开发完毕后正式云打包
付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios
注意事项:使用HBuilderX2.7.14以下版本,如果同一插件且同一appid下购买并绑定了多个包名,提交云打包界面提示包名绑定不一致时,需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择
腾讯云直播推流器
主要负责将本地的音频和视频画面进行编码,并推送到指定的推流地址,支持任意的推流服务端。
接口模式(纯API)
扫描下方二维码,安装示例代码,快速体验插件功能:
Android | iOS | 联系我们 |
---|---|---|
扫码添加技术支持(微信号: ruanyunkeji006),开通测试账号。
技术支持
建议扫码添加我们技术支持,协助接入和测试。
联系我们 | 微信号 | 更多功能 |
---|---|---|
ruanyunkeji006 |
基础美颜 背景音乐 聊天、弹幕、送礼等 |
快速开始
1: 集成插件
- 加载插件
插件名称: RY-TencentMLVB-LivePusher
-
使用 自定义基座 ,引入插件;
-
新建nvue文件,该插件必须在nvue中使用。在使用前,需要先加载插件。
<RY-TencentMLVB-LivePusher ref="livePusher" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentMLVB-LivePusher>
说明:
可以通过修改width和height参数值的大小,来修改视频容器的大小。
- 腾讯云配置
注册或登录腾讯云账号,并进行实名认证。
- 点击 直播服务,开通直播功能,已开通,则忽略;
- 点击 Licence管理,进入Licence页面;
- 点击 "创建测试Licence"按钮,弹出测试Licence配置界面;
- 在"基本信息"中,输入"App Name" => 应用名称,"Package Name" => Android包名(需要和自定义基座的Android包名一致),"Bundle Id" => iOS包名(与自定义基座iOS的Bundle Id一致);
- 在"选择功能模块中",选中"直播推流(RTMP推流+RTC推流)"。
- 创建成功后,您会获取 Licence,您会获得两个字符串:一个字符串是 licenseURL,另一个字符串是解密 key。
注意:
请使用测试Licence开发测试,如果您需要购买正式Licence(信息填写错误无法修改,也可能无法退款),建议先联系我们技术支持微信(微信号: ruanyunkeji006)。
- 生成推流地址
a. 自动推流,联系我们技术支持微信(微信号: ruanyunkeji006)。
b. 点击 推流地址,填入相关信息,生成推流地址。
2. 开始使用插件
- 首先调用 init 初始化推流并给SDK授权。该步骤可以指定一些高级配置参数,但一般情况下我们不建议您操作该对象,因为我们已经在其内部配置好了所有需要校调的参数。
this.$refs.livePusher.init({
licence: {
url: 'http://license.vod2.myqcloud.com/license/v1/e50xxxe680/TXLiveSDK.licence',
key: '3d436208xxxxd7f92871'
},
docPath: plus.io.convertLocalFileSystemURL('_doc')
}, ret => {
console.log(ret);
});
注意:
需要使用高级参数,请联系我们技术支持微信(微信号: ruanyunkeji006)。
3: 设置监听
使用 setLivePusherListener 设置推流监听器,监听器会返回推流相关的 事件回调。
this.$refs.livePusher.setLivePusherListener({}, ret => {
console.log(ret);
});
4. 开启摄像头预览
调用 startPreview 接口可以开启当前手机的摄像头预览。您需要为startPreview 接口提供一个用于显示视频画面的坐标和区域。
this.$refs.livePusher.startPreview({
rect: {
x: 0,
y: 0,
w: self.playerWidth,
h: self.playerHeight
}
}, ret => {
console.log(ret);
});
备注:
可以通过rect参数控制视频画面的大小和位置。
5. 启动和结束推流
如果已经通过 startPreview 接口启动了摄像头预览,就可以调用 startPush 接口开始推流。
var self = this;
this.$refs.livePusher.startPush({
rtmpUrl: 'rtmp://xxxxx.xxxx.xxx/xxxx'
}, ret => {
console.log(ret);
})
推流结束后,可以调用 stopPush 接口结束推流。请注意,如果已经启动了摄像头预览,请在结束推流时将其关闭,否则会导致 SDK 的表现异常。
this.$refs.livePusher.stopPreview({}, ret => {
console.log(ret);
});
this.$refs.livePusher.stopPush({}, ret => {
console.log(ret);
});
-
如何获取可用的推流 URL? 开通直播服务后,推流地址的生成步骤,可以联系我们技术支持微信 (微信号: ruanyunkeji006)。
-
返回 -5 的原因? 如果 startPush 接口返回 -5,则代表您的 License 校验失败了,请检查 第1步 “集成插件” 中的工作是否有问题。
6. 纯音频推流
如果您的直播场景是纯音频直播,不需要视频画面,那么您可以不执行 第4步 中的操作,取而代之的是开启 init 中的enablePureAudioPush配置。
this.$refs.livePusher.init({
// 是否纯音频推流
enablePureAudioPush: true,
...
}, ret => {
console.log(ret);
});
如果您启动纯音频推流,但是 rtmp、flv 、hls 格式的播放地址拉不到流,那是因为线路配置问题,请联系我们技术支持微信(微信号: ruanyunkeji006),联系我们帮忙修改配置。
7. 设定画面清晰度
调用 setVideoQuality 接口,可以设定观众端的画面清晰度。之所以说是观众端的画面清晰度,是因为主播看到的视频画面是未经编码压缩过的高清原画,不受设置的影响。而 setVideoQuality 通过设定视频编码器的编码质量,使观众端感受到画质的差异。详情请参考 设定画面质量。
8. 控制摄像头
RY-TencentLivePusher 提供了一组 API 用户控制摄像头的行为:
|函数|功能说明|备注说明| |switchCamera|切换前后摄像头|无| |toggleTorch|打开或关闭闪光灯|仅在当前是后置摄像头时有效| |setZoom|调整摄像头的焦距|焦距大小,取值范围:1-5,默认值建议设置为1即可| |setFocusPosition|设置手动对焦位置|需要将init()中的touchFocus选项设置为true后才能使用|
9. 观众端的镜像效果
调用 RY-TencentLivePusher 中的 setMirror 接口可以设置观众端的镜像效果。之所以说是观众端的镜像效果,是因为当主播在使用前置摄像头直播时,自己看到的画面会被 SDK 默认反转,这时主播的体验跟自己照镜子时的体验是保持一致的。setMirror 所影响的是观众端观看到的画面情况,如下图所示:
10. 横屏推流
大多数情况下,主播习惯以“竖屏持握”手机进行直播拍摄,观众端看到的也是竖屏分辨率的画面(例如 540 × 960 这样的分辨率);有时主播也会“横屏持握”手机,这时观众端期望能看到是横屏分辨率的画面(例如 960 × 540 这样的分辨率),如下图所示:
LivePusher 默认推出的是竖屏分辨率的视频画面,如果希望推出横屏分辨率的画面,需要:
- 设置 LivePusher 中的 homeOrientation 可以改变观众端看到的视频画面宽高比方向。
- 调用 LivePusher 中的 setRenderRotation 可以接口改变主播端的视频画面的渲染方向。
this.$refs.livePusher.init({
homeOrientation: 0,
...
}, ret => {
console.log(ret);
});
this.$refs.livePusher.setRenderRotation({
rotation: 1
}, ret => {
console.log(ret);
});
11. 隐私模式(垫片推流)
有时候主播的一些动作不希望被观众看到,但直播过程中又不能下播,那就可以考虑进入隐私模式。在隐私模式下,SDK 可以暂停采集主播手机的摄像头画面以及麦克风声音,并使用一张默认图片作为替代图像进行推流,也就是所谓的“垫片”。
该功能也常用于 App 被切到后台时:在 iOS 系统中,当 App 切到后台以后,操作系统不再允许该 App 继续采集摄像头画面。 此时就可以通过调用 pausePush 进入垫片状态。因为对于大多数直播 CDN 而言,如果超过一定时间(腾讯云目前为70s)不推视频数据,服务器就会断开当前的推流链接,所以在 App 切到后台后进入垫片模式是很有必要的。
- step1: 开启应用的 Background 模式
- step2: 设置 TXLivePushConfig 中的相关参数 在开始推流前,使用 init 中pause参数的pauseImg、pauseFps和pauseTime可以设置垫片推流的详细参数:
this.$refs.livePusher.init({
pauseImg: '/xxxx/xxx/xxx.png',
pauseFps: 10,
pauseTime: 300,
...
}, ret => {
console.log(ret);
});
12. 设置 Logo 水印
设置 LivePusher 中的 watermark 可以让 SDK 在推出的视频流中增加一个水印,水印位置位是由坐标选项决定。
- SDK 所要求的水印图片格式为 png 而不是 jpg,因为 png 这种图片格式有透明度信息,因而能够更好地处理锯齿等问题(将 jpg 图片在 Windows 下修改后缀名是不起作用的)。
- watermark 设置的是水印图片相对于推流分辨率的归一化坐标。假设推流分辨率为:540 × 960,该字段设置为:(0.1,0.1,0.1,0.0),那么水印的实际像素坐标为:(540 × 0.1,960 × 0.1,水印宽度 × 0.1,水印高度会被自动计算)。
this.$refs.livePusher.init({
watermark: {
img: '/xxxx/xxx/watermark.png',
x: 0,
y: 0,
w: 0.1
h: 0.1
}
...
}, ret => {
console.log(ret);
});
13.主播端弱网提示
手机连接 Wi-Fi 网络不一定就非常好,如果 Wi-Fi 信号差或者出口带宽很有限,可能网速不如4G,如果主播在推流时遇到网络很差的情况,需要有一个友好的提示,提示主播应当切换网络。
通过 setLivePusherListener 里的 onNetBusyWarn 事件,它代表当前主播的网络已经非常糟糕,出现此事件即代表观众端会出现卡顿。此时就可以像上图一样在 UI 上弹出一个“弱网提示”。
this.$refs.livePusher.setLivePusherListener({}, ret => {
if (ret.hasOwnProperty('eventType')) {
if ('onNetBusyWarn' == ret.eventType) {
// 弱网提示
console.log(ret);
}
}
});
14. 发送SEI消息
调用 sendMessageEx 接口可以发送 SEI 消息。所谓 SEI,是视频编码数据中规定的一种附加增强信息,平时一般不被使用,但我们可以在其中加入一些自定义消息,这些消息会被直播 CDN 转发到观众端。使用场景有:
- 答题直播:推流端将题目下发到观众端,可以做到“音-画-题”完美同步。
- 秀场直播:推流端将歌词下发到观众端,可以在播放端实时绘制出歌词特效,因而不受视频编码的降质影响。
- 在线教育:推流端将激光笔和涂鸦操作下发到观众端,可以在播放端实时地划圈划线。
由于自定义消息是直接被塞入视频数据中的,所以不能太大(几个字节比较合适),一般常用于塞入自定义的时间戳等信息。
this.$refs.livePusher.sendMessageEx({
msg: 'This is a sei message'
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
常规开源播放器或者网页播放器是不能解析 SEI 消息的,必须使用我们后文的 LivePlayer 才能解析这些消息:
- 初始化设置中的 enableMessage 选项为true。
- 当 LivePlayer 所播放的视频流中有 SEI 消息时,会通过setLivePlayerListener中的 onGetMessage 通知给您。
腾讯云直播播放器
该模块可以实现腾讯云直播拉流播放,支持画面调整、播放控制、消息接收、屏幕截图、截流录制等。
快速开始
步骤 1: 集成插件
插件名称: RY-TencentMLVB-LivePlayer
- 加载插件
-
使用 自定义基座 ,引入插件;
-
新建nvue文件,该插件必须在nvue中使用。在使用前,需要先加载插件。
<RY-TencentMLVB-LivePlayer ref="livePlayer" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentMLVB-LivePlayer>
说明:
可以通过修改width和height参数值的大小,来修改视频容器的大小。
- 腾讯云配置
步骤 2: 开始使用插件
使用 init 函数可以初始化插件,需要经过初始化之后,才可以使用各个函数接口功能。
this.$refs.livePlayer.init({
docPath: plus.io.convertLocalFileSystemURL('_doc')
}, ret => {
console.log(ret);
});
步骤 3: 设置监听
初始化后,可以通过使用 setLivePlayerListener 来设置监听,监听直播播放器的回调事件。
this.$refs.livePlayer.setLivePlayerListener({}, ret => {
console.log(ret);
});
步骤 4: 启动播放
通过 startPlay 函数可以开启直播播放。
this.$refs.livePlayer.startPlay({
flvUrl: 'http://2157.liveplay.myqcloud.com/live/2157_xxxx.flv',
rect: {
x: 0,
y: 0,
w: self.playerWidth,
h: self.playerHeight
}
}, ret => {
console.log(ret);
});
播放协议 | 含义 |
---|---|
rtmpUrl | 传入的 URL 为 RTMP 直播地址 |
flvUrl | 传入的 URL 为 FLV 直播地址 |
rtmpUrl | 低延迟链路地址(仅适合于连麦场景) |
hlsUrl | 传入的 URL 为 HLS(m3u8) 播放地址 |
关于 HLS(m3u8)
在 App 上我们不推荐使用 HLS 这种播放协议播放直播视频源(虽然它很适合用来做点播),因为延迟太高,在 App 上推荐使用 FLV 或者 RTMP 播放协议。
步骤 5: 画面调整
- 大小和位置
修改指定 startPlay 函数的rect参数,可以指定视图的位置和大小。可以通过调整
- 调用 setRenderMode 铺满 or 适应
可选值 | 含义 |
---|---|
0 | 将图像等比例铺满整个屏幕,多余部分裁剪掉,此模式下画面不会留黑边,但可能因为部分区域被裁剪而显示不全 |
1 | 将图像等比例缩放,适配最长边,缩放后的宽和高都不会超过显示区域,居中显示,画面可能会留有黑边 |
- 使用 setRenderRotation: 画面旋转
可选值 | 含义 |
---|---|
0 | 正常播放(Home 键在画面正下方) |
2 | 画面顺时针旋转270度(Home 键在画面正左方) |
步骤 6: 暂停播放
对于直播播放而言,并没有真正意义上的暂停,通过调用 pause,所谓的直播暂停,只是画面冻结和关闭声音,而云端的视频源还在不断地更新着,所以当您调用 resume 的时候,会从最新的时间点开始播放,这跟点播是有很大不同的(点播播放器的暂停和继续与播放本地视频文件时的表现相同)。
this.$refs.livePlayer.pause({}, ret => {
console.log(ret);
});
this.$refs.livePlayer.resume({}, ret => {
console.log(ret);
});
步骤 7: 结束播放
stopPlay 结束播放时,会自动销毁播放器视频窗口。
this.$refs.livePlayer.stopPlay({}, ret => {
console.log(ret);
});
步骤 8: 消息接收
此功能可以在推流端将一些自定义 message 随着音视频线路直接下发到观众端,适用场景例如: (1)冲顶大会:推流端将题目下发到观众端,可以做到“音-画-题”完美同步。 (2)秀场直播:推流端将歌词下发到观众端,可以在播放端实时绘制出歌词特效,因而不受视频编码的降质影响。 (3)在线教育:推流端将激光笔和涂鸦操作下发到观众端,可以在播放端实时地划圈划线。
通过下方方案可以使用这个功能:
- init 初始化传入 enableMessage 参数,并设置为true
- 通过 onGetMessageEvt 事件回调监听消息
this.$refs.livePlayer.setLivePlayerListener({}, ret => {
if (ret.hasOwnProperty('eventType')) {
if ('onGetMessageEvt' == ret.eventType) {
// 消息处理
console.log(ret.msg);
}
}
})
步骤 9: 屏幕截图
通过调用 snapshot 您可以截取当前直播画面为一帧屏幕,此功能只会截取当前直播流的视频画面,如果您需要截取当前的整个 UI 界面,请调用uniApp的API 来实现。
腾讯云连麦互动直播
该模块可以实现腾讯云连麦互动,支持主播创建新的直播间开播,观众进入直播间观看、主播和观众进行视频连麦互动、两个不同房间的主播 PK 互动,每一个直播间都有一个不限制房间人数的聊天室,支持发送各种文本消息和自定义消息,自定义消息可用于实现弹幕、点赞和礼物。
快速开始
步骤 1: 集成插件
- 加载插件
插件名称: RY-TencentMLVB-LiveRoom
-
使用 自定义基座 ,引入插件;
-
新建nvue文件,该插件必须在nvue中使用。在使用前,需要先加载插件。
<RY-RY-TencentMLVB-LiveRoom ref="liveRoom" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-RY-TencentMLVB-LiveRoom>
说明:
可以通过修改width和height参数值的大小,来修改视频容器的大小。
- 腾讯云配置
注册或登录腾讯云账号,并进行实名认证。
- 点击 直播服务,开通直播功能,已开通,则忽略;
- 点击 Licence管理,进入Licence页面;
- 点击 "创建测试Licence"按钮,弹出测试Licence配置界面;
- 在"基本信息"中,输入"App Name" => 应用名称,"Package Name" => Android包名(需要和自定义基座的Android包名一致),"Bundle Id" => iOS包名(与自定义基座iOS的Bundle Id一致);
- 在"选择功能模块中",选中"直播推流(RTMP推流+RTC推流)"。
- 创建成功后,您会获取 Licence,您会获得两个字符串:一个字符串是 licenseURL,另一个字符串是解密 key。
注意:
请使用测试Licence开发测试,如果您需要购买正式Licence(信息填写错误无法修改,也可能无法退款),建议先联系我们技术支持微信(微信号: ruanyunkeji006)。
- 进入【云直播控制台】>【直播SDK】>【应用管理】,单击【创建应用】。待应用创建完成后,记录其 sdkAppId 信息。
说明:
该操作的目的是创建一个即时通信 IM 应用,并将当前直播账号和该即时通信 IM 应用绑定起来。即时通信 IM 应用能为小直播 App 提供聊天室和连麦互动的能力。
步骤 2: 开始使用插件
首先调用 init 初始化推流组件。该对象可以指定一些高级配置参数,但一般情况下我们不建议您操作该对象,因为我们已经在其内部配置好了所有需要校调的参数。之后会自动再创建一个 LivePush 对象,该对象负责完成推流的主要工作。
this.$refs.liveRoom.init({
licence: self.licence
}, ret => {
console.log(ret);
});
步骤 3: 设置互动直播监听器
调用 setLiveRoomListener 设置互动直播监听器,用于返回直播过程中各个 回调事件 。
this.$refs.liveRoom.setLiveRoomListener({}, ret => {
console.log(ret);
});
步骤 4: 登录房间服务
LiveRoom 单靠一个终端的组件无法独自运行,它依赖一个后台服务为其实现房间管理和状态协调,这个后台服务我们称之为房间服务(RoomService)。而要使用这个房间服务,LiveRoom 就需要先进行登录(login)。
LiveRoom的 login 函数相关的参数:
参数 | 类型 | 填写方案 |
---|---|---|
sdkAppId | 整数类型 | 当前应用的 sdkAppId |
userId | 字符串 | 当前用户在您的帐号系统中的Id |
userName | 字符串 | 用户名(昵称) |
userAvatar | 字符串 | 用户头像的url地址 |
userSig | 字符串 | 登录签名 |
说明:
- 由于 login 是一个需要跟后台服务器通讯的过程,建议等待 login 函数的异步回调后再调用其他函数。
- 后台接口限制并发为每秒100次请求,若您有高并发请求请提前 联系我们 处理,避免影响服务调用。
步骤 5: 获取房间列表(非必需)
说明:
如果您希望使用自己的房间列表,该步骤可跳过,但需要您在 步骤 7 中自行指定 roomId。为避免房间号重复,建议使用主播的 userId 作为 roomId。
不管是主播还是观众都需要有一个房间列表,调用 LiveRoom 的 getRoomList 接口可以获得一个简单的房间列表:
- 当主播通过 createRoom 创建一个新房间时,房间列表中会相应地增加一条新的房间信息。
- 当主播通过 exitRoom 退出房间时,房间列表中会移除该房间。
列表中每个房间都有对应的 roomInfo,由主播通过 createRoom 创建房间时传入,为提高扩展性,建议将 roomInfo 定义为 JSON 格式。
步骤 6: 主播开播
主播开播前,需要先调用 LiveRoom 中的 startLocalPreview 接口开启本地摄像头预览,该函数需要传入视图对象的坐标和大小(rect参数)用于显示摄像头的视频影像,这期间 LiveRoom 会申请摄像头使用权限。同时,主播也可以对着摄像头调整美颜和美白的具体效果。 然后调用 createRoom 接口,LiveRoom 会在后台的房间列表中新建一个直播间,同时主播端会进入直播状态。
说明:
为避免房间号重复,建议使用主播的 userId 作为 roomId。如果您不手动设置 roomId,后台将会自动为您分配一个 roomId。 如果您想要管理房间列表,可以先由您的服务器确定 roomId,再通过 createRoom、enterRoom 和 exitRoom 接口使用 LiveRoom 的连麦能力。
步骤 7: 观看直播
观众通过 LiveRoom 中的 enterRoom 接口可以进入直播间观看视频直播,enterRoom 函数需要通过rect参数传入视图对象坐标和大小用于显示直播流的视频影像。
进入房间后,通过调用 getAudienceList 接口可以获取观众列表。如果少于30名观众,列表会展示全部观众信息。如果多于30名观众,列表仅展示新进入房间的30名观众的信息。
步骤 8: 弹幕消息
LiveRoom 包装了 IM 的消息发送接口,您可以通过 sendRoomTextMsg 函数发送普通的文本消息(用于弹幕),也可以通过 sendRoomCustomMsg 发送自定义消息(用于点赞,送花等等)。
注意:
腾讯云 IM 的直播聊天室,每秒钟最多可以收取40条的消息。如果您以高于40条/次的速度刷新 UI 上的弹幕界面,很容易导致 CPU 100%,请注意控制刷新频率,避免高频刷新。
步骤 9: 观众与主播连麦
步骤 | 角色 | 详情 |
---|---|---|
第一步 | 观众 | 观众调用 setLinkMicListener 设置连麦监听器,并调用 requestJoinAnchor 向主播发起连麦请求。 |
第二步 | 主播 | 主播会收到 setLiveRoomListener监听器 onRequestJoinAnchor 通知,之后可以展示一个 UI 提示,询问主播要不要接受连麦。 |
第三步 | 主播 | 主播调用 responseJoinAnchor 确定是否接受观众的连麦请求。 |
第四步 | 观众 | 观众在setLinkMicListener连麦监听器里接收回调通知,得知请求是否被同意。 |
第五步 | 观众 | 观众如果请求被同意,则调用 startLocalPreview 开启本地摄像头,如果 App 还没有取得摄像头和麦克风权限,会触发 UI 提示用户授权摄像头和麦克风的使用权限。 |
第六步 | 观众 | 观众调用 joinAnchor 正式进入连麦状态。 |
第七步 | 主播 | 当观众进入连麦状态后,主播就会收到 setLiveRoomListener互动直播监听器的 onAnchorEnter 通知。 |
第八步 | 主播 | 主播调用 startRemoteView 就可以看到连麦观众的视频画面。 |
第九步 | 观众 | 如果直播间里已经有其他观众正在跟主播进行连麦,那么新加入的这位连麦观众也会收到 onAnchorJoin 通知,用于展示 startRemoteView 其他连麦者的视频画面。 |
第九步 | 主播或观众 | 主播或观众随时都可以通过 quitJoinAnchor 接口退出连麦状态,同时,主播还可以通过 kickoutJoinAnchor 接口移除连麦观众。 |
说明:
LiveRoom 在设计上最多支持10人同时连麦,但出于兼容低端 Android 终端和实际体验效果的考虑,建议将同时连麦人数控制在6人以下。
步骤 10: 主播间跨房间 PK
主播间跨房 PK 常被用于活跃直播平台的氛围,提升打赏频率,对平台的主播人数有一定要求。目前常见的主播 PK 方式是将所有愿意 PK 的主播“圈”在一起,再后台进行随机配对,每次 PK 都有一定时间要求,例如5分钟,超过后即结束 PK 状态。 由于我们暂时未在 RY-TencentLiveRoom 的房间服务里加入配对逻辑,因此目前仅提供了基于客户端 API 接口的简单 PK 流程,您可以通过即时通信 IM 服务的消息下发 REST API 接口,由您的配对服务器,将配对开始、配对结束等指令发送给指定的主播,从而实现服务器控制的目的。如果采用此种控制方式,下述步骤中的第三步实现为默认接受即可。
步骤 | 角色 | 详情 |
---|---|---|
第一步 | 主播 A | 主播 A 调用 setRoomPKListener 设置主播PK监听器,并调用 requestRoomPK 向主播 B 发起连麦请求。 |
第二步 | 主播 B | 主播 B 会收到 setLiveRoomListener监听器 onRequestRoomPK(AnchorInfo) 回调通知。 |
第三步 | 主播 B | 主播 B 调用 responseRoomPK 确定是否接受主播 A 的 PK 请求。如果采用服务器配对的 PK 方案,此处可以默认接受,不需要由主播 B 来决策。 |
第四步 | 主播 B | 主播 B 在接受主播 A 的请求后,即可调用 startRemoteView 来显示主播 A 的视频画面。 |
第五步 | 主播 A | 主播 A 会收到setRoomPKListener主播PK监听器的回调通知,可以得知请求是否被同意,如果请求被同意,则可以调用 startRemoteView 显示主播 B 的视频画面。 |
第六步 | 主播 A或 B | 主播 A 或 B 均可以通过调用 quitRoomPK 接口结束 PK 状态。 |
腾讯云点播播放器
该播放器可以支持云点播播放,可以支持画面设置、播放控制、屏幕截图、变速播放、本地缓存、预加载、贴片广告、加密播放、HTTP-REF、硬件加速和多码率支持等。
快速开始
步骤 1: 集成插件
插件名称: RY-TencentMLVB-VodPlayer
- 加载插件
-
使用 自定义基座 ,引入插件;
-
新建nvue文件,该插件必须在nvue中使用。在使用前,需要先加载插件。
<RY-TencentMLVB-VodPlayer ref="vodPlayer" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentMLVB-VodPlayer>
说明:
可以通过修改width和height参数值的大小,来修改视频容器的大小。
- 开通云点播
步骤 2: 开始使用插件
插件在使用前,必须使用 init 进行初始化。
this.$refs.vodPlayer.init({
docPath: plus.io.convertLocalFileSystemURL('_doc'),
}, ret => {
console.log(ret);
});
步骤 3: 设置监听
通过 setVodPlayerListener 来设置播放器的监听,播放器会返回事件回调。
this.$refs.livePlayer.setVodPlayerListener({}, ret => {
console.log(ret);
});
步骤 4: 启动播放
vodPlayer支持通过url播放,使用 startPlay 函数来直播播放即可。
this.$refs.vodPlayer.startPlay({
rect: {
x: 0,
y: 0,
w: self.playerWidth,
h: self.playerHeight
},
url: self.url
}, ret => {
console.log(ret);
});
步骤 5: 画面调整
-
view:大小和位置
如需修改画面的大小及位置,直接调整 VodPlayer 的大小和位置,SDK 会让视频画面跟着您的 view 的大小和位置进行实时的调整。
-
setRenderMode:铺满或适应
this.$refs.vodPlayer.setRenderMode({
mode: self.renderMode
}, ret => {
console.log(ret);
});
可选值 | 含义 |
---|---|
0 | 将图像等比例铺满整个屏幕,多余部分裁剪掉,此模式下画面不会留黑边,但可能因为部分区域被裁剪而显示不全。 |
1 | 将图像等比例缩放,适配最长边,缩放后的宽和高都不会超过显示区域,居中显示,画面可能会留有黑边。 |
- setRenderRotation:画面旋转
this.$refs.vodPlayer.setRenderRotation({
rotation: 0
}, ret => {
console.log(ret);
});
可选值 | 含义 |
---|---|
0 | home 在下面 |
1 | home 在左边 |
2 | home 在上面 |
3 | home 在右边 |
步骤 6: 播放控制
使用 seek 调整播放进度。
this.$refs.vodPlayer.seek({
value: 100
}, ret => {
console.log(ret);
});
pause 可以暂停播放。
this.$refs.vodPlayer.pause({}, ret => {
console.log(ret);
});
resume 可以恢复播放。
this.$refs.vodPlayer.resume({}, ret => {
console.log(ret);
});
步骤 7: 结束播放
结束播放时,可以调用 stopPlay 函数。
this.$refs.vodPlayer.stopPlay({}, ret => {
console.log(ret);
});
步骤 8: 屏幕截图
通过调用 snapshot 您可以截取当前视频为一帧画面,此功能只会截取当前直播流的视频画面,如果您需要截取当前的整个 UI 界面,请调用 iOS 的系统 API 来实现。
this.$refs.vodPlayer.snapshot({}, ret => {
console.log(ret);
});
步骤 9: 变速播放
点播播放器支持变速播放,通过接口 setRate 设置点播播放速率来完成,支持快速与慢速播放,如0.5X、1.0X、1.2X、2X等。
this.$refs.vodPlayer.setRate({
rate: self.rate
}, ret => {
console.log(ret);
});
步骤 10: 本地缓存 [UGC 版本暂不支持]
在短视频播放场景中,视频文件的本地缓存是很刚需的一个特性,对于普通用户而言,一个已经看过的视频再次观看时,不应该再消耗一次流量。
-
格式支持 SDK 支持 HLS(m3u8)和 MP4 两种常见点播格式的缓存功能。
-
何时开启? SDK 并不默认开启缓存功能,对于用户回看率不高的场景,也并不推荐您开启此功能。
-
如何开启? 开启此功能需要配置两个参数:本地缓存目录及需要缓存的视频个数。
this.$refs.vodPlayer.init({
cacheFolderPath: self.cacheFolderPath,
maxCacheItems: self.maxCacheItems,
docPath: plus.io.convertLocalFileSystemURL('_doc'),
}, ret => {
console.log(ret);
});
步骤 11: 预加载
在短视频播放场景中,预加载功能对于流畅的观看体验很有帮助:在观看当前视频的同时,在后台加载即将要播放的下一个视频 URL,这样一来,当用户真正切换到下一个视频时,已经不需要从头开始加载了,而是可以做到立刻播放。
这就是视频播放中无缝切换的背后技术支撑,您可以使用 RY-TencentVodPlayer 的 setAutoPlay 中的 isAutoPlay 开关来实现这个功能,具体做法如下:
var url_A = @"http://1252463788.vod2.myqcloud.com/xxxxx/v.f10.mp4";
this.$refs.player_A.setAutoPlay({
isAutoPlay: true
}, ret => {
console.log(ret);
});
this.$refs.player_A.start({
url: url_A
}, ret => {
console.log(ret);
});
var url_B = @"http://1252463788.vod2.myqcloud.com/xxxxx/v.f20.mp4"
this.$refs.player_B.setAutoPlay({
isAutoPlay: false
}, ret => {
console.log(ret);
});
this.$refs.player_B.start({
url: url_B
}, ret => {
console.log(ret);
});
等到视频 A 播放结束,自动(或者用户手动切换到)视频 B 时,调用 resume 函数即可实现立刻播放。
if (eventType == 'onPlayEnd') {
this.$refs.player_A.stop({}, ret => {
console.log(ret);
});
this.$refs.player_B.resume({}, ret => {
console.log(ret);
});
}
步骤 12: 贴片广告
setAutoPlay 还可以用来做贴片广告功能,由于设置了 setAutoPlay 为 false 之后,播放器会立刻加载但又不会立刻播放,因此可以在此时展示贴片广告,等广告播放结束,在使用 resume 函数立即开始视频的播放。
步骤 13: 加密播放 [UGC 版本暂不支持]
视频加密方案主要用于在线教育等需要对视频版权进行保护的场景。如果要对您的视频资源进行加密保护,就不仅仅需要在播放器上做改造,还需要对视频源本身进行加密转码,亦需要您的后台和终端研发工程师都参与其中。联系我们获取 视频加密解决方案 中您会了解到全部细节内容。
目前 RY-TencentVodPlayer 也是支持加密播放的,您可以使用通过 URL 携带身份认证信息的方案,该种方案下 SDK 的调用方式跟普通情况没有什么区别。 您也可以使用 Cookie 携带身份认证信息的方案,该种方案下,需要您通过 VodPlayer init中的 headers 字段设置 cookie 信息于 HTTP 请求头中。
步骤 14: HTTP-REF [UGC 版本暂不支持]
headers 可以用来设置 HTTP 请求头,例如常用的防止 URL 被到处拷贝的 Referer 字段(腾讯云可以提供更加安全的签名防盗链方案),以及用于验证客户端身份信息的 Cookie 字段。
this.$refs.vodPlayer.init({
headers: {
...
},
docPath: plus.io.convertLocalFileSystemURL('_doc'),
}, ret => {
console.log(ret);
});
步骤 15: 硬件加速
对于蓝光级别(1080p)的画质,简单采用软件解码的方式很难获得较为流畅的播放体验,所以如果您的场景是以游戏直播为主,一般都推荐开启硬件加速。
软解和硬解的切换需要在切换之前先 stopPlay,使用 setEnableHWAcceleration 切换之后再 startPlay,否则会产生比较严重的花屏问题。
this.$refs.vodPlayer.stopPlay({}, ret => {
console.log(ret);
});
this.$refs.vodPlayer.setEnableHWAcceleration({
isHwAcc: true
}, ret => {
console.log(ret);
});
步骤 16: 多码率文件 [UGC 版本暂不支持]
SDK 支持 hls 的多码率格式,方便用户切换不同码率的播放流。在收到 onPlayBeginEvt 事件后,可以通过下面 getSupportedBitrates 方法获取多码率数组
this.$refs.vodPlayer.getSupportedBitrates({}, ret => {
console.log(ret);
});
在播放过程中,可以随时通过 setBitrateIndex 切换码率。切换过程中,会重新拉取另一条流的数据,因此会有稍许卡顿。SDK 针对腾讯云的多码率文件做过优化,可以做到切换无卡顿。
进度展示
点播进度分为两个指标:加载进度和播放进度,目前是以事件通知的方式将这两个进度实时通知出来的。
您可以为RY-TencentVodPlayer对象绑定一个 setVodPlayerListener 监听器,进度通知会通过 onPlayProgress 事件回调到您的应用程序,该事件的附加信息中即包含上述两个进度指标。
if (eventType == 'onPlayProgress') {
var playable = ret.playable;
var progress = ret.progress;
}
腾讯云点播下载
点播离线播放是一个非常普遍的需求,用户可以在有网络的地方先下载好视频,等到了无网络的环境可以再次观看。SDK 提供了播放本地文件的能力,但仅限于 mp4 和 flv 这种单一文件格式,HLS 流媒体因为无法保存到本地,所以不能本地播放。现在,您可以通过 RY-TencentVodPlayer-Downlader 将 HLS 下载到本地,以实现离线播放 HLS 的能力。
快速开始
step 1: 开始使用插件
- 加载插件
插件名称: RY-TencentMLVB-VodDownloader
插件是使用Module方式实现,需要使用以下方法加载
var vodDownloader = uni.requireNativePlugin("RY-TencentMLVB-VodDownloader");
- 初始化
需要先调用 init 函数,初始化插件,才能调用其他函数和功能。
vodDownloader.init({
docPath: plus.io.convertLocalFileSystemURL('_doc')
}, ret => {
console.log(ret);
});
step 2: 下载设置
通过 setDownloadListenr 函数,可以返回下载的事件回调。
vodDownloader.setDownloadListener({}, ret => {
console.log(ret);
});
在开始下载前,还需要通过 setDownloadPath 来设置下载的目录
vodDownloader.setDownloadPath({
path: 'vodDownloader'
}, ret => {
console.log(ret);
});
step 3: 开始下载
url 方式非常简单,只需要调用 startDownloadUrl 传入下载地址即可
vodDownloader.startDownloadUrl({
url: 'http://140xxx95.vod2.myqcloud.com/d64fa630vodtxxx24344/v.f1xxxx20.m3u8'
}, ret => {
console.log(ret);
});
step 4: 任务信息
在开始下载后,设置的监听函数里可能收到的任务的 事件回调 有:
回调信息 | 含义 |
---|---|
onDownloadStart | 任务开始,表示已经开始下载 |
onDownloadProgress | 任务进度,下载过程中,会频繁回调此接口,您可以在这里更新进度显示 |
onDownloadStop | 任务停止,当您调用是stopDownload停止下载,收到此消息表示停止成功 |
onDownloadFinish | 下载完成,收到此回调表示已全部下载。此时下载文件可以给 RY-TencentVodPlayer 播放 |
onDownloadError | 下载错误,下载过程中遇到网络断开会回调此接口,同时下载任务停止 |
由于 RY-TencentVodPlayer-Downloader 可以同时下载多个任务,所以回调接口里带上了 mediaInfo 对象,您可以访问 url 或 dataSource 判断下载源,同时还可以获取到下载进度、文件大小等信息。
step 5: 中断下载
停止下载请调用 stopDownload 方法,参数为 sartDownloadUrl 返回对象的mediaKey。SDK 支持断点续传,当下载目录没有发生改变时,下次下载同一个文件时会从上次停止的地方重新开始。
如果您不需要重新下载,请调用 deleteDownloadFile 方法删除文件,以释放存储空间。
更多功能
- 聊天、弹幕、点赞、打赏、送礼等
- 基础美颜
- 背景音乐
扫码添加, 获取技术支持:
微信号: ruanyunkeji006