更新记录

3.1.0(2021-04-12)

  1. 修复rtmp和hls协议无法播放问题;
  2. 修复截屏问题;

3.0.0(2021-04-07)

  1. 增加直播时, 自动屏幕常亮;
  2. (内测)增加调整界面大小接口;
  3. 升级底层SDK至8.5版本
查看更多

平台兼容性

Android iOS
适用版本区间:4.4 - 11.0 适用版本区间: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原生插件配置”->”云端插件“列表中删除该插件重新选择


腾讯云直播播放器

该模块可以实现腾讯云直播拉流播放,支持直播播放、暂停、继续、停止等基本控制,同时可以根据需要监听相应的直播事件。

技术支持

原生模块本身使用复杂,音视频功能强大,造成接入难度不小。 模块测试、接入请联系我们。

我们的客服微信: ruanyunkeji001或ruanyunkeji002

接口列表

函数 功能
init 初始化
setPlayerEventListener 设置播放器事件监听
start 开始播放
setRenderMode 设置渲染模式
setRenderRotation 设置图像渲染角度
pause 暂停播放
resume 恢复播放
stop 停止播放
snapshot 播放过程中本地截图
switchStream 多清晰度切换
prepareLiveSeek 直播时移准备
liveSeek 直播时移跳转

快速开始

步骤一: 腾讯云配置

这个步骤比较繁琐,可以联系我们上文中的客服进行指引

注册或登录腾讯云账号,并开通云直播服务,步骤如下

联系我们上方客服进行推流测试或者下载"腾讯云工具包"进行推流测试

步骤二: 开始使用模块

  1. 新建nvue文件,注意该模块必须在nvue中使用 模块名称为: RY-TencentLivePlayer,使用标签
    <div class="player">
        <RY-TencentLivePlayer ref="livePlayer" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentLivePlayer>
    </div>

备注: 可以在js的data()中声明播放器的宽度和高度,这样在代码中可以控制这两个参数的改变,可以参考

data() {
    return {
        playerWidth: 0,
        playerHeight: 0,
        flvUrl: 'http://3891.liveplay.myqcloud.com/live/3891_user_c3ea0775_219d.flv',
        renderMode: 0,
        renderRotation: 0,
        switchUrl: 'http://xxx.com',
        path: 'livePlayer/snapshot.jpeg',
        appId: 'xxx',
        domain: 'xxx',
        bizid: 'xxx',
        second: 15,
    }
}
  1. 模块初始化

init({params}, ret) 初始化直播

var self = this;
const {windowWidth, windowHeight} = uni.getSystemInfoSync();
self.playerWidth = windowWidth / 2;
self.playerHeight = windowHeight / 2;
this.$refs.livePlayer.init({
    docPath: plus.io.convertLocalFileSystemURL('_doc')
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

可以通过直接控制组件的宽度和高度来控制显示界面的大小,如果上面的playerWidth和playerHeight。

步骤三: 设置监听

setPlayerEventListener({}, ret) 设置播放器事件监听回调

ret:

回调 含义
BeginEvt 视频播放开始
EndEvt 视频播放结束
onGetMessageEvt 用于接收夹在音视频流中的消息
onNetDisconnectErr 网络断连,且经多次重连亦不能恢复,更多重试请自行重启播放
this.$refs.livePlayer.setPlayerEventListener({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤四: 启动播放

start({params}, ret) 播放器开始播放

params:

参数 含义
flvUrl flv播放地址
rect 视频界面的位置和大小
var self = this;
this.$refs.livePlayer.start({
    flvUrl: self.flvUrl,
    rect: {
        x: 0, 
        y: 0, 
        w: self.playerWidth,
        h: self.playerHeight
    }
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

关于 HLS(m3u8) 在 App 上我们不推荐使用 HLS 这种播放协议播放直播视频源(虽然它很适合用来做点播),因为延迟太高,在 App 上推荐使用 LIVE_FLV 或者 LIVE_RTMP 播放协议。

步骤五: 画面调整

铺满 or 适应

setRenderMode 设置渲染模式

params:

参数 含义
mode 图像渲染模式,取值为0、1

画面旋转

setRenderRotation 设置图像渲染角度

params:

参数 含义
rotation 图像渲染角度,取值为0、1、2、3

画面调整

var self = this;
this.$refs.livePlayer.setRenderMode({
    mode: self.renderMode
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});
var self = this;
this.$refs.livePlayer.setRenderRotation({
    rotation: self.renderRotation
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤六: 暂停播放

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

pause({}, ret) 暂停播放

this.$refs.livePlayer.pause({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

resume({params}, ret) 恢复播放

this.$refs.livePlayer.resume({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤七: 结束播放

stop({}, ret) 停止播放

this.$refs.livePlayer.stop({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤八: 消息接收

此功能可以在推流端将一些自定义 message 随着音视频线路直接下发到观众端,适用场景例如: (1)冲顶大会:推流端将题目下发到观众端,可以做到“音-画-题”完美同步。 (2)秀场直播:推流端将歌词下发到观众端,可以在播放端实时绘制出歌词特效,因而不受视频编码的降质影响。 (3)在线教育:推流端将激光笔和涂鸦操作下发到观众端,可以在播放端实时地划圈划线。

通过下方方案可以使用这个功能:

  • init初始化传入enableMessage参数,并设置为true
  • 通过setPlayerEventListener#onGetMessageEvt事件回调监听消息

步骤九: 屏幕截图

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

snapshot({params}, ret) 播放过程中本地截图

params:

参数 含义
path 图片保存路径
var self = this;
this.$refs.livePlayer.snapshot({
    path: self.path
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤十: 清晰度无缝切换

日常使用中,网络情况在不断发生变化。在网络较差的情况下,最好适度降低画质,以减少卡顿;反之,网速比较好,可以观看更高画质。 传统切流方式一般是重新播放,会导致切换前后画面衔接不上、黑屏、卡顿等问题。使用无缝切换方案,在不中断直播的情况下,能直接切到另条流上。

清晰度切换在直播开始后,任意时间都可以调用。调用方式如下

switchStream({params}, ret) 多清晰度切换

params: 参数 含义
url 播放的流地址
var self = this;
this.$refs.livePlayer.switchStream({
    url: self.switchUrl
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤十一: 直播回看

时移功能是腾讯云推出的特色能力,可以在直播过程中,随时观看回退到任意直播历史时间点,并能在此时间点一直观看直播。非常适合游戏、球赛等互动性不高,但观看连续性较强的场景。

prepareLiveSeek({params}, ret) 直播时移准备

params

参数 含义
appId 配置应用Id
domain 时移域名
bizid 流 bizid
var self = this;
this.$refs.livePlayer.prepareLiveSeek({
    appId: self.appId,
    domain: self.domain,
    bizid: self.bizid
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

配置正确后,在 setPlayerEventListener#oPlayProgressEvt 事件里,当前进度就不是从0开始,而是根据实际开播时间计算而来。

调用 liveSeek 方法,就能从历史事件点重新直播

liveSeek({params}, ret) 直播时移跳转

params:

参数 含义
second 视频流时间点
var self = this;
this.$refs.livePlayer.liveSeek({
    second: self.second
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

接入时移需要在后台打开2处配置:

录制:配置时移时长、时移储存时长 播放:时移获取元数据 时移功能处于公测申请阶段,如您需要可联系我们客服。

更多功能

获取内测功能和技术支持, 请联系我们客户微信: ruanyunkeji001或ruanyunkeji002

  • 高级参数(内测)
  • 音频控制(内测)
  • 更多事件回调

隐私、权限声明

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" iOS: 无

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

插件使用的播放器 SDK会采集数据, 详情可参考: https://cloud.tencent.com/document/product/881/20191

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

暂无用户评论。

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