更新记录

5.0.1(2022-04-14)

  1. 修复iOS打包库冲突bug;

5.0.0(2022-03-11)

  1. 升级uniapp基础库至3.3.10;

4.1.0(2021-12-20)

  1. 修复iOS和Android部分接口不一致bug;
查看更多

平台兼容性

Android Android CPU类型 iOS
适用版本区间:4.4 - 11.0 armeabi-v7a:未测试,arm64-v8a:未测试,x86:未测试 适用版本区间:9 - 14

原生插件通用使用流程:

  1. 购买插件,选择该插件绑定的项目。
  2. 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
  4. 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
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 联系我们
Android示例代码 iOS示例代码 技术支持

扫码添加技术支持(微信号: ruanyunkeji006),开通测试账号。

技术支持

建议扫码添加我们技术支持,协助接入和测试。

联系我们 微信号 更多功能
联系我们
ruanyunkeji006

基础美颜
背景音乐
聊天、弹幕、送礼等

API 接口文档

使用教程

快速开始

1: 集成插件

  • 加载插件

插件名称: RY-TencentMLVB-LivePusher

  1. 使用 自定义基座 ,引入插件;

  2. 新建nvue文件,该插件必须在nvue中使用。在使用前,需要先加载插件。

<RY-TencentMLVB-LivePusher ref="livePusher" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentMLVB-LivePusher>

说明:

可以通过修改width和height参数值的大小,来修改视频容器的大小。

  • 腾讯云配置

注册或登录腾讯云账号,并进行实名认证。

  1. 点击 直播服务,开通直播功能,已开通,则忽略;
  2. 点击 Licence管理,进入Licence页面;
  3. 点击 "创建测试Licence"按钮,弹出测试Licence配置界面;
  4. 在"基本信息"中,输入"App Name" => 应用名称,"Package Name" => Android包名(需要和自定义基座的Android包名一致),"Bundle Id" => iOS包名(与自定义基座iOS的Bundle Id一致);
  5. 在"选择功能模块中",选中"直播推流(RTMP推流+RTC推流)"。
  6. 创建成功后,您会获取 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 默认推出的是竖屏分辨率的视频画面,如果希望推出横屏分辨率的画面,需要:

  1. 设置 LivePusher 中的 homeOrientation 可以改变观众端看到的视频画面宽高比方向。
  2. 调用 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 转发到观众端。使用场景有:

  1. 答题直播:推流端将题目下发到观众端,可以做到“音-画-题”完美同步。
  2. 秀场直播:推流端将歌词下发到观众端,可以在播放端实时绘制出歌词特效,因而不受视频编码的降质影响。
  3. 在线教育:推流端将激光笔和涂鸦操作下发到观众端,可以在播放端实时地划圈划线。

由于自定义消息是直接被塞入视频数据中的,所以不能太大(几个字节比较合适),一般常用于塞入自定义的时间戳等信息。

this.$refs.livePusher.sendMessageEx({
    msg: 'This is a sei message'
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

常规开源播放器或者网页播放器是不能解析 SEI 消息的,必须使用我们后文的 LivePlayer 才能解析这些消息:

  1. 初始化设置中的 enableMessage 选项为true。
  2. 当 LivePlayer 所播放的视频流中有 SEI 消息时,会通过setLivePlayerListener中的 onGetMessage 通知给您。

腾讯云直播播放器

该模块可以实现腾讯云直播拉流播放,支持画面调整、播放控制、消息接收、屏幕截图、截流录制等。

快速开始

步骤 1: 集成插件

插件名称: RY-TencentMLVB-LivePlayer

  • 加载插件
  1. 使用 自定义基座 ,引入插件;

  2. 新建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参数,可以指定视图的位置和大小。可以通过调整标签的width和height来指定播放容器的大小。

可选值 含义
0 将图像等比例铺满整个屏幕,多余部分裁剪掉,此模式下画面不会留黑边,但可能因为部分区域被裁剪而显示不全
1 将图像等比例缩放,适配最长边,缩放后的宽和高都不会超过显示区域,居中显示,画面可能会留有黑边
可选值 含义
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

  1. 使用 自定义基座 ,引入插件;

  2. 新建nvue文件,该插件必须在nvue中使用。在使用前,需要先加载插件。

<RY-RY-TencentMLVB-LiveRoom ref="liveRoom" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-RY-TencentMLVB-LiveRoom>

说明:

可以通过修改width和height参数值的大小,来修改视频容器的大小。

  • 腾讯云配置

注册或登录腾讯云账号,并进行实名认证。

  1. 点击 直播服务,开通直播功能,已开通,则忽略;
  2. 点击 Licence管理,进入Licence页面;
  3. 点击 "创建测试Licence"按钮,弹出测试Licence配置界面;
  4. 在"基本信息"中,输入"App Name" => 应用名称,"Package Name" => Android包名(需要和自定义基座的Android包名一致),"Bundle Id" => iOS包名(与自定义基座iOS的Bundle Id一致);
  5. 在"选择功能模块中",选中"直播推流(RTMP推流+RTC推流)"。
  6. 创建成功后,您会获取 Licence,您会获得两个字符串:一个字符串是 licenseURL,另一个字符串是解密 key。

注意:

请使用测试Licence开发测试,如果您需要购买正式Licence(信息填写错误无法修改,也可能无法退款),建议先联系我们技术支持微信(微信号: ruanyunkeji006)。

  1. 进入【云直播控制台】>【直播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

  • 加载插件
  1. 使用 自定义基座 ,引入插件;

  2. 新建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 将图像等比例缩放,适配最长边,缩放后的宽和高都不会超过显示区域,居中显示,画面可能会留有黑边。
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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

Android: "android.permission.INTERNET", "android.permission.ACCESS_NETWORK_STATE", "android.permission.ACCESS_WIFI_STATE", "android.permission.SYSTEM_ALERT_WINDOW", "android.permission.WRITE_EXTERNAL_STORAGE", "android.permission.READ_EXTERNAL_STORAGE", "android.permission.RECORD_AUDIO", "android.permission.MODIFY_AUDIO_SETTINGS", "android.permission.BLUETOOTH", "android.permission.CAMERA", "android.permission.READ_PHONE_STATE", "android.hardware.Camera", "android.hardware.camera.autofocus" iOS: 无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件使用腾讯云移动直播SDK,详情可参考: https://cloud.tencent.com/product/mlvb

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问