更新记录

4.2.0（2024-03-02）

1. 新增屏幕控制功能接口(内测);
2. 升级基础库;

4.1.3（2024-01-06）

1. 修复部分接口无法引用bug(内测);

4.1.2（2024-01-03）

1. 新增背景音乐预加载以及音轨支持(内测);

平台兼容性

原生插件通用使用流程：

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原生插件配置”->”云端插件“列表中删除该插件重新选择

腾讯云移动直播Pro

腾讯云直播推流器

采集手机摄像头的画面以及麦克风的声音，进行编码之后再推送到直播云平台上。

腾讯云直播播放器

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

技术支持

建议扫码添加我们技术支持，协助接入和开发。

联系我们	微信号	更多功能
	ruanyunkeji006	基础美颜 背景音乐 聊天、弹幕、点赞、打赏、送礼等

快速开始

步骤 1: 加载插件

插件名称: RY-TencentMLVBPro-V2Live

新建nvue文件，注意该模块必须在nvue中使用。

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

备注:

通过修改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: 初始化推流组件

• 首先 initPusher 初始化推流并给SDK授权。该步骤可以指定一些高级配置参数，但一般情况下我们不建议您操作该对象，因为我们已经在其内部配置好了所有需要校调的参数。

this.$refs.livePusher.initPusher({
    licence: {
        url: 'http://license.vod2.myqcloud.com/license/v1/e50xxxe680/TXLiveSDK.licence',
        key: '3d436208xxxxd7f92871'
    },
    docPath: plus.io.convertLocalFileSystemURL('_doc')
}, ret => {
    console.log(ret);
});

步骤 3: 设置推流监听器

设置 setLivePusherListener 推流监听，会返回推流中各个 事件回调。

this.$refs.livePusher.setLivePusherListener({}, ret => {
    console.log(ret);
});

步骤 4: 开启摄像头预览

调用 startCamera 接口开启当前手机摄像头的预览。

this.$refs.livePusher.startCamera({
    rect: {
        x: 0, 
        y: 0, 
        w: self.playerWidth,
        h: self.playerHeight
    }
}, ret => {
    console.log(ret);
});

步骤 5: 启动和结束推流

如果已经通过 startCamera 接口启动了摄像头预览，就可以调用 V2LivePusher 中的 startPush 接口开始推流。推流地址可以使用 TRTC 地址 ，或者使用 RTMP 地址 ，前者使用 UDP 协议，推流质量更高，并支持连麦互动。

// 启动推流, URL可以使用 trtc:// 或者 rtmp:// 两种协议，前者支持连麦功能
// 支持连麦
var url = "trtc://cloud.tencent.com/push/streamid?sdkappid=1400188888&userId=A&usersig=xxxxx";  
// 不支持连麦，直接推流到直播 CDN
var url = "rtmp://test.com/live/streamid?txSecret=xxxxx&txTime=xxxxxxxx";

this.$refs.livePusher.startPush({
    url: url
}, ret => {
    console.log(ret);
})

推流结束后，可以调用 V2LivePusher 中的 stopPush 接口结束推流。

this.$refs.livePusher.stopPush({}, ret => {
    console.log(ret);
});

注意：

如果已经启动了摄像头预览，请在结束推流时将其关闭。

• 如何获取可用的推流 URL？

  开通直播服务后，可以使用【直播控制台】>【辅助工具】> 地址生成器 生成推流地址，详细信息请参见 推拉流URL。

• 返回 -5 的原因？

  如果 startPush 接口返回 -5，则代表您的 License 校验失败了，请检查 第2步“给 SDK 配置 License 授权” 中的工作是否有问题。

步骤 6: 纯音频推流

如果您的直播场景是纯音频直播，不需要视频画面，那么您可以不执行 第4步 中的操作，或者在调用 startPush 之前不调用 startCamera 接口即可。

this.$refs.livePusher.init({
    ...
}, ret => {
    console.log(ret);
});

this.$refs.livePusher.startPush({
    url: url
}, ret => {
    console.log(ret);
});

this.$refs.livePusher.startMicrophone({}, ret => {
    console.log(ret);
});

说明：

如果您启动纯音频推流，但是 RTMP、FLV 、HLS 格式的播放地址拉不到流，那是因为线路配置问题，请 提工单 联系我们帮忙修改配置。

步骤 7: 设定画面清晰度

调用 V2LivePusher 中的 setVideoQuality 接口，可以设定观众端的画面清晰度。之所以说是观众端的画面清晰度，是因为主播看到的视频画面是未经编码压缩过的高清原画，不受设置的影响。而 setVideoQuality 设定的视频编码器的编码质量，观众端可以感受到画质的差异。详情请参见 设定画面质量。

步骤 8: 设备管理

RY-V2TencentLivePusher 提供了一组 API 用户控制设备的行为，您可通过设备管理接口进一步进行设备管理，详细用法请参见 设备管理接口。

步骤 9: 观众端的镜像效果

通过调用 V2LivePusher 的 setRenderMirror 可以改变摄像头的镜像方式，继而影响观众端观看到的镜像效果。之所以说是观众端的镜像效果，是因为当主播在使用前置摄像头直播时，默认情况下自己看到的画面会被 SDK 反转。

步骤 10: 横屏推流

大多数情况下，主播习惯以“竖屏持握”手机进行直播拍摄，观众端看到的也是竖屏分辨率的画面（例如 540 × 960 这样的分辨率）；有时主播也会“横屏持握”手机，这时观众端期望能看到是横屏分辨率的画面（例如 960 × 540 这样的分辨率），如下图所示：

V2LivePusher 默认推出的是竖屏分辨率的视频画面，如果希望推出横屏分辨率的画面，可以修改 setVideoQuality 接口的参数来设定观众端的画面横竖屏模式。

this.$refs.livePusher.setVideoQuality({
    resolutionMode: 1
    ...
}, ret => {
    console.log(ret);
});

步骤 11: 设置 Logo 水印

设置 V2LivePusher 中的 setWatermark 可以让 SDK 在推出的视频流中增加一个水印，水印位置位是由传入参数 (x, y, scale) 所决定。

• SDK 所要求的水印图片格式为 PNG 而不是 JPG，因为 PNG 这种图片格式有透明度信息，因而能够更好地处理锯齿等问题（将 JPG 图片修改后缀名是不起作用的）。
• (x, y, scale) 参数设置的是水印图片相对于推流分辨率的归一化坐标。假设推流分辨率为：540 × 960，该字段设置为：（0.1，0.1，0.1），那么水印的实际像素坐标为：（540 × 0.1，960 × 0.1，水印宽度 × 0.1，水印高度会被自动计算）。

this.$refs.livePusher.setWaterMark({
    img: '/path/to/watermark.png',
    x: 0.03, 
    y: 0.015, 
    scale: 1
}, ret => {
    console.log(ret);
});

步骤 12: 主播端弱网提醒

手机连接 Wi-Fi 网络不一定就非常好，如果 Wi-Fi 信号差或者出口带宽很有限，可能网速不如4G，如果主播在推流时遇到网络很差的情况，需要有一个友好的提示，提示主播应当切换网络。

通过 setLivePusherListener 里的 onWarning 可以捕获 onNetworkBusyWarn 事件，它代表当前主播的网络已经非常糟糕，出现此事件即代表观众端会出现卡顿。此时就可以像上图一样在 UI 上弹出一个“弱网提示”。

this.$refs.setLivePusherListener({}, ret => {
    if ('onWarning' == ret.eventType) {
        // todo
        if (ret.code == ) {
            console.log('您当前的网络环境不佳，请尽快更换网络保证正常直播')
        }
    }
})

快速开始

步骤 1: 加载插件

插件名称: RY-TencentMLVBPro-V2Live

新建nvue文件，注意该模块必须在nvue中使用。

<RY-TencentMLVBPro-V2Live ref="livePlayer" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentMLVBPro-V2Live>

备注: 通过修改width和height的参数值，可以修改视图容器的大小。

• 腾讯云配置

注册或登录腾讯云账号，并开通云直播服务

步骤2: 初始化推流组件

首先调用 initPlayer 初始化，该步骤可以指定一些高级配置参数，但一般情况下我们不建议您操作该对象，因为我们已经在其内部配置好了所有需要校调的参数。

this.$refs.livePlayer.initPlayer({
    licence: {
        url: 'http://license.vod2.myqcloud.com/license/v1/e50xxxe680/TXLiveSDK.licence',
        key: '3d436208xxxxd7f92871'
    },
    docPath: plus.io.convertLocalFileSystemURL('_doc')
}, ret => {
    console.log(ret);
});

步骤3: 设置拉流监听器

然后 setLivePlayerListener 设置推流监听，会返回推流中各个 事件回调。

this.$refs.livePlayer.setLivePlayerListener({}, ret => {
    console.log(ret);
});

步骤 4: 启动播放

调用 startPlay 接口开启当前手机摄像头的预览。

this.$refs.livePusher.startPlay({
    rect: {
        x: 0, 
        y: 0, 
        w: self.playerWidth,
        h: self.playerHeight
    },
    url: "http://2157.liveplay.myqcloud.com/live/2157_xxxx.flv"
}, ret => {
    console.log(ret);
});

步骤 5: 画面调整

• setRenderFillMode：铺满 or 适应

• setRenderRotation：视频画面顺时针旋转角度

步骤 6: 暂停播放

对于直播播放而言，并没有真正意义上的暂停，所谓的直播暂停，只是画面冻结和关闭声音，而云端的视频源还在不断地更新着，所以当您调用 resume 的时候，会从最新的时间点开始播放，这是和点播对比的最大不同点（点播播放器的暂停和继续与播放本地视频文件时的表现相同）。

// 暂停
this.$refs.livePlayer.pausePlayerAudio({}, ret => {
    console.log(ret);
});
this.$refs.livePlayer.pausePlayerVideo({}, ret => {
    console.log(ret);
});
// 恢复
this.$refs.livePlayer.resumePlayerAudio({}, ret => {
    console.log(ret);
});
this.$refs.livePlayer.resumePlayerVideo({}, ret => {
    console.log(ret);
});

步骤 7: 结束播放

this.$refs.livePlayer.stopPlay({}, ret => {
    console.log(ret);
});

步骤 8: 屏幕截图

通过调用 snapshot 您可以截取当前直播画面为一帧屏幕通过 setLivePlayerListener 的 onSnapshotComplete 回调截屏图片，此功能只会截取当前直播流的视频画面，如果您需要截取当前的整个 UI 界面，请调用 iOS 的系统 API 来实现。

this.$refs.livePlayer.setLivePlayerLitener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        if ('onSnapshotComplete' == ret.eventType) {
            if (ret.hasOwnproperty('image')) {
                // 处理截图
            }
        }
    }
});

this.$refs.livePlayer.snapshot({}, ret => {
    console.log(ret);
});

延时调节

腾讯云 SDK 的直播播放功能，并非基于 ffmpeg 做二次开发， 而是采用了自研的播放引擎，所以相比于开源播放器，在直播的延迟控制方面有更好的表现，我们提供了三种延迟调节模式，分别适用于：秀场，游戏以及混合场景。

• 三种模式的特性对比

• 三种模式的对接代码

// 自动模式
this.$refs.livePlayer.setCacheParams({
    minTime: 1, 
    maxTime: 5
}, ret => {
    console.log(ret);
});
// 极速模式
this.$refs.livePlayer.setCacheParams({
    minTime: 1, 
    maxTime: 1
}, ret => {
    console.log(ret);
});
// 流畅模式
this.$refs.livePlayer.setCacheParams({
    minTime: 5, 
    maxTime: 5
}, ret => {
    console.log(ret);
});

// 设置完成之后再启动播放

更多功能

• 基础美颜
• 背景音乐
• 聊天、弹幕、点赞、送礼、打赏等

扫码添加, 获取技术支持:

微信号: ruanyunkeji006