更新记录

1.0.0(2021-05-19)

  1. 包含实时音视频功能,含有视频通话和直播两种模式;
  2. 直播播放功能,支持实现旁路直播;

平台兼容性

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


腾讯云音视频

  • 实时音视频

实时音视频(Tencent TRTC)主打低延时互动直播和多人音视频两大解决方案,支持低延时直播观看、实时录制、屏幕分享、美颜特效、立体声等能力,还能和直播 CDN 无缝对接,适用于互动连麦、跨房PK、语音电台、K 歌、小班课、大班课、语音聊天、视频聊天、在线会议等业务场景。

跑通通话模式 跑通直播模式

  • 直播播放器

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

技术支持

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

技术支持



微信号: ruanyunkeji006



跑通通话模式

适用场景

TRTC 支持四种不同的进房模式,其中视频通话(VideoCall)和语音通话(VoiceCall)统称为通话模式,视频互动直播(Live)和语音互动直播(VoiceChatRoom)统称为 直播模式。 通话模式下的 TRTC,支持单个房间最多300人同时在线,支持最多30人同时发言。适合1对1视频通话、300人视频会议、在线问诊、远程面试、视频客服、在线狼人杀等应用场景。

原理解析

TRTC 云服务由两种不同类型的服务器节点组成,分别是“接口机”和“代理机”:

  • 接口机 该类节点都采用最优质的线路和高性能的机器,善于处理端到端的低延时连麦通话,单位时长计费较高。

  • 代理机 该类节点都采用普通的线路和性能一般的机器,善于处理高并发的拉流观看需求,单位时长计费较低。

在通话模式下,TRTC 房间中的所有用户都会被分配到接口机上,相当于每个用户都是“主播”,每个用户随时都可以发言(最高的上行并发限制为30路),因此适合在线会议等场景,但单个房间的人数限制为300人。

示意图

步骤1: 插件的加载和配置

  • 加载插件

首先,加载uniapp平台的原生插件,需要自定义基座后才能使用,您可以按照自定义基座文档进行。

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

插件名称为: RY-TencentTrtc, 使用标签对来引用Component类型插件。

<RY-TencentTrtc ref="trtc" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentTrtc>

备注:

可以通过改变width和height参数的大小,来改变视图容器的大小。

  • 腾讯云配置

注册或登录腾讯云账号,实名认证后,开通实时音视频

  1. 点击应用管理,进入应用列表;
  2. 点击 "创建应用",填入相关信息,创建新应用; 如果使用已有应用,则跳过这步;
  3. 点击"应用信息",进入应用详情;
  4. 在"应用信息"标签卡中,点击"SDKAppID"后面的复制按钮,复制SDKAppId,并保存,对应为后文中的"sdkAppId";
  5. 在"快速上手"标签卡中,"第二步"里,点击"复制秘钥",复制Key,并保存,对应为后文中的"key"值。
  • 生成签名
  1. 进入 sdkToken 平台,注册或者登录该平台;
  2. 点击 RY-TencentTrtc 创建新应用:
  • "应用名"为您应用的名称,一般填写app名字;
  • "sdkAppId"为上方腾讯云配置中保存的sdkAppId值;
  • "key"为上方中腾讯云配置中保存的key值;
  • "Package Name"为您自定义基座中,使用的Android包名;
  • "Bundle Id"为您自定义基座中,使用的iOS包名。
  1. 点击 签名工具 ,选择您前面创建的应用,填入userId,获取用户签名userSig,保存userId和userSig,供后面步骤使用。

备注:

测试过程中一般需要生成两个userId对应的userSig,以方便快速测试双方的功能。

步骤2: 开始使用插件

使用RY-TencentTrtc,需要调用 [init]() 初始化模块,才可以调用其他的接口功能。

this.$refs.trtc.init({
    docPath: plus.io.convertLocalFileSystemURL('_doc')
}, ret => {
    console.log(ret);
});

步骤3: 设置监听

[setTrtcListener]() 注册事件回调,并监听相关事件和错误通知。

this.$refs.trtc.setTrtcListener({}, ret => {
    console.log(ret);
});

步骤4: 组装进房参数

在调用 [enterRoom()]() 接口时,需要填写几个关键参数,这些参数的必填字段如下表所示。

参数 字段类型 补充说明 填写示例
sdkAppId 整数类型 应用Id,您可以在 实时音视频控制台 中查看 SDKAppID 1400000123
userId 字符串类型 只允许包含大小写英文字母(a-z、A-Z)、数字(0-9)及下划线和连词符 test_user_001
userSig 字符串类型 用户签名 eJyrVareCeYrSy1Ssll...
roomId 整数类型 默认不支持字符串类型的房间号,字符串类型的房间号会影响进房速度 29834

注意:

TRTC 同一时间不支持两个相同的 userId 进入房间,否则会相互干扰。

步骤5: 创建并进入房间

  1. 调用 [enterRoom()] 即可加入 TRTCParams 参数中roomId代指的音视频房间。如果该房间不存在,SDK 会自动创建一个以字段roomId的值为房间号的新房间。
  2. 请根据应用场景设置合适的scence参数,使用错误可能会导致卡顿率或画面清晰度不达预期。
    • 视频通话,请设置为0。
    • 语音通话,请设置为1。
  3. 进房成功后,SDK 会回调 [onEnterRoom(result)]() 事件。其中,参数result大于0时表示进房成功,具体数值为加入房间所消耗的时间,单位为毫秒(ms);当result小于0时表示进房失败,具体数值为进房失败的错误码。
this.$refs.trtc.enterRoom({
    sdkAppId: 1423000013,
    userId: 'test001', 
    userSig: 'fdkay23xxxqerq', 
    roomId: 1234,
    scence: 0,
}, ret => {
    console.log(ret);
});

this.$refs.trtc.setTrtcListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        if ('onEnterRoom' == ret.eventType) {
            if (ret.result > 0) {
                console.log('进房成功');
            } else {
                console.log('进房失败');
            }
        }
    }
});

注意:

  • 如果进房失败,SDK 同时还会回调onError事件,并返回参数errCode(错误码)、errMsg(错误原因)以及extraInfo(保留参数)。
  • 如果已在某一个房间中,则必须先调用exitRoom()退出当前房间,才能进入下一个房间。
  • 每个端在应用场景 appScene 上必须要进行统一,否则会出现一些不可预料的问题。

步骤6: 订阅远端的音视频流

SDK 支持自动订阅和手动订阅。

自动订阅模式(默认)

在自动订阅模式下,进入某个房间之后,SDK 会自动接收房间中其他用户的音频流,从而达到最佳的“秒开”效果:

  1. 当房间中有其他用户在上行音频数据时,您会收到 [onUserAudioAvailable()]() 事件通知,SDK 会自动播放这些远端用户的声音。
  2. 您可以通过 [muteRemoteAudio(userId, mute: true)]() 屏蔽某一个 userId 的音频数据,也可以通过 [muteAllRemoteAudio(true)]() 屏蔽所有远端用户的音频数据,屏蔽后 SDK 不再继续拉取对应远端用户的音频数据。
  3. 当房间中有其他用户在上行视频数据时,您会收到 [onUserVideoAvailable()]() 事件通知,但此时 SDK 未收到该如何展示视频数据的指令,因此不会自动处理视频数据。您需要通过调用 [startRemoteView(userId, view: view)]() 方法将远端用户的视频数据和显示view关联起来。
  4. 您可以通过 [setRemoteViewFillMode()]() 指定视频画面的显示模式:
    • Fill 模式:表示填充,画面可能会等比放大和裁剪,但不会有黑边。
    • Fit 模式:表示适应,画面可能会等比缩小以完全显示其内容,可能会有黑边。
  5. 您可以通过 [stopRemoteView(userId)]() 可以屏蔽某一个 userId 的视频数据,也可以通过 [stopAllRemoteView()]() 屏蔽所有远端用户的视频数据,屏蔽后 SDK 不再继续拉取对应远端用户的视频数据。
// 实例代码:根据通知订阅(或取消订阅)远端用户的视频画面
this.$refs.setTrtcListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        if ('onUserVideoAvailable' == ret.eventType) {
            if (ret.available) {
                this.$refs.trtc.startRemoteView({
                    rect: {
                        x: 0,
                        y: 0, 
                        w: self.playerWidth / 2,
                        h: self.playerHeight / 2
                    },
                    userId: self.remoteUserId,
                    streamType: self.streamType
                }, ret => {
                    console.log(ret);
                });
            } else {
                this.$refs.trtc.stopRemoteView({
                    userId: self.remoteUserId,
                    streamType: self.streamType
                }, ret => {
                    console.log(ret);
                });
            }
        }
    }
});

说明:

如果您在收到onUserVideoAvailable()事件回调后没有立即调用startRemoteView()订阅视频流,SDK 将会在5s内停止接收来自远端的视频数据。

手动订阅模式

您可以通过 [setDefaultStreamRecvMode()]() 接口将 SDK 指定为手动订阅模式。在手动订阅模式下,SDK 不会自动接收房间中其他用户的音视频数据,需要您手动通过 API 函数触发。

  1. 在进房前调用 [setDefaultStreamRecvMode(false, video: false)]() 接口将 SDK 设定为手动订阅模式。
  2. 当房间中有其他用户在上行音频数据时,您会收到 [onUserAudioAvailable()]() 事件通知。此时,您需要通过调用 [muteRemoteAudio(userId, mute: false)]() 手动订阅该用户的音频数据,SDK 会在接收到该用户的音频数据后解码并播放。
  3. 当房间中有其他用户在上行视频数据时,您会收到 [onUserVideoAvailable()]() 事件通知。此时,您需要通过调用 [startRemoteView(userId, view: view)]() 方法手动订阅该用户的视频数据,SDK 会在接收到该用户的视频数据后解码并播放。

步骤7: 发布本地的音视频流

  1. 调用 [startLocalAudio()]() 可以开启本地的麦克风采集,并将采集到的声音编码并发送出去。
  2. 调用 [startLocalPreview()]() 可以开启本地的摄像头,并将采集到的画面编码并发送出去。
  3. 调用 [setLocalRenderParams()]() 可以设定本地视频画面的显示模式fillMode:
    • 0: 模式表示填充,画面可能会被等比放大和裁剪,但不会有黑边。
    • 1: 模式表示适应,画面可能会等比缩小以完全显示其内容,可能会有黑边。
  4. 调用 [setVideoEncoderParam()]() 接口可以设定本地视频的编码参数,该参数将决定房间里其他用户观看您的画面时所感受到的画面质量。
this.$refs.trtc.startLocalPreview({
    isFront: true,
    rect: {
        x: 0, 
        y: 0, 
        w: self.playerWidth,
        h: self.playerHeight
    }
}, ret => {
    console.log(ret);
});

this.$refs.trtc.startLocalAudio({
    quality: 0
}, ret => {
    console.log(ret);
});

步骤8: 退出当前房间

调用 [exitRoom()]() 方法退出房间,SDK 在退房时需要关闭和释放摄像头、麦克风等硬件设备,因此退房动作并非瞬间完成的,需收到 [Room()]() 回调后才算真正完成退房操作。

this.$refs.trtc.exitRoom({}, ret => {
    console.log(ret);
});

this.$refs.trtc.setTrtcListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        if ('Room' == ret.eventType) {
            console.log('离开房间: reason: ' + ret.reason);
        }
    }
});

注意:

如果您的 App 中同时集成了多个音视频 SDK,请在收到onExitRoom回调后再启动其它音视频 SDK,否则可能会遇到硬件占用问题。

跑通直播模式

适用场景

TRTC 支持四种不同的进房模式,其中视频通话(VideoCall)和语音通话(VoiceCall)统称为 通话模式,视频互动直播(LiveRoom)和语音互动直播(VoiceRoom)统称为直播模式。 直播模式下的 TRTC,支持单个房间最多10万人同时在线,具备小于300ms的连麦延迟和小于1000ms的观看延迟,以及平滑上下麦切换技术。适用低延时互动直播、十万人互动课堂、视频相亲、在线教育、远程培训、超大型会议等应用场景。

原理解析

TRTC 云服务由两种不同类型的服务器节点组成,分别是“接口机”和“代理机”:

  • 接口机 该类节点都采用最优质的线路和高性能的机器,善于处理端到端的低延时连麦通话,单位时长计费较高。

  • 代理机 该类节点都采用普通的线路和性能一般的机器,善于处理高并发的拉流观看需求,单位时长计费较低。

在直播模式下,TRTC 引入了角色的概念,用户被分成“主播”和“观众”两种角色,“主播”会被分配到接口机上,“观众”则被分配在代理机,同一个房间的观众人数上限为10万人。 如果“观众”要上麦,需要先切换角色(switchRole)为“主播”才能发言。切换角色的过程也伴随着用户从代理机到接口机的迁移,TRTC 特有的低延时观看技术和平滑上下麦切换技术,可以让整个切换时间变得非常短暂。

示意图

步骤1: 插件的加载和配置

  • 加载插件

首先,加载uniapp平台的原生插件,需要自定义基座后才能使用,您可以按照自定义基座文档进行。

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

插件名称为: RY-TencentTrtc, 使用标签对来引用Component类型插件。

<RY-TencentTrtc ref="trtc" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentTrtc>

备注:

可以通过改变width和height参数的大小,来改变视图容器的大小。

  • 腾讯云配置

注册或登录腾讯云账号,实名认证后,开通实时音视频

  1. 点击应用管理,进入应用列表;
  2. 点击 "创建应用",填入相关信息,创建新应用; 如果使用已有应用,则跳过这步;
  3. 点击"应用信息",进入应用详情;
  4. 在"应用信息"标签卡中,点击"SDKAppID"后面的复制按钮,复制SDKAppId,并保存,对应为后文中的"sdkAppId";
  5. 在"快速上手"标签卡中,"第二步"里,点击"复制秘钥",复制Key,并保存,对应为后文中的"key"值。
  • 生成签名
  1. 进入 sdkToken 平台,注册或者登录该平台;
  2. 点击 RY-TencentTrtc 创建新应用:
  • "应用名"为您应用的名称,一般填写app名字;
  • "sdkAppId"为上方腾讯云配置中保存的sdkAppId值;
  • "key"为上方中腾讯云配置中保存的key值;
  • "Package Name"为您自定义基座中,使用的Android包名;
  • "Bundle Id"为您自定义基座中,使用的iOS包名。
  1. 点击 签名工具 ,选择您前面创建的应用,填入userId,获取用户签名userSig,保存userId和userSig,供后面步骤使用。

备注:

测试过程中一般需要生成两个userId对应的userSig,以方便快速测试双方的功能。

步骤2: 开始使用插件

使用RY-TencentTrtc,需要调用 [init]() 初始化模块,才可以调用其他的接口功能。

this.$refs.trtc.init({
    docPath: plus.io.convertLocalFileSystemURL('_doc')
}, ret => {
    console.log(ret);
});

步骤3: 设置监听

[setTrtcListener]() 注册事件回调,并监听相关事件和错误通知

this.$refs.trtc.setTrtcListener({}, ret => {
    console.log(ret);
});

步骤4: 组装进房参数

在调用 [enterRoom()]() 接口时,需要填写几个关键参数,这些参数的必填字段如下表所示。

参数 字段类型 补充说明 填写示例
sdkAppId 整数类型 应用Id,您可以在 实时音视频控制台 中查看 SDKAppID 1400000123
userId 字符串类型 只允许包含大小写英文字母(a-z、A-Z)、数字(0-9)及下划线和连词符 test_user_001
userSig 字符串类型 用户签名 eJyrVareCeYrSy1Ssll...
roomId 整数类型 默认不支持字符串类型的房间号,字符串类型的房间号会影响进房速度 29834

注意:

  • TRTC 同一时间不支持两个相同的 userId 进入房间,否则会相互干扰。
  • 每个端在应用场景 appScene 上必须要进行统一,否则会出现一些不可预料的问题。

步骤5: 主播端开启摄像头预览和麦克风采音

  1. 主播端调用 [startLocalPreview()]() 可以开启本地的摄像头预览,SDK 会向系统请求摄像头使用权限。
  2. 主播端调用 [setLocalRenderParams()]() 可以设定本地视频画面的显示模式fillMode:
    • 0: 模式表示填充,画面可能会被等比放大和裁剪,但不会有黑边。
    • 1: 模式表示适应,画面可能会等比缩小以完全显示其内容,可能会有黑边。
  3. 主播端调用 [setVideoEncoderParam()]() 接口可以设定本地视频的编码参数,该参数将决定房间里其他用户观看您的画面时所感受到的 画面质量。
  4. 主播端调用 [startLocalAudio()]() 开启麦克风,SDK 会向系统请求麦克风使用权限。
// 示例代码:发布本地的音视频流
this.$refs.trtc.startLocalPreview({
    isFront: self.isFront,
    rect: {
        x: 0, 
        y: 0, 
        w: self.playerWidth,
        h: self.playerHeight
    }
}, ret => {
    console.log(ret);
});

this.$refs.trtc.setVideoEncoderParam({
    // todo
}, ret => {
    console.log(ret);
});

步骤6: 主播端设置美颜效果

  1. 主播端调用 [setBeautyStyle()]() 可以设置美颜风格:
    • Smooth:光滑,效果比较明显,类似网红风格。
    • Nature:自然,磨皮算法更多地保留了面部细节,主观感受上会更加自然。
    • Pitu :仅 企业版 才支持。
  2. 主播端调用 [setBeautyLevel()]() 可以设置磨皮的级别,一般设置为5即可。
  3. 主播端调用 [setWhitenessLevel()]() 可以设置美白级别,一般设置为5即可。
  4. 由于 iPhone 的摄像头调色默认偏黄,建议调用 [setFilter()]() 为主播增加美白特效,美白特效所对应的滤镜文件的下载地址:滤镜文件

示意图

步骤7: 主播端创建房间并开始推流

  1. 主播端设置 TRTCParams 中的字段role为0,表示当前用户的角色为主播。
  2. 主播端调用 [enterRoom()]() 即可创建 TRTCParams 参数字段roomId的值为房间号的音视频房间,并指定scene参数:
    • 2:视频互动直播模式,本文以该模式为例。
    • 3:语音互动直播模式。
  3. 房间创建成功后,主播端开始音视频数据的编码和传输流程。同时,SDK 会回调 [onEnterRoom(result)]() 事件,参数result大于0时表示进房成功,具体数值为加入房间所消耗的时间,单位为毫秒(ms);当result小于0时表示进房失败,具体数值为进房失败的错误码。

步骤8: 观众端进入房间观看直播

  1. 观众端设置 TRTCParams 中的字段role为1,表示当前用户的角色为观众。
  2. 观众端调用 [enterRoom()]() 即可进入 TRTCParams 参数中roomId代指的音视频房间,并指定scene参数:
    • 3:视频互动直播模式,本文以该模式为例。
    • 4:语音互动直播模式。
  3. 观看主播的画面:
    • 如果观众端事先知道主播的 userId,直接在进房成功后使用主播userId调用 [startRemoteView(userId, rect)]() 即可显示主播的画面。
    • 如果观众端不知道主播的 userId,观众端在进房成功后会收到 [onUserVideoAvailable()]() 事件通知,使用回调中获取的主播userId调用 [startRemoteView(userId, view: view)]() 便可显示主播的画面。

步骤9: 观众跟主播连麦

  1. 观众端调用 [switchRole()]() 将角色切换为主播: 0。
  2. 观众端调用 [startLocalPreview()]() 可以开启本地的画面。
  3. 观众端调用 [startLocalAudio()]() 开启麦克风采音。
// 示例代码:观众上麦
this.$refs.trtc.switchRole({
    role: 0
}, ret => {
    console.log(ret);
});
this.$refs.trtc.startLocalAudio({
    quality: 0
}, ret => {
    console.log(ret);
});
this.$refs.trtc.startLocalPreview({
    rect: {
        x: 0, 
        y: 0, 
        w: self.playerWidth,
        h: self.playerHeight
    },
    isFront: true
}, ret => {
    console.log(ret);
});

// 示例代码:观众下麦
this.$refs.trtc.switchRole({
    role: 1
}, ret => {
    console.log(ret);
});
this.$refs.trtc.stopLocalAudio({}, ret => {
    console.log(ret);
});
this.$refs.trtc.stopLocalPreview({}, ret => {
    console.log(ret);
});

步骤10: 主播间进行跨房连麦 PK

TRTC 中两个不同音视频房间中的主播,可以在不退出原来的直播间的场景下,通过“跨房通话”功能拉通连麦通话功能进行“跨房连麦 PK”。

  1. 主播 A 调用 [connectOtherRoom()]() 接口,需要将主播 B 的roomId和userId作为参数传递给接口函数。
  2. 跨房成功后,主播 A 会收到 [onConnectOtherRoom()]() 事件回调。同时,两个直播房间里的所有用户均会收到 [onUserVideoAvailable()]() 和 [onUserAudioAvailable()]() 事件通知。 例如,当房间“001”中的主播 A 通过connectOtherRoom()与房间“002”中的主播 B 拉通跨房通话后, 房间“001”中的用户会收到主播 B 的onUserVideoAvailable(B, available: true)回调和onUserAudioAvailable(B, available: true)回调。 房间“002”中的用户会收到主播 A 的onUserVideoAvailable(A, available: true) 回调和onUserAudioAvailable(A, available: true)回调。
  3. 两个房间里的用户通过调用 [startRemoteView(userId, view: view)]() 即可显示另一房间里主播的画面,声音会自动播放。
//示例代码:跨房连麦 PK
this.$refs.trtc.connectOtherRoom({
    userId: 'userId',
    roomId: 'roomId'
}, ret => {
    console.log(ret);
});

步骤11: 退出当前房间

调用 [exitRoom()]() 方法退出房间,SDK 在退房时需要关闭和释放摄像头、麦克风等硬件设备,因此退房动作并非瞬间完成的,需收到 [Room()]() 回调后才算真正完成退房操作。

// 调用退房后请等待 Room 事件回调
this.$refs.trtc.exitRoom({}, ret => {
    console.log(ret);
});

this.$refs.trtc.setTrtcListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        if ('Room' == ret.eventType) {
            console.log('离开房间: reason: ' + ret.reason);
        }
    }
});

注意:

如果您的 App 中同时集成了多个音视频 SDK,请在收到onExitRoom回调后再启动其它音视频 SDK,否则可能会遇到硬件占用问题。

直播播放器

步骤一: 腾讯云配置

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

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

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

步骤二: 初始化播放器

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

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

  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"
    });
});

步骤11: 直播回看

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

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处配置:

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

更多功能

  • 全局监听
  • 视频覆盖问题

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

技术支持



微信号: ruanyunkeji006

隐私、权限声明

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

Android: "android.permission.RECEIVE_BOOT_COMPLETED", "android.permission.INTERNET", "android.permission.ACCESS_NETWORK_STATE", "android.permission.ACCESS_WIFI_STATE", "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: "NSCameraUsageDescription", "NSMicrophoneUsageDescription"

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

插件使用的 音视频 SDK会采集数据,详情可参考:https://cloud.tencent.com/document/product/647/45151

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

暂无用户评论。

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