更新记录

3.1.0(2021-04-20)

  1. 新增调整视频窗口大小接口(增值);

3.0.0(2021-03-17)

  1. 内测跨页面监听功能上线;

Android:

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


腾讯云实时音视频Smart

模块列表

trtcCalling视频语音通话

trtcLiveRoom视频互动直播

trtcVoiceRoom语音聊天室

trtcCalling视频语音通话

接口列表

函数 功能
init 初始化
setCallingListener 设置监听器
login 登录
call 单人通话邀请
groupCall 群组邀请通话
accept 接受当前会话
reject 拒绝当前会话
hangup 挂断当前会话
startRemoteView 渲染远端用户视频
openCamera 打开本地摄像头

快速开始

步骤一: 腾讯云配置

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

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

  1. 点击应用管理许可证

    • 如果还没有,可以点击"创建应用"
    • 或选择对应的应用, 并复制”SDKAppId“,这个ID保存为配置的文件的sdkAppId;
  2. 点击辅助工具,选择UserSig生成&校验,选择对应的应用的ID,生成userId和userSig

步骤二: 开始使用模块

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

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

data() {
    return {
        playerWidth: 0,
        playerHeight: 0,
        sdkAppId: 1400387416,
        userId: 'test001',
        userSig: 'eJw1zMxxxxx3CNxxxxxx',
        type: 0,
        userIdList: ['test002'],
        groupId: '',
        remoteUserId: 'test002',
        isFront: true, 
        isMute: true,
        isHandsFree: true
    }
}
  1. 模块初始化

init({params}, ret)

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

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

步骤三: 设置监听

setCallingListener({} ret) 设置监听器, 监听事件回调

ret:

参数 含义
onInvited 被邀请通话回调
onUserVideoAvailable 用户是否开启视频上行回调
onUserAudioAvailable 用户是否开启音频上行回调
onCallingTimeOut onCallingTimeOut
onNoResp 对方无回应回调
onCallingCancel 当前通话被取消回调
onUserEnter 用户进入通话回调
onUserLeave 用户离开通话回调
this.$refs.calling.setCallingListener({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤四: 登录

login({params}, ret) 登录

params:

参数 含义
sdkAppId 当前用户的Id
userSig 腾讯云设计的一种安全保护签名
var self = this;
    this.$refs.calling.login({
        sdkAppId: self.sdkApp Id,
        userId: self.userId, 
        userSig: self.userSig
    }, ret => {
        uni.showToast({
            title: JSON.stringify(ret),
            icon: "none"
        });
});

步骤五: 实现1V1通话

  1. 发起方: 调用call({params}, ret)发起视频或语音通话的请求。
  2. 接收方: 当接收方处于已登录状态时,监听器会收到setCallingListener#onInvited的事件回调,回调中的callType为发起方的填写的通话类型,您可以通过此参数启动相应的界面。
  3. 接收方: 如果希望接听通话,接收方可以调用accept({}, ret)函数,如果此时是视频通话,可以同时调用openCamera()函数打开自己的本地摄像头。接收方也可以使用reject()拒绝此次通话。
  4. 当双方音视频通道建立完成,通话双方还会收到setCallingListener#onUserVideoAvailable或setCallingListener#onUserAudioAvailable的事件回调。此时双方用户可以调用startRemoteView()展示远端的视频画面。视频通话远端的声音默认是自动播放的。

call 单人通话邀请

params:

参数 含义
userId 呼叫用户Id
type 通话类型:1视频/2语音
var self = this;
this.$refs.calling.call({
    userId: self.remoteUserId, 
    type: self.type
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

accept({}, ret) 接受当前通话

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

openCamera({params}, ret) 开启摄像头

params:

参数 含义
isFront true:开启前置摄像头,false:开启后置摄像头
rect 指定显示区域的坐标和大小
var self = this;
const {windowWidth, windowHeight} = uni.getSystemInfoSync();
this.$refs.calling.openCamera({
    isFront: self.isFront,
    rect: {
        x: 0, 
        y: 0, 
        w: windowWidth / 2, 
        h: windowHeight / 2
    }
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

可以通过rect指定视频显示的区域,x、y代表左上角坐标,w和h代表宽度和高度。

startRemoteView({params}, ret) 渲染远端视频

params:

参数 含义
userId 远端用户Id
rect 指定显示区域的坐标和大小
var self = this;
const {windowWidth, windowHeight} = uni.getSystemInfoSync();
this.$refs.calling.startRemoteView({
    userId: self.remoteUserId,
    rect: {
        x: 0, 
        y: 0, 
        w: windowWidth / 4, 
        h: windowHeight / 4
    }
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

可以通过rect指定视频显示的区域,x、y代表左上角坐标,w和h代表宽度和高度。

步骤六: 实现多人通话

  1. 发起方:多人视频/语音通话需要调用 groupCall() 函数,并传入用户列表(userIdList)、群组 IM ID(groupId)、通话类型(type),其中 userIdList 为必填参数,groupId 为选填参数,type 为通话类型可以填写0或者1。
  2. 接收端:通过监听器监听setCallingListener#onInvited事件回调能够接收到此呼叫请求,其中参数列表就是发起方填入的参数列表,callType 参数为通话类型,您可以通过此参数启动相应的界面。
  3. 接收端:收到回调后可以调用 accept() 方法接听此次通话,也可以选择用 reject() 方法拒绝通话。
  4. 如果超过一定时间(默认30s)没有回复,接收方监听器会收到setCallingListener#onCallingTimeOut的事件回调,发起方监听器会收到setCallingListener#onNoResp回调。通话发起方在多个接收均未应答时 hangup() ,每个接收方监听器均会收到setCallingListener#onCallingCancel回调。
  5. 如果需要离开当前多人通话可以调用 hangup() 方法。
  6. 如果通话中有用户中途加入或离开,那么其他用户监听器均会接收到setCallingListener#onUserEnter或setCallingListener#onUserLeave回调。

groupCall({params}, ret) 群组邀请通话

params:

参数 含义
userIdList 邀请Id列表
type 通话类型:1视频/2语音
groupId 群Id
var self = this;
this.$refs.calling.groupCall({
    userIdList: self.userIdList,
    type: self.type,
    groupId: self.groupId
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

hangup({}, ret) 挂断当前通话

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

更多功能

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

  • 摄像头控制(内测)
  • 音频控制(内测)
  • 更多事件回调

trtcLiveRoom视频互动直播

腾讯云实时语音, 提供互动直播的功能,包括直播、互动连麦、主播 PK、低延时观看、弹幕聊天等 在互动直播场景下的相关能力。

技术支持

原生模块本身使用复杂,再加上腾讯云音视频功能强大,造成接入难度不小。 建议使用前先联系我们的客服,协助接入。 我们的客服微信: ruanyunkeji001或ruanyunkeji002

接口列表

函数 功能
init 初始化
setLiveRoomListener 设置监听器
login 登录
setSelfProfile 修改个人信息
startCameraPreview 开启摄像头预览
createRoom 创建房间
startPublish 开始推流
getRoomInfos 获取房间信息
enterRoom 进入房间
startPlay 播放远端视频画面
requestJoinAnchor 观众请求连麦
responseJoinAnchor 主播处理连麦请求
requestRoomPK 主播请求跨房PK
responseRoomPK 主播响应跨房PK请求
quitRoomPK 退出跨房PK
sendRoomTextMsg 在房间中广播文本消息
sendRoomCustomMsg 发送自定义消息

快速开始

步骤一: 腾讯云配置

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

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

  1. 点击应用管理许可证

    • 如果还没有,可以点击"创建应用"
    • 或选择对应的应用, 并复制”SDKAppId“,这个ID保存为配置的文件的sdkAppId;
  2. 点击辅助工具,选择UserSig生成&校验,选择对应的应用的ID,生成userId和userSig

步骤二: 开始使用模块

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

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

data() {
    return {
        playerWidth: 0,
                playerHeight: 0,
                sdkAppId: 1400387416,
                userId: 'test001',
                userSig: 'eJw1zxxxCNMZw_',
                nickName: 'nickname001',
                avatarUrl: '',
                roomId: 1, 
                remoteRoomId: 1,
                streamId: 'stream01',
                roomName: 'room01',
                coverUrl: 'https://tesxxxx11.cos.ap-guangzhou.myqcloud.com/cover001.jpg',
                roomIdList: [1],
                isFront: true,  
                remoteUserId: 'test002',
                // remoteUserId: 'test001',
                reason: 'this is a reason',
                isAgree: true,
                cmd: 'CMD_LIKE',
                msg: 'Hello world'
    }
}
  1. 模块初始化

init({params}, ret) 初始化

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

备注: playerWidth和playerHeight主要用来指定控制显示界面的大小。

步骤三: 设置监听器

setLiveRoomListener({} ret)

ret:

事件名称 事件含义
onAnchorEnter 收到新主播进房通知
onAudienceEnter 收到观众进房通知
onRequestJoinAnchor 主播收到观众连麦请求时的回调
onRequestRoomPK 收到请求跨房PK通知
onRecvRoomTextMsg 收到文本消息
onRecvRoomCustomMsg 收到自定义消息
this.$refs.liveRoom.setLiveRoomListener({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤四: 登录

login({params}, ret)

params:

参数 含义
sdkAppId 应用ID
userId 用户Id
userSig 用户签名
var self = this;
    this.$refs.liveRoom.login({
        sdkAppId: self.sdkAppId,
        userId: self.userId,
        userSig: self.userSig
    }, ret => {
        uni.showToast({
            title: JSON.stringify(ret),
            icon: "none"
        });
});

步骤五: 主播端开播

  1. 主播登录后,可以调用setSelfProfile设置自己的昵称和头像。
  2. 主播在开播前可先调用startCameraPreview开启摄像头预览,也可以配置美颜相关功能进行美颜设置。
  3. 主播调整美颜效果后,可以调用createRoom创建新的直播间。
  4. 主播调用startPublish开始推流。

主播端开播

setSelfProfile({params}, ret) 修改个人信息

params:

参数 含义
userName 昵称
avatarUrl 头像地址
var self = this;
self.$refs.liveRoom.setSelfProfile({
    userName: self.userName,
    avatarUrl: self.avatarUrl
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

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

params:

参数 含义
isFront 是否为前置摄像头
rect 显示区域
var self = this;
this.$refs.liveRoom.startCameraPreview({
    isFront: self.isFront,
    rect: {
        x: 0, 
        y: 0, 
        w: self.playerWidth,
        h: self.playerHeight
    }
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

createRoom({params}, ret) 创建房间(主播调用)

params:

参数 含义
roomId 房间标识,需要由您分配并进行统一管理
roomName 房间名称
coverUrl 房间封面图片url
var self = this;
self.$refs.liveRoom.createRoom({
    roomId: self.roomId,
    roomName: self.roomName, 
    coverUrl: self.coverUrl
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

startPublish({params}, ret) 开始直播(推流),适用于以下场景

  • 主播开播的时候调用
  • 观众开始连麦时调用

params:

参数 含义
streamId 用于绑定直播CDN的streamID
var self = this;
this.$refs.liveRoom.startPublish({
    streamId: self.streamId
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤六: 观众端观看

  1. 观众端执行登录后,可以调用setSelfProfile设置自己的昵称和头像。
  2. 观众端向业务后台获取最新的直播房间列表。
  3. 观众端调用getRoomInfos获取房间的详细信息,该信息是在主播端调用createRoom创建直播间时设置的简单描述信息。
  4. 观众选择一个直播间,调用enterRoom并传入房间号即可进入该房间。
  5. 调用startPlay并传入主播的 userId 开始播放。
    • 若直播间列表已包含主播端的 userId 信息,观众端可直接调用startPlay并传入主播的 userId 即可开始播放;
    • 若在进房前暂未获取主播的 userId,观众端在进房后会收到主播setLiveRoomListener#onAnchorEnter的事件回调,该回调中携带主播的 userId 信息,调用startPlay即可播放。

观众端观看

getRoomInfos 获取房间列表的详细信息

params:

参数 含义
roomIdList 房间号列表
var self = this;
this.$refs.liveRoom.getRoomInfos({
    roomIdList: self.roomIdList
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

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

params:

参数 含义
roomId 房间标识
var self = this;
self.$refs.liveRoom.enterRoom({
    roomId: self.roomId,
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

startPlay({params}, ret) 播放远端视频画面,可以在普通观看和连麦场景中调用

params:

参数 含义
userId 需要观看的用户Id
rect 显示区域
var self = this;
this.$refs.liveRoom.startPlay({
    userId: self.remoteUserId,
    rect: {
        x: 0, 
        y: 0,
        w: self.playerWidth / 2,
        h: self.playerHeight / 2
    }
}, ret => {
        uni.showToast({
            title: JSON.stringify(ret),
            icon: "none"
        });
});

步骤七: 观众与主播连麦

  1. 观众端调用requestJoinAnchor向主播端发起连麦请求。
  2. 主播端会收到setLiveRoomListener#onRequestJoinAnchor(即有观众请求与您连麦)的事件通知。
  3. 主播端可以通过调用responseJoinAnchor决定是否接受来自观众端的连麦请求。
  4. 主播端会收到返回结果,该结果通知会携带来自主播端的处理结果。
  5. 如果主播同意连麦请求,观众端可调用startCameraPreview开启本地摄像头,随后调用startPublish启动观众端的推流。
  6. 主播端会在观众端启动通知后收到 setLiveRoomListener#onAnchorEnter (即另一路音视频流已到来)通知,该通知会携带观众端的 userId。
  7. 主播端调用startPlay即可看到连麦观众的画面。

观众与主播连麦

requestJoinAnchor 观众请求连麦

params:

参数 含义
reason 连麦原因
var self = this;
this.$refs.liveRoom.requestJoinAnchor({
    reason: self.reason
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

responseJoinAnchor 主播处理连麦请求

params:

参数 含义
userId 观众Id
isAgree 是否同意
reason 同意/拒绝连麦的原因描述
var self = this;
this.$refs.liveRoom.responseJoinAnchor({
    userId: self.remoteUserId,
    isAgree: self.isAgree, 
    reason: self.reason
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤八:主播与主播 PK

  1. 主播 A 调用requestRoomPK向主播 B 发起 PK 请求。
  2. 主播 B 会收到setLiveRoomListener#onRequestRoomPK回调通知。
  3. 主播 B 调用responseRoomPK决定是否接受主播 A 的 PK 请求。
  4. 主播 B 接受主播 A 的请求,等待setLiveRoomListener#onAnchorEnter通知,调用startPlay显示主播 A。
  5. 主播 A 收到responseCallback回调通知,PK 请求是否被同意。
  6. 主播 A 请求被同意,等待setLiveRoomListener#onAnchorEnter通知,调用startPlay显示主播 B。

主播与主播PK

requestRoomPK({params}, ret) 主播请求跨房PK

params:

参数 含义
roomId 被邀约房间Id
userId 被邀约主播Id
var self = this;
this.$refs.liveRoom.requestRoomPK({
    roomId: self.remoteRoomId,
    userId: self.remoteUserId
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

responseRoomPK({params}, ret) 主播响应跨房PK请求

params:

参数 含义
userId 发起PK请求的主播Id
isAgree 是否同意
reason 同意/拒绝PK的原因描述
var self = this;
this.$refs.liveRoom.responseRoomPK({
    userId: self.remoteUserId,
    isAgree: self.isAgree, 
    reason: self.reason
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤九:实现文字聊天和弹幕消息

  • 通过sendRoomTextMsg可以发送普通的文本消息,所有在该房间内的主播和观众均可以收到setLiveRoomListener#onRecvRoomTextMsg回调。 即时通信 IM 后台有默认的敏感词过滤规则,被判定为敏感词的文本消息不会被云端转发。

sendRoomTextMsg({params}, ret) 在房间中广播文本消息,一般用于弹幕聊天

params:

参数 含义
msg 文本消息
var self = this;
this.$refs.liveRoom.sendRoomTextMsg({
    msg: self.msg
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});
  • 通过sendRoomCustomMsg可以发送自定义(信令)的消息,所有在该房间内的主播和观众均可以收到setLiveRoomListener#onRecvRoomCustomMsg回调。 自定义消息常用于传输自定义信令,例如用于点赞消息的发送和广播。、

sendRoomCustomMsg({params}, ret) 发送自定义文本消息

params:

参数 含义
cmd 命令字,由开发者自定义,主要用于区分不同消息类型
msg 文本消息
var self = this;
this.$refs.liveRoom.sendRoomCustomMsg({
    cmd: self.cmd, 
    msg: self.msg
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

更多功能

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

  • 音视频控制(内测)
  • 背景音乐音效(内测)
  • 基础美颜(内测)
  • 更多高级事件

trtcVoiceRoom语音聊天室

该模块提供语音聊天室的功能, 包括麦位管理、低延时语音互动、文字聊天等 TRTC 在语音聊天场景下的相关能力。

技术支持

原生模块本身使用复杂,再加上腾讯云音视频功能强大,造成接入难度不小。 建议使用前先联系我们的客服,我们的客服微信: ruanyunkeji001或ruanyunkeji002

接口列表

函数 功能
init 初始化
setVoiceRoomListener 设置监听器
login 登录
setSelfProfile 设置个人信息
creatRoom 创建房间
getRoomInfoList 获取房间列表的详细信息
enterRoom 进入房间
enterSeat 主动上麦
pickSeat 抱人上麦
kickSeat 踢人下麦
muteSeat 静音/解除静音某个麦位
closeSeat 封禁/解禁某个麦位
leaveSeat 主动下麦
sendInvitation 向用户发送邀请
[acceptInvitation]((#acceptInvitation) 接受邀请
sendRoomTextMsg 在房间中广播文本消息
sendRoomCustomMsg 发送自定义文本消息

快速开始

步骤一: 腾讯云配置

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

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

  1. 点击应用管理许可证

    • 如果还没有,可以点击"创建应用"
    • 或选择对应的应用, 并复制”SDKAppId“,这个ID保存为配置的文件的sdkAppId;
  2. 点击辅助工具,选择UserSig生成&校验,选择对应的应用的ID,生成userId和userSig

步骤二: 开始使用模块

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

参数列表:

data() {
    return {
        playerWidth: 0,
        playerHeight: 0,
        sdkAppId: 1400387416,
        userId: 'test001',
        userSig: 'eJw1zMEOgjAxxxxMXeH3CNMZw_',
        userName: 'username001',
        avatarUrl: '',
        roomId: 919, 
        roomParam: {
            roomName: 'rxxj001',
            seatCount: 7, 
            needRequest: false,
            coverUrl: 'https://test001-12xxxxxud.com/cover001.jpg'
        },
        roomIdList: [1],
        userIdList: ['test001'],
        seatIndex: 0,
        remoteUserId: 'test002',
        isMute: true, 
        isClose: true,
        invitationCmd: 'this is invitation cmd', 
        content: 'this is content',
        identifier: '',
        msg: 'this is a message',
        cmd: 'this is a cmd'
    }
}
  1. 模块初始化

init({params}, ret)

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

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

步骤三: 设置监听

调用setVoiceRoomListener函数注册组件的事件回调通知

setVoiceRoomListener({} ret) 设置监听

ret: 回调名称 含义
onSeatListChang 全量的麦位列表
onAnchorEnterSeat 有成员上麦(主动上麦/主播抱人上麦)
onRoomInfoChange 进房成功后会回调该接口,roomInfo 中的信息在创建房间
onAnchorLeaveSeat 有成员下麦(主动下麦/主播踢人下麦)
onSeatMute 主播禁麦
onSeatClose 主播封麦
this.$refs.voiceRoom.setVoiceRoomListener({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤四: 登录

调用login函数完成组件的登录,请参考下表填写关键参数

login({params}, ret) 登录

params: 参数 含义
sdkAppId 您可以在实时音视频控制台 >【应用管理】> 应用信息中查看 SDKAppID
userId 当前用户的Id
userSig 腾讯云设计的一种安全保护签名
var self = this;
    this.$refs.voiceRoom.login({
        sdkAppId: self.sdkApp Id,
        userId: self.userId, 
        userSig: self.userSig
    }, ret => {
        uni.showToast({
            title: JSON.stringify(ret),
            icon: "none"
        });
});

步骤五: 主播端开播

  1. 主播执行 步骤4 登录后,可以调用setSelfProfile设置自己的昵称和头像。
  2. 主播调用createRoom创建新的语音聊天室,此时传入房间 ID、上麦是否需要房主确认、麦位数等房间属性信息。
  3. 主播创建房间成功后,调用enterSeat进入座位。
  4. 主播收到组件的setVoiceRoomListener#onSeatListChange麦位表变化事件通知,此时可以将麦位表变化刷新到 UI 界面上。
  5. 主播还会收到麦位表有成员进入的setVoiceRoomListener#onAnchorEnterSeat的事件通知,此时会自动打开麦克风采集。

主播端开播

setSelfProfile({params}, ret) 设置个人信息

params: 参数 含义
userName 昵称
avatarUrl 头像地址
var self = this;
self.$refs.voiceRoom.setSelfProfile({
    userName: self.userName,
    avatarUrl: self.avatarUrl
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

creatRoom({params}, ret) 创建房间(主播调用)

params: 参数 含义
roomId 房间标识,需要由您分配并进行统一管理
roomParam 房间信息,用于房间描述的信息
var self = this;
this.$refs.voiceRoom.createRoom({
    roomId: self.roomId, 
    roomParam: self.roomParam
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

enterSeat({params}, ret) 主动上麦,主播和观众均可调用

params: 参数 含义
seatIndex 需要上麦的麦位序号
var self = this;
this.$refs.voiceRoom.enterSeat({
    seatIndex: self.seatIndex
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤六: 观众端观看

  1. 观众端执行 步骤4 登录后,可以调用setSelfProfile设置自己的昵称和头像。
  2. 观众端向业务后台获取最新的语音聊天室房间列表。
  3. 观众端调用getRoomInfoList获取房间的详细信息,该信息是在主播端调用createRoom创建语音聊天室时设置的简单描述信息。
  4. 观众选择一个语音聊天室,调用enterRoom并传入房间号即可进入该房间。
  5. 进房后会收到组件的setVoiceRoomListener#onRoomInfoChange房间属性变化事件通知,此时可以记录房间属性并做相应改变,例如 UI 展示房间名、记录上麦是否需要请求主播同意等。
  6. 进房后会收到组件的setVoiceRoomListener#onSeatListChange麦位表变化事件通知,此时可以将麦位表变化刷新到 UI 界面上。
  7. 进房后还会收到麦位表有主播进入的setVoiceRoomListener#onAnchorEnterSeat的事件通知。

观众端观看

getRoomInfoList({params}, ret) 获取房间列表的详细信息,其中房间名称、房间封面是主播在创建 createRoom() 时通过 roomInfo 设置的

params: 参数 含义
roomIdList 房间号列表
var self = this;
this.$refs.voiceRoom.getRoomInfoList({
    roomIdList: self.roomIdList
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

enterRoom({params}, ret) 进入房间(观众调用)

params: 参数 含义
roomId 房间标识
var self = this;
this.$refs.voiceRoom.enterSeat({
    seatIndex: self.seatIndex
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤七: 麦位管理

主播端:

  1. pickSeat传入对应的麦位和观众 userId, 可以抱人上麦,房间内所有成员会收到setVoiceRoomListener#onSeatListChange和setVoiceRoomListener#onAnchorEnterSeat的事件通知。
  2. kickSeat传入对应麦位后,可以踢人下麦,房间内所有成员会收到setVoiceRoomListener#onSeatListChange和setVoiceRoomListener#onAnchorLeaveSeat的事件通知。
  3. muteSeat传入对应麦位后,可以静音/解除静音,房间内所有成员会收到setVoiceRoomListener#onSeatListChange 和 setVoiceRoomListener#onSeatMute 的事件通知。
  4. closeSeat传入对应麦位后,可以封禁/解禁某个麦位,封禁后观众端将不能再上麦,房间内所有成员会收到setVoiceRoomListener#onSeatListChange和setVoiceRoomListener#onSeatClose的事件通知。

主播端

pickSeat({params}, ret) 抱人上麦(主播调用)

params: 参数 含义
seatIndex 需要抱上麦的麦位序号
userId 用户 ID
var self = this;
this.$refs.voiceRoom.pickSeat({
    seatIndex: self.seatIndex, 
    userId: self.userId
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

kickSeat({params}, ret) 踢人下麦(主播调用)

params: 参数 含义
seatIndex 需要踢下麦的麦位序号
var self = this;
this.$refs.voiceRoom.kickSeat({
    seatIndex: self.seatIndex
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

museSeat({params}, ret) 静音/解除静音某个麦位(主播调用)

params: 参数 含义
seatIndex 需要操作的麦位序号
var self = this;
this.$refs.voiceRoom.muteSeat({
    seatIndex: self.seatIndex, 
    isMute: self.isMute
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

closeSeat({params}, ret) 封禁/解禁某个麦位(主播调用)

params: 参数 含义
seatIndex 需要操作的麦位序号
isClose 是否封禁对应的麦位
var self = this;
this.$refs.voiceRoom.closeSeat({
    seatIndex: self.seatIndex, 
        isClose: self.isClose
    }, ret => {
        uni.showToast({
            title: JSON.stringify(ret),
            icon: "none"
        });
});

观众端:

  1. enterSeat传入对应的麦位后,可以进行上麦,房间内所有成员会收到setVoiceRoomListener#onSeatListChange和setVoiceRoomListener#onAnchorEnterSeat的事件通知。
  2. leaveSeat主动下麦,房间内所有成员会收到setVoiceRoomListener#onSeatListChange和setVoiceRoomListener#onAnchorLeaveSeat的事件通知。

观众端

leaveSeat({params}, ret) 主动下麦(观众端和主播均可调用)

var self = this;
this.$refs.voiceRoom.leaveSeat({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤八:邀请信令使用

在 麦位管理 中,观众上下麦、主播抱人上麦都不需要经过对方的同意就可以直接操作。 如果您的 App 需要对方同意才能进行下一步操作的业务流程,那么邀请信令可以提供相应支持。 如果您的观众上麦需要申请:

  1. 观众端调用sendInvitation传入主播的 userId 和业务的自定义命令字等,此时函数会返回一个 inviteId,记录该 inviteId。
  2. 主播端收到setVoiceRoomListener#onReceiveNewInvitation的事件通知,此时 UI 可以弹窗并询问主播是否同意。
  3. 主播选择同意后,调用acceptInvitation并传入 inviteId。
  4. 观众端收到setVoiceRoomListener#onInviteeAccepted的事件通知,调用enterSeat进行上麦。

观众上麦需要申请

sendInvitation({params}, ret) 向用户发送邀请

params: 参数 含义
cmd 业务自定义指令
userId 邀请的用户 ID
content 邀请的内容
var self = this;
this.$refs.voiceRoom.sendInvitation({
    cmd: self.invitationCmd, 
    userId: self.remoteUserId,
    content: self.content
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

acceptInvitation({params}, ret) 接受邀请

params: 参数 含义
identifier 邀请ID
var self = this;
this.$refs.voiceRoom.acceptInvitation({
    identifier: self.identifier
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

如果您的主播需要发送邀请才能抱观众上麦:

  1. 主播端调用sendInvitation传入观众的 userId 和业务的自定义命令字等,此时函数会返回一个 inviteId,记录该 inviteId。
  2. 观众端收到setVoiceRoomListener#onReceiveNewInvitation的事件通知,此时 UI 可以弹窗并询问观众是否同意上麦。
  3. 观众选择同意后,调用acceptInvitation并传入 inviteId。
  4. 主播端收到setVoiceRoomListener#onInviteeAccepted的事件通知,调用pickSeat抱观众上麦。

需要主播发送申请才能抱观众上麦

步骤九:实现文字和弹幕消息

  • 通过sendRoomTextMsg可以发送普通的文本消息,所有在该房间内的主播和观众均可以收到setVoiceRoomListener#onRecvRoomTextMsg回调 即时通信 IM 后台有默认的敏感词过滤规则,被判定为敏感词的文本消息不会被云端转发。

sendRoomTextMsg({params}, ret) 在房间中广播文本消息,一般用于弹幕聊天

params 参数 含义
msg 文本消息
var self = this;
this.$refs.voiceRoom.sendRoomTextMsg({
    msg: self.msg
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});
  • 通过sendRoomCustomMsg可以发送自定义(信令)的消息,所有在该房间内的主播和观众均可以收到onRecvRoomCustomMsg回调。 自定义消息常用于传输自定义信令,例如用于点赞消息的发送和广播。

sendRoomCustomMsg({params}, ret) 发送自定义文本消息

params: 参数 含义
cmd 命令字,由开发者自定义,主要用于区分不同消息类型
msg 文本消息
var self = this;
this.$refs.voiceRoom.sendRoomCustomMsg({
    cmd: self.cmd, 
    msg: self.msg
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

更多功能

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

  • 背景音乐音效
  • 音频控制
  • 更多事件回调

隐私、权限声明

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

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

插件使用腾讯云实时音视频SDK会采集数据,详情可参考:https://cloud.tencent.com/document/product/647/16788

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

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