更新记录

3.5.0(2021-06-07)

  1. 新增刷新本地视图接口;
  2. 新增刷新远端视图接口;
  3. 新增字符串roomId支持;

3.0.0(2021-04-20)

  1. 新增全局监听功能(增值)
查看更多

平台兼容性

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

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

技术支持

原生模块本身使用复杂,加上音视频功能复杂,造成接入难度不小。 建议使用前先联系我们的客服,协助接入。

  • 测试Demo,联系我们;
  • 技术支持,联系我们;
  • 内测功能,联系我们;

我们的客服微信: ruanyunkeji001或ruanyunkeji002

跑通通话模式

接口列表

函数 功能
init 初始化
setTrtcListener 设置监听器
enterRoom 进入房间
muteRemoteAudio 静音/取消静音指定的远端用户的声音
muteAllRemoteAudio 静音/取消静音所有用户的声音
startRemoteView 开始拉取并显示指定用户的远端画面
stopRemoteView 停止显示远端视频画面
stopAllRemoteView 停止显示所有远端视频画面
setDefaultStreamRecvMode 设置音视频数据接收模式
startLocalAudio 开启本地音频的采集和上行
startLocalPreview 开启本地视频的预览画面
setLocalRenderParams 本地图像的渲染设置
setVideoEncoderParam 设置视频编码器相关参数
exitRoom 离开房间

适用场景

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

原理解析

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

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

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

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

示意图

步骤1: 腾讯云配置

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

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

步骤2: 开始使用模块

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

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

data() {
    return {
        playerWidth: 0,
        playerHeight: 0,
        sdkAppId: 1400387416,
        userId: 'test001',
        userSig: 'eJw1zMxxxxx3CNxxxxxx',
    }
}
  1. 模块初始化

init({params}, ret) 初始化

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

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

步骤3: 设置监听

setTrtcListener({} ret) 设置监听器

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

步骤四: 组装进房参数

enterRoom({params}, ret) 进入房间

params:

参数 含义
sdkAppId 应用标识
userId 用户标识
userSig 用户签名
roomId 数字房间号码
streamId 绑定腾讯云直播CDN流Id
scence 应用场景
var self = this;
this.$refs.trtc.enterRoom({
    sdkAppId: self.sdkAppId,
    userId: self.userId, 
    userSig: self.userSig, 
    roomId: self.roomId,
    streamId: self.streamId,
    scence: self.scence,
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

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

步骤五: 创建并进入房间

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

注意: 如果进房失败,SDK 同时还会回调onError事件,并返回参数errCode(错误码)、errMsg(错误原因)以及extraInfo(保留参数)。 如果已在某一个房间中,则必须先调用exitRoom()退出当前房间,才能进入下一个房间。

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

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 不再继续拉取对应远端用户的视频数据。

muteRemoteAudio({params}, ret) 静音/取消静音指定的远端用户的声音

params:

参数 含义
userId 对方的用户Id
isMute true:静音;false:取消静音
this.$refs.trtc.muteRemoteAudio({
    userId: self.remoteUserId,
    isMute: self.isMute
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

muteAllRemoteAudio({params}, ret) 静音/取消静音所有用户的声音

params:

参数 含义
isMute true:静音;false:取消静音
this.$refs.trtc.muteAllRemoteAudio({
    isMute: self.isMute
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

startRemoteView({params}, ret) 开始拉取并显示指定用户的远端画面

params:

参数 含义
userId 指定远端用户的 userId
streamType 指定要观看userId的视频流类型
rect 指定视频显示区域的位置和大小
this.$refs.trtc.startRemoteView({
    rect: {
        x: 0,
        y: 0, 
        w: self.playerWidth / 2,
        h: self.playerHeight / 2
    },
    userId: self.remoteUserId,
    streamType: self.streamType
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

stopRemoteView({params}, ret) 停止显示远端视频画面,同时不再拉取该远端用户的视频数据流

params:

参数 含义
userId 指定远端用户的 userId
streamType 指定要停止观看的 userId 的视频流类型
this.$refs.trtc.stopRemoteView({
    userId: self.remoteUserId,
    streamType: self.streamType
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

stopAllRemoteView({}, ret) 停止显示所有远端视频画面,同时不再拉取远端用户的视频数据流

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

说明: 如果您在收到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 会在接收到该用户的视频数据后解码并播放。

setDefaultStreamRecvMode({params}, ret) 设置音视频数据接收模式,需要在进房前设置才能生效

params:

参数 含义
isAudioAuto true: 自动接收音频数据; false: 需调用muteRemoteAudio进行请求或取消
isVideoAuto true: 自动接收视频数据; false: 需要调用 startRemoteView/stopRemoteView进行请求或取消
this.$refs.trtc.setDefaultStreamRecvMode({
    isAudioAuto: self.isAudioAuto,
    isVideoAuto: self.isVideoAuto
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

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

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

startLocalAudio({params}, ret) 开启本地音频的采集和上行

params:

参数 含义
quality 声音音质
this.$refs.trtc.startLocalAudio({
    quality: self.quality
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

startLocalPreview({params}, ret) 开启本地视频的预览画面

params:

参数 含义
isFront true: 前置摄像头; false: 后置摄像头
rect 视频显示区域的位置和大小
this.$refs.trtc.startLocalPreview({
    isFront: self.isFront,
    rect: {
        x: 0, 
        y: 0, 
        w: self.playerWidth,
        h: self.playerHeight
    }
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

setLocalRenderParams({params}, ret) 本地图像的渲染设置

params:

参数 含义
fillMode 画面填充模式
mirrorType 画面镜像模式
rotation 画面朝向
this.$refs.trtc.setLocalRenderParams({
    fillMode: self.fillMode, 
    mirrorType: self.mirrorType, 
    rotation: self.rotation
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

setVideoEncoderParam({params}, ret) 设置视频编码器相关参数

params:

参数 含义
resolution 视频分辨率
bitrate 目标视频码率
this.$refs.trtc.setVideoEncoderParam(self.videoEncParam, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤8: 退出当前房间

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

exitRoom({}, ret) 离开房间

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

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

跑通直播模式

接口列表

函数 功能
init 初始化
setTrtcListener 设置监听器
enterRoom 进入房间
startLocalPreview 开启本地视频的预览画面
setLocalRenderParams 本地图像的渲染设置
setVideoEncoderParam 设置视频编码器相关参数
startLocalAudio 开启本地音频的采集和上行
setBeautyStyle 设置美颜(磨皮)算法
setBeautyLevel 设置美颜级别
setWhitenessLevel 设置美白级别
setFilter 设置指定素材滤镜特效
startRemoteView 开始拉取并显示指定用户的远端画面
switchRole 切换角色,仅适用于直播场景
startLocalPreview 开启本地视频的预览画面
connectOtherRoom 请求跨房通话
exitRoom 离开房间

适用场景

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

原理解析

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

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

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

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

示意图

步骤1: 腾讯云配置

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

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

步骤2: 开始使用模块

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

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

data() {
    return {
        playerWidth: 0,
        playerHeight: 0,
        sdkAppId: 1400387416,
        userId: 'test001',
        userSig: 'eJw1zMxxxxx3CNxxxxxx',
    }
}
  1. 模块初始化

init({params}, ret) 初始化

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

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

步骤3: 设置监听

setTrtcListener({} ret) 设置监听器

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

步骤4: 组装进房参数

enterRoom({params}, ret) 进入房间

params:

参数 含义
sdkAppId 应用标识
userId 用户标识
userSig 用户签名
roomId 数字房间号码
streamId 绑定腾讯云直播CDN流Id
scence 应用场景
var self = this;
this.$refs.trtc.enterRoom({
    sdkAppId: self.sdkAppId,
    userId: self.userId, 
    userSig: self.userSig, 
    roomId: self.roomId,
    streamId: self.streamId,
    scence: self.scence,
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

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

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

  1. 主播端调用 startLocalPreview() 可以开启本地的摄像头预览,SDK 会向系统请求摄像头使用权限。
  2. 主播端调用 setLocalRenderParams() 可以设定本地视频画面的显示模式fillMode:
    • 0: 模式表示填充,画面可能会被等比放大和裁剪,但不会有黑边。
    • 1: 模式表示适应,画面可能会等比缩小以完全显示其内容,可能会有黑边。
  3. 主播端调用 setVideoEncoderParam() 接口可以设定本地视频的编码参数,该参数将决定房间里其他用户观看您的画面时所感受到的 画面质量。
  4. 主播端调用 startLocalAudio() 开启麦克风,SDK 会向系统请求麦克风使用权限。

startLocalPreview({params}, ret) 开启本地视频的预览画面

params:

参数 含义
isFront true: 前置摄像头; false: 后置摄像头
rect 视频显示区域的位置和大小
this.$refs.trtc.startLocalPreview({
    isFront: self.isFront,
    rect: {
        x: 0, 
        y: 0, 
        w: self.playerWidth,
        h: self.playerHeight
    }
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

setLocalRenderParams({params}, ret) 本地图像的渲染设置

params:

参数 含义
fillMode 画面填充模式
mirrorType 画面镜像模式
rotation 画面朝向
this.$refs.trtc.setLocalRenderParams({
    fillMode: self.fillMode, 
    mirrorType: self.mirrorType, 
    rotation: self.rotation
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

setVideoEncoderParam({params}, ret) 设置视频编码器相关参数

params:

参数 含义
resolution 视频分辨率
bitrate 目标视频码率
this.$refs.trtc.setVideoEncoderParam(self.videoEncParam, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

startLocalAudio({params}, ret) 开启本地音频的采集和上行

params:

参数 含义
quality 声音音质
this.$refs.trtc.startLocalAudio({
    quality: self.quality
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

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

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

示意图

setBeautyStyle({params}, ret) 设置美颜(磨皮)算法

params:

参数 含义
mode 美颜风格
this.$refs.trtc.setBeautyStyle({
    mode: self.beautyStyleMode
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

setBeautyLevel({params}, ret) 设置美颜级别

params:

参数 含义
level 美颜级别
this.$refs.trtc.setBeautyLevel({
    level: self.beautyLevel
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

setWhitenessLevel({params}, ret) 设置美白级别

params:

参数 含义
level 美白级别
this.$refs.trtc.setWhitenessLevel({
    level: self.whitenessLevel
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

setFilter({params}, ret) 设置指定素材滤镜特效

params:

参数 含义
img 指定素材,即颜色查找表图片
this.$refs.trtc.setFilter({
    img: self.img
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤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) 便可显示主播的画面。

startRemoteView({params}, ret) 开始拉取并显示指定用户的远端画面

params:

参数 含义
userId 指定远端用户的 userId
streamType 指定要观看userId的视频流类型
rect 指定视频显示区域的位置和大小
this.$refs.trtc.startRemoteView({
    rect: {
        x: 0,
        y: 0, 
        w: self.playerWidth / 2,
        h: self.playerHeight / 2
    },
    userId: self.remoteUserId,
    streamType: self.streamType
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤9: 观众跟主播连麦

  1. 观众端调用 switchRole() 将角色切换为主播: 0。
  2. 观众端调用 startLocalPreview() 可以开启本地的画面。
  3. 观众端调用 startLocalAudio() 开启麦克风采音。

switchRole({params}, ret) 切换角色,仅适用于直播场景

参数 含义
role 目标角色
this.$refs.trtc.switchRole({
    role: self.role
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

startLocalPreview({params}, ret) 开启本地视频的预览画面

params:

参数 含义
isFront true: 前置摄像头; false: 后置摄像头
rect 视频显示区域的位置和大小
this.$refs.trtc.startLocalPreview({
    isFront: self.isFront,
    rect: {
        x: 0, 
        y: 0, 
        w: self.playerWidth,
        h: self.playerHeight
    }
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤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) 即可显示另一房间里主播的画面,声音会自动播放。

connectOtherRoom({params}, ret) 请求跨房通话(主播 PK)

参数 含义
userId 另一主播的用户Id
roomId 另一主播的房间Id
this.$refs.trtc.connectOtherRoom({
    userId: self.otherRoomUserId,
    roomId: self.otherRoomId
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤11: 退出当前房间

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

exitRoom({}, ret) 离开房间

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

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

更多功能

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

  • 音频接口(内测)
  • 音乐特效和人声(内测)
  • 设备控制(内测)
  • 更多事件回调

隐私、权限声明

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

Android: "android.permission.INTERNET", "android.permission.ACCESS_NETWORK_STATE", "android.permission.ACCESS_WIFI_STATE", "aandroid.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/document/product/647/16788

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

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