腾讯云实时音视频Smart - DCloud 插件市场

更新记录

6.0.2（2023-12-14）

新增setLocalRenderParams接口(内测);

6.0.1（2023-10-25）

新增setRemoteRenderParams接口(内测);

6.0.0（2023-02-19）

升级IM SDK至版本7.0.3754;
升级TRTC SDK至版本10.9.0.13092;
升级calling基础库;

平台兼容性

Android	Android CPU类型	iOS
适用版本区间：4.4 - 14.0	armeabi-v7a：未测试，arm64-v8a：未测试，x86：未测试	适用版本区间：9 - 17

原生插件通用使用流程：

购买插件，选择该插件绑定的项目。
在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
开发完毕后正式云打包

付费原生插件目前不支持离线打包。
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原生插件配置”->”云端插件“列表中删除该插件重新选择

腾讯云视频语音通话

该模块实现腾讯云视频语音通话, 支持视频通话和语音通话, 提供类似微信的视频通话和语音通话功能，适用多人、双人视频语音模式、网络会议、在线医疗、视频客服、金融双录等场景。

接口模式(纯API)

扫描下方二维码，安装示例代码，快速体验插件功能:

Android	iOS	联系我们

扫码添加技术支持(微信号: ruanyunkeji006)，开通测试账号。

UI模式

扫描下方二维码，安装示例代码，快速体验插件功能:

Android	iOS	联系我们

扫码添加技术支持(微信号: ruanyunkeji006)，开通测试账号。

定制UI

扫码添加我们技术支持(微信号: ruanyunkeji006)，联系定制UI

技术支持

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

联系我们	微信号	更多功能
	ruanyunkeji006	基础美颜音效设置

API 接口文档

使用教程

快速开始

步骤1: 集成插件

加载插件

插件名称: RY-TencentTrtcSmart-Calling

在使用前，你需要先加载插件。

<RY-TencentTrtcSmart-Calling class="trtc" ref="calling" v-bind:style = "{ width: playerWidth, height: playerHeight }" @onClick="onClick"></RY-TencentTrtcSmart-Calling>

说明:

可以通过修改width和height参数值的大小，来修改视频容器的大小。

腾讯云配置

注册或登录腾讯云账号，实名认证后，点击实时音视频，点击"创建应用"创建实时音视频应用。

步骤2: 开始使用插件

使用RY-TencentTrtcSmart-Calling，需要调用 init 初始化模块，才可以调用其他的接口功能。

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

步骤3: 设置监听

调用 setCallingListener 可以设置监听，视频通话会返回相关的事件回调。

this.$refs.calling.setCallingListener({}, ret => {
    console.log(ret);
});

步骤4: 登录

调用 login 完成组件的登录，其中几个关键参数的填写请参考下表

参数名	作用
sdkAppId	您可以在实时音视频控制台中查看 sdkAppId
user	当前用户的Id，字符串类型，只允许包含英文字母（a-z 和 A-Z）、数字（0-9）、连词符-和下划线 _
userSig	如何计算 UserSig

this.$refs.calling.login({
    sdkAppId: sdkAppId,
    userId: userId,
    userSig: userSig
}, ret => {
    console.log(ret);
});

步骤5: 实现1V1通话

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

// 1.监听回调
this.$refs.calling.setCallingListener({}, ret => {
    // 接听/拒绝
    // 此时 B 如果也登录了IM系统，会收到 onInvited 回调
    // 可以调用 TRTCCalling的accept方法接受 / TRTCCalling的reject 方法拒绝
    if (ret && ret.hasOwnProperty('eventType')) {
        if ('onInvited' == ret.eventType) {
            this.$refs.calling.accept({}, ret => {
                console.log(ret);
            });
        }
        // 2.观看对方的画面
        // 由于 A 打开了摄像头，B 接受通话后会收到 onUserVideoAvailable 回调
        if ('onUserVideoAvailable' == ret.eventType) {
            if (ret.available) {
                this.$refs.calling.startRemteView({
                    userId: ret.userId,
                    rect: {
                        x: 0, 
                        y: 0, 
                        w: self.playerWidth, 
                        h: self.playerHeight
                    }
                }, ret => {
                    console.log(ret);
                });
                // 就可以看到对方画面了
            } else {
                // 停止渲染画面
                this.$refs.calling.stopRemoteView({
                    userId: ret.userId
                }, ret => {
                    console.log(ret);
                });
            }
        }
    }
});

// 3.调用组件的其他功能函数发起通话或挂断等
// 注意：必须在登录后才可以正常调用
// 发起视频通话
this.$refs.calling.call({
    userId: 'test002',
    type: 1
}, ret => {
    console.log(ret);
});
// 挂断
this.$refs.calling.hangup({}, ret => {
    console.log(ret);
});
// 拒绝
this.$refs.calling.reject({}, ret => {
    console.log(ret);
});

步骤6: 实现多人通话

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

说明:

接口 groupCall 中的 groupId 参数是 IM 中的群组Id，如果填写该参数，那么通话请求消息的信令消息是通过群Id发送出去的，这种消息广播方式比较简单可靠。如果不填写，那么 RY-TencentTrtcCalling 组件会采用单发消息逐一通知。

this.$refs.calling.groupCall({
    userIdList: [
        'test002'
    ],
    type: 1,
    groupId: 'group001'
}, ret => {
    console.log(ret);
});

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

腾讯云视频互动直播

腾讯云实时语音, 提供互动直播的功能，包括直播、互动连麦、主播 PK、低延时观看、弹幕聊天等在互动直播场景下的相关能力，可用于秀场直播、互动大班课、互动小班课和直播答题等场景。

快速接入

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

加载插件

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

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

插件名称为: RY-TencentTrtcSmart-LiveRoom，使用标签

<RY-TencentTrtcSmart-LiveRoom ref="liveRoom" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentTrtcSmart-LiveRoom>

备注:

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

腾讯云配置

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

点击应用管理，进入应用列表；
点击 "创建应用"，填入相关信息，创建新应用; 如果使用已有应用，则跳过这步;
点击"应用信息"，进入应用详情；
在"应用信息"标签卡中，点击"SDKAppID"后面的复制按钮，复制SDKAppId，并保存，对应为后文中的"sdkAppId"；

步骤2: 插件初始化

必须调用 init 函数后，才可以使用插件个各个功能。

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

步骤3: 设置监听器

直播的相关信息通过 setLiveRoomListener 返回的事件回调来反馈，有关事件回调中含有事件的详细相关说明和参数。

this.$refs.liveRoom.setLiveRoomListener({}, ret => {
    console.log(ret);
});

步骤4: 登录

执行 login 登录后，您才可以执行各个直播相关的操作。

this.$refs.liveRoom.login({
    sdkAppId: self.sdkAppId,
    userId: self.userId,
    userSig: self.userSig
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤5: 主播端开播

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

主播端开播

// 1.主播设置昵称和头像
self.$refs.liveRoom.setSelfProfile({
    userName: 'A',
    avatarUrl: 'faceUrl'
}, ret => {
    console.log(ret);
});
// 2.主播开播前预览并设置美颜参数
this.$refs.liveRoom.startCameraPreview({
    isFront: self.isFront,
    rect: {
        x: 0, 
        y: 0, 
        w: self.playerWidth,
        h: self.playerHeight
    }
}, ret => {
    console.log(ret);
});
// 3.主播创建房间
self.$refs.liveRoom.createRoom({
    roomId: 123456789,
    roomName: '测试房间', 
    coverUrl: 'http://xxx.xxx.xxx/xxx.png'
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});
// 4.主播开启推流并将流发布到 CDN
this.$refs.liveRoom.startPublish({
    streamId: 'A_stream'
}, ret => {
    console.log(ret);
});

步骤6: 观众端观看

观众端执行登录后，可以调用 setSelfProfile 设置自己的昵称和头像。
观众端向业务后台获取最新的直播房间列表。

说明：

Demo 中的直播间列表仅做演示使用，直播间列表的业务逻辑千差万别，腾讯云暂不提供直播间列表的管理服务，请自行管理您的直播间列表。

观众端调用 getRoomInfos 获取房间的详细信息，该信息是在主播端调用 createRoom 创建直播间时设置的简单描述信息。

注意：

如果您的直播间列表包含了足够全面的信息，可跳过调用getRoomInfos相关步骤。

观众选择一个直播间，调用 enterRoom 并传入房间号即可进入该房间。
调用 startPlay 并传入主播的 userId 开始播放。
- 若直播间列表已包含主播端的 userId 信息，观众端可直接调用 startPlay 并传入主播的 userId 即可开始播放;
- 若在进房前暂未获取主播的 userId，观众端在进房后会收到主播setLiveRoomListener#onAnchorEnter 的事件回调，该回调中携带主播的 userId 信息，调用 startPlay 即可播放。

观众端观看

// 1.假定您从业务后台获取房间列表为 roomIdList
// 2.通过调用 getRoomInfos 获取房间的详细信息
this.$refs.liveRoom.getRoomInfos({
    roomIdList: roomIdList
}, ret => {
    console.log(ret);
    // 获取到房间详细信息后，您可以在主播列表页面展示主播昵称、头像等相关信息
});
// 3.选择房间 roomId 进入
self.$refs.liveRoom.enterRoom({
    roomId: roomId,
}, ret => {
    console.log(ret);
});

this.$refs.liveRoom.setLiveRoomListener({}, ret => {
    if (ret.hasOwnProperty('eventType') {
        // 4.观众收到主播进房通知，开始播放
        if ('onAnchorEnter' == ret.eventType) {
            // 5.观众播放主播画面
            this.$refs.liveRoom.startPlay({
                userId: ret.userId,
                rect: {
                    x: 0, 
                    y: 0,
                    w: self.playerWidth / 2,
                    h: self.playerHeight / 2
                }
            }, ret => {
                console.log(ret);
            });
        }
    });
});

步骤7: 观众与主播连麦

观众端调用 requestJoinAnchor 向主播端发起连麦请求。
主播端会收到setLiveRoomListener#onRequestJoinAnchor（即有观众请求与您连麦）的事件通知。
主播端可以通过调用 responseJoinAnchor 决定是否接受来自观众端的连麦请求。
主播端会收到返回结果，该结果通知会携带来自主播端的处理结果。
如果主播同意连麦请求，观众端可调用 startCameraPreview 开启本地摄像头，随后调用 startPublish 启动观众端的推流。
主播端会在观众端启动通知后收到 setLiveRoomListener#[onAnchorEnter])(https://helpyougo.com/web/userpage/documents?id=74&menuid=onAnchorEnter02) （即另一路音视频流已到来）通知，该通知会携带观众端的 userId。
主播端调用 startPlay 即可看到连麦观众的画面。

观众与主播连麦

// 观众端：
// 1.观众端发起连麦请求
this.$refs.liveRoom.requestJoinAnchor({
    reason: self.reason
}, ret => {
    // 4.主播接受了观众的请求
    if (ret.agree) {
        // 5.观众启动预览，开启推流
        this.$refs.liveRoom.startCameraPreview({
            isFront: true,
            rect: {
                x: 0, 
                y: 0, 
                w: self.playerWidth,
                h: self.playerHeight
            }
        }, ret => {
            console.log(ret);
        });
        this.$refs.liveRoom.startPublish({
            streamId: 'stream002'
        }, ret => {
            console.log(ret);
        });
    }
});

// 主播端：
// 2.主播端收到连麦请求
this.$refs.liveRoom.setLiveRoomListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        if ('onRequestJoinAnchor' == ret.eventType) {
            // 3.同意对方的连麦请求
            this.$refs.liveRoom.responseJoinAnchor({
                userId: ret.userInfo.userId,
                isAgree: true, 
                reason: 'This is a reason'
            }, ret => {
                console.log(ret);
            });
        }
        // 6.主播收到连麦观众的上麦通知
        if ('onAnchorEnter' == ret.eventType) {
            // 7.主播播放观众画面
            this.$refs.liveRoom.startPlay({
                userId: ret.userId,
                rect: {
                    x: 0, 
                    y: 0,
                    w: self.playerWidth,
                    h: self.playerHeight
                }
            }, ret => {
                console.log(ret);
            });
        }
    }
});

步骤8：主播与主播 PK

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

主播与主播PK

// 主播 A:
// 主播 A 创建12345的房间
this.$refs.liveRoom.createRoom({
    roomId: 12345,
    roomName: 'roomA', 
    coverUrl: 'http://xxx.xxx.xxx/coverA.png'
}, ret => {
    console.log(ret);
})
// 1.主播 A 向主播 B 发起 PK 请求
this.$refs.liveRoom.requestRoomPK({
    roomId: 54321,
    userId: 'B'
}, ret => {
    console.log(ret);
    // 5.收到是否同意的回调
    if (ret.agree) {
    }
});

this.$refs.liveRoom.setLiveRoomListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        // 4.主播 B 收到主播 A 进房的通知，播放主播 A 的画面
        if ('onAnchorEnter' == ret.eventType) {
            this.$refs.liveRoom.startPlay({
                userId: ret.userId,
                rect: {
                    x: 0, 
                    y: 0,
                    w: self.playerWidth,
                    h: self.playerHeight
                }
            }, ret => {
                console.log(ret);
            });
        }
    }
});

// 主播 B：
// 主播 B 创建54321的房间
this.$refs.liveRoom.createRoom({
    roomId: 54321,
    roomName: 'roomB', 
    coverUrl: 'http://xxx.xxx.xxx/coverA.png'
}, ret => {
    console.log(ret);
});

this.$refs.liveRoom.setLiveRoomListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        // 2.主播 B 收到主播 A 的消息
        if ('onRequestRoomPK' == ret.eventType) {
            // 3.主播 B 回复主播 A 接受请求
            this.$refs.liveRoom.responseRoomPK({
                    userId: ret.userInfo.userId,
                    isAgree: true, 
                    reason: 'This is a reason'
                }, ret => {
                    console.log(ret);
                });
        }
        // 4.主播 B 收到主播 A 进房的通知，播放主播 A 的画面
        if ('onAnchorEnter' == ret.eventType) {
            this.$refs.liveRoom.startPlay({
                userId: ret.userId,
                rect: {
                    x: 0, 
                    y: 0,
                    w: self.playerWidth,
                    h: self.playerHeight
                }
            }, ret => {
                console.log(ret);
            });
        }
    }
});

responseRoomPK 主播响应跨房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"
    });
});

步骤9：实现文字聊天和弹幕消息

通过 sendRoomTextMsg 可以发送普通的文本消息，所有在该房间内的主播和观众均可以收到setLiveRoomListener#onRecvRoomTextMsg 回调。

即时通信 IM 后台有默认的敏感词过滤规则，被判定为敏感词的文本消息不会被云端转发。

// 发送端：发送文本消息
this.$refs.liveRoom.sendRoomTextMsg({
    msg: 'Hello World!'
}, ret => {
    console.log(ret);
});

// 接收端：监听文本消息
this.$refs.liveRoom.setLiveRoomListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        if ('onRecvRoomTextMsg' == ret.eventType) {
            console.log('收到来自ret.fromUser.userName的文本消息:ret.message')
        }
    }
});

通过 sendRoomCustomMsg 可以发送自定义（信令）的消息，所有在该房间内的主播和观众均可以收到setLiveRoomListener#onRecvRoomCustomMsg 回调。

自定义消息常用于传输自定义信令，例如用于点赞消息的发送和广播。、

// 发送端：您可以通过自定义Cmd来区分弹幕和点赞消息
// eg:"CMD_DANMU"表示弹幕消息，"CMD_LIKE"表示点赞消息
this.$refs.liveRoom.sendRoomCustomMsg({
    cmd: 'CMD_DANMU', 
    msg: 'Hello world'
}, ret => {
    console.log(ret);
});
this.$refs.liveRoom.sendRoomCustomMsg({
    cmd: 'CMD_LIKE', 
    msg: ''
}, ret => {
    console.log(ret);
});

this.$refs.liveRoom.setLiveRoomListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        // 接收端：监听自定义消息
        if ('onRecvRoomCustomMsg' == ret.eventType) {
            if ('CMD_DANMU' == ret.command) {
                console.log('收到来自ret.fromUser.userName的文本消息:ret.message')
            }
            if ('CMD_LIKE' == ret.command) {
                console.log('ret.fromUser.userName给您点了个赞！')
            }
        }
    }
});

腾讯云多人视频会议

腾讯云多人视频会议, 提供多人视频会议功能，包括屏幕分享、美颜、低延时会议等在多人视频会议场景下的相关能力。

快速开始

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

加载插件

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

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

插件名称为: RY-TencentTrtcSmart-Meeting，使用标签对来引用Component类型插件。

<RY-TencentTrtcSmart-Meeting ref="meeting" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentTrtcSmart-Meeting>

腾讯云配置

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

点击应用管理，进入应用列表；
点击 "创建应用"，填入相关信息，创建新应用; 如果使用已有应用，则跳过这步;
点击"应用信息"，进入应用详情；
在"应用信息"标签卡中，点击"SDKAppID"后面的复制按钮，复制SDKAppId，并保存，对应为后文中的"sdkAppId"；

步骤2: 开始使用模块

init 初始化模块之后，方可以调用各个接口功能

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

步骤3: 设置监听器

调用设置监听器 setMeetingListener，监听会议的事件回调

this.$refs.meeting.setMeetingListener({}, ret => {
    console.log(ret);
});

步骤4: 登录

调用 login 函数完成组件的登录，请填写以下关键参数:

参数名	作用
sdkAppId	您可以在实时音视频控制台中查看 sdkAppId
userId	当前用户的Id，字符串类型，只允许包含英文字母（a-z、A-Z）、数字（0-9）、连词符 - 和下划线 _
userSig	用户签名

this.$refs.meeting.login({
    sdkAppId: 1423xx38,
    userId: 'test001',
    userSig: 'jkwic1xxx2mn12'
}, ret => {
    console.log(ret);
});

步骤5: 创建多人会议

主持人执行步骤4 登录后，可以调用 setSelfProfile 设置自己的昵称和头像。
主持人调用 setMeetingListener 可以进行事件监听，调用 createMeeting 创建新的会议房间。
主持人可以调用 startCameraPreview 进行视频画面的采集，也可以调用 startMicrophone 进行声音的采集。

说明：非企业版 SDK 不支持变脸和贴图挂件功能，如果有企业版需求，请联系我们上方的技术客服。

创建多人会议

// 1.主播设置昵称和头像
this.$refs.meeting.setSelfProfile({
    userName: 'A',
    avatarUrl: 'faceUrl'
}, ret => {
    console.log(ret);
});

// 2.主播创建房间
this.$refs.meeting.createMeeting({
    roomId: self.roomId
}, ret => {
    if (ret.status) {
        // 创建房间成功
        this.$refs.meeting.startCameraPreview({
            isFront: true,
            rect: {
                x: 0, 
                y: 0, 
                w: self.playerWidth,
                h: self.playerHeight
                }
        }, ret => {
            console.log(ret);
        });
        this.$refs.meeting.startMicrophone({}, ret => {
            console.log(ret);
        });
    }
});

步骤6：参会成员进入多人会议

参会成员执行步骤4 登录后，可以调用 setSelfProfile 设置自己的昵称和头像。
参会成员调用 enterMeeting 并传入会议房间号即可进入会议房间。
参会成员可以调用 startCameraPreview 进行视频画面的采集，调用 startMicrophone 进行声音的采集。
如果有其他的参会成员打开了摄像头，会收到 onUserVideoAvailable 的事件，此时可以调用 startRemoteView 并传入 userId 开始播放。

成员进入

// 1.参会成员设置昵称和头像
this.$refs.meeting.setSelfProfile({
    name: 'A', 
    avatarUrl: 'faceUrl'
}, ret => {
    console.log(ret);
});

// 2.enterMeeting 函数实现
this.$refs.meeting.enterMeeting({
    roomId: 1234
}, ret => {
    if (ret.status) {
        this.$refs.meeting.startCameraPreview({
            rect: {
                x: 0, 
                y: 0, 
                w: self.playerWidth, 
                h: self.playerHeight
            }
        }, ret => {
            console.log(ret);
        });
        this.$refs.meeting.startMicrophone({}, ret => {
            console.log(ret);
        });
    } else {
        console.log('进入会议失败: ' + ret.msg);
    }
});

this.$refs.meeting.setMeetingListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        //收到回调，并调用 startRemoteView，传入 userId 开始播放
        if ('onUserVideoAvailable' == ret.eventType && ret.available) {
            this.$refs.meeting.startRemoteView({
                userId: ret.userId, 
                rect: {
                    x: 0, 
                    y: 0, 
                    w: self.playerWidth / 2, 
                    h: self.playerHeight / 2
                }
            }, ret => {
                console.log(ret);
            });
        } else {
            this.$refs.meeting.stopRemoteView({
                userId: ret.userId
            }, ret => {
                console.log(ret);
            });
        }
    }
});

步骤7：屏幕分享

调用 startScreenCapture，传入编码参数即可实现屏幕分享功能，具体信息请参见示例代码。
会议中其他成员会收到 onUserVideoAvailable 的事件通知。

注意：

屏幕分享和摄像头采集是两个互斥的操作，如果需要打开屏幕分享功能，请先调用stopCameraPreview 关闭摄像头采集。

this.$refs.meeting.startScreenCapture({
    videoEncParam: self.videoEncParam, 
}, ret => {
    console.log(ret);
});

步骤8：实现文字聊天和禁言消息

通过 sendRoomTextMsg 可以发送普通的文本消息，所有在该房间内的主播和观众均可以收到 onRecvRoomTextMsg 回调。

即时通信 IM 后台有默认的敏感词过滤规则，被判定为敏感词的文本消息不会被云端转发。

// 发送端：发送文本消息
this.$refs.meeting.sendRoomTextMsg({
    msg: 'Hello World!'
}, ret => {
    console.log(ret);
});

this.$refs.metting.setMeetingListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        // 接收端：监听文本消息
        if ('onRecvRoomTextMsg' == ret.eventType) {
            console.log('收到来自:' + ret.userInfo.userId + '的消息' + ret.message);
        }
    }
});

通过 sendRoomCustomMsg 可以发送自定义（信令）的消息，所有在该房间内的主持人和与会观众均可以收到 onRecvRoomCustomMsg 回调。

自定义消息常用于传输自定义信令，例如用于禁言之类的会场控制等。

// 发送端：您可以通过自定义 Cmd 来区分禁言通知
// eg:"CMD_MUTE_AUDIO"表示禁言通知
this.$refs.meeting.sendRoomCustomMsg({
    cmd: 'CMD_MUTE_AUDIO',
    msg: '1'
}, ret => {
    console.log(ret);
});

this.$refs.metting.setMeetingListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        // 接收端：监听自定义消息
        if ('onRecvRoomCustomMsg' == ret.eventType) {
            console.log('收到来自:' + ret.userInfo.userId + '的禁言通知' + ret.message);
        }
    }
});

腾讯云语音聊天室

该模块提供语音聊天室的功能, 包括麦位管理、低延时语音互动、文字聊天等 TRTC 在语音聊天场景下的相关能力，可以用于语聊房、语音电台、在线 K 歌等语音互动直播场景。

快速开始

步骤1: 插件加载

加载插件

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

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

插件名称为: RY-TencentTrtcSmart-VoiceRoom，使用标签

<RY-TencentTrtcSmart-VoiceRoom ref="voiceRoom" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentTrtcSmart-VoiceRoom>

腾讯云配置

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

点击应用管理，进入应用列表；
点击 "创建应用"，填入相关信息，创建新应用; 如果使用已有应用，则跳过这步;
点击"应用信息"，进入应用详情；
在"应用信息"标签卡中，点击"SDKAppID"后面的复制按钮，复制SDKAppId，并保存，对应为后文中的"sdkAppId"；

步骤2: 插件初始化

必须调用 init 函数后，才可以使用插件个各个功能。

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

步骤3: 设置监听

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

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

步骤4: 登录

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

this.$refs.voiceRoom.login({
    sdkAppId: self.sdkApp Id,
    userId: self.userId, 
    userSig: self.userSig
}, ret => {
        console.log(ret);
});

步骤5: 主播端开播

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

主播端开播

// 1.房主设置昵称和头像
self.$refs.voiceRoom.setSelfProfile({
    userName: self.userName,
    avatarUrl: self.avatarUrl
}, ret => {
    // 结果回调
    console.log(ret);
});

// 2.房主端创建房间
this.$refs.voiceRoom.createRoom({
    roomId: self.roomId, 
    roomParam: self.roomParam
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

// 创建房间成功后开始占座
this.$refs.voiceRoom.enterSeat({
    seatIndex: 0
}, ret => {
    if (ret.status) {
        // 房主占座成功
    } else {
        // 房主占座失败
    }
});

// 3.占座成功后，收到 onSeatListChange 事件通知
this.$refs.voiceRoom.setVoiceRoomListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        if ('onSeatListChange' == ret.eventType) {
            // 刷新您的麦位列表
        }

        // 4. 收到 onAnchorEnterSeat 事件通知
        if ('onAnchorEnterSeat' == ret.eventType) {
            // 处理房主上麦事件
        }
    }
});

步骤6: 观众端观看

观众端执行步骤4 登录后，可以调用 setSelfProfile 设置自己的昵称和头像。
观众端向业务后台获取最新的语音聊天室房间列表。

说明：

语音聊天室列表仅做演示使用，语音聊天室列表的业务逻辑千差万别，腾讯云暂不提供语音聊天室列表的管理服务，请自行管理您的语音聊天室列表。

观众端调用 getRoomInfoList 获取房间的详细信息，该信息是在主播端调用 createRoom 创建语音聊天室时设置的简单描述信息。

注意：

如果您的语音聊天室列表包含了足够全面的信息，可跳过调用 getRoomInfoList 相关步骤。

观众选择一个语音聊天室，调用 enterRoom 并传入房间号即可进入该房间。
进房后会收到插件的 setVoiceRoomListener#onRoomInfoChange 房间属性变化事件通知，此时可以记录房间属性并做相应改变，例如 UI 展示房间名、记录上麦是否需要请求主播同意等。
进房后会收到组件的 setVoiceRoomListener#onSeatListChange 麦位表变化事件通知，此时可以将麦位表变化刷新到 UI 界面上。
进房后还会收到麦位表有主播进入的 setVoiceRoomListener#onAnchorEnterSeat 的事件通知。

观众端观看

// 1.听众设置昵称和头像
self.$refs.voiceRoom.setSelfProfile({
    userName: self.userName,
    avatarUrl: self.avatarUrl
}, ret => {
    // 结果回调
    console.log(ret);
});

// 2.假定您从业务后台获取房间列表为 roomIdList
// 3.通过调用 getRoomInfoList 获取房间的详细信息
this.$refs.voiceRoom.getRoomInfoList({
    roomIdList: self.roomIdList
}, ret => {
    // 获取结果，此时可以刷新UI
    console.log(ret);
});

// 4.选择语音聊天室后，传入 roomId 进入房间
this.$refs.voiceRoom.enterSeat({
    seatIndex: self.seatIndex
}, ret => {
    // 进入房间结果回调
    console.log(ret);
    if (ret.status) {
        // 进房成功
    }
});

步骤7: 麦位管理

主播端：

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

主播端

观众端:

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

观众端

麦位操作后的事件通知顺序如下：callback > onSeatListChange > onAnchorEnterSeat 等独立事件。

// case1: 房主抱人上1号麦位
this.$refs.voiceRoom.pickSeat({
    seatIndex: 1, 
    userId: '123'
}, ret => {
    // 结果回调
    console.log(ret);
});

this.$refs.voiceRoom.setVoiceRoomListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        // 3.收到 onSeatListChange 回调，刷新您的麦位列表
        if ('onSeatListChange' == ret.eventType) {
            // 刷新的麦位列表
        }
        // 4.单个麦位变化的通知，可以在这里判断听众是不是真的上麦成功
        if ('onAnchorEnterSeat' == ret.eventType) {
            // 处理上麦事件
        }
    }
});

// case2: 听众主动上2号麦位
this.$refs.voiceRoom.enterSeat({
    seatIndex: 2
}, ret => {
    // 上麦结果回调
    console.log(ret);
});

this.$refs.voiceRoom.setVoiceRoomListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        // 3.收到 onSeatListChange 回调，刷新您的麦位列表
        if ('onSeatListChange' == ret.eventType) {
            // 刷新的麦位列表
        }
        // 4.单个麦位变化的通知，可以在这里判断是不是自己并进行相应处理
        if ('onAnchorEnterSeat' == ret.eventType) {
            // 处理上麦事件
        }
    }
});

步骤8：邀请信令使用

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

如果您的观众上麦需要申请：

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

观众上麦需要申请

// 听众(test002)视角
// 1.调用 sendInvitation，请求上1号麦位
this.$refs.voiceRoom.sendInvitation({
    cmd: 'ENTER_SEAT', 
    userId: 'test001',
    content: '1'
}, ret => {
    // 发送结果回调
    console.log(ret);
});

// 2.收到邀请的同意请求, 正式上麦
this.$refs.voiceRoom.setVoiceRoomListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        if ('onInviteeAccepted' == ret.eventType) {
            if (ret.invitee == 'test002') {
                this.$refs.voiceRoom.enterSeat({
                    seatIndex: 1
                }, ret => {
                    console.log(ret);
                });
            }
        }
    }
});

// 房主端test001视角
// 1.房主收到请求
this.$refs.voiceRoom.setVoiceRoomListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        if ('onReceiveNewInvitation' == ret.eventType) {
            if (cmd == 'ENTER-SEAT') {
                // 2.房主同意听众请求
                this.$refs.voiceRoom.acceptInvitation({
                    inviteId: ret.inviteId
                }, ret => {
                    console.log(ret);
                });
            }
        }
    }
})

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

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

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

步骤9：实现文字和弹幕消息

通过 sendRoomTextMsg 可以发送普通的文本消息，所有在该房间内的主播和观众均可以收到 setVoiceRoomListener#onRecvRoomTextMsg 回调

即时通信 IM 后台有默认的敏感词过滤规则，被判定为敏感词的文本消息不会被云端转发。

this.$refs.voiceRoom.sendRoomTextMsg({
    msg: 'This is a msg'
}, ret => {
    console.log(ret);
});

通过 sendRoomCustomMsg 可以发送自定义（信令）的消息，所有在该房间内的主播和观众均可以收到 onRecvRoomCustomMsg 回调。

自定义消息常用于传输自定义信令，例如用于点赞消息的发送和广播。

this.$refs.voiceRoom.sendRoomCustomMsg({
    cmd: 'This is a cmd', 
    msg: 'This is a msg'
}, ret => {
    console.log(ret);
});

腾讯云实时音视频Smart 视频电话 语音电话 互动直播 语音聊天室

更新记录

6.0.2（2023-12-14）

6.0.1（2023-10-25）

6.0.0（2023-02-19）

平台兼容性

原生插件通用使用流程：

腾讯云视频语音通话

接口模式(纯API)

UI模式

定制UI

技术支持

快速开始

步骤1: 集成插件

步骤2: 开始使用插件

步骤3: 设置监听

步骤4: 登录

步骤5: 实现1V1通话

步骤6: 实现多人通话

腾讯云视频互动直播

快速接入

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

步骤2: 插件初始化

步骤3: 设置监听器

步骤4: 登录

步骤5: 主播端开播

步骤6: 观众端观看

步骤7: 观众与主播连麦

步骤8：主播与主播 PK

步骤9：实现文字聊天和弹幕消息

腾讯云多人视频会议

快速开始

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

步骤2: 开始使用模块

步骤3: 设置监听器

步骤4: 登录

步骤5: 创建多人会议

步骤6：参会成员进入多人会议

步骤7：屏幕分享

步骤8：实现文字聊天和禁言消息

腾讯云语音聊天室

快速开始

步骤1: 插件加载

步骤2: 插件初始化

步骤3: 设置监听

步骤4: 登录

步骤5: 主播端开播

步骤6: 观众端观看

步骤7: 麦位管理

步骤8：邀请信令使用

步骤9：实现文字和弹幕消息

更多功能

隐私、权限声明

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

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

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

腾讯云即时通信IM

腾讯云直播

腾讯云视频通话

阿里云点播播放器

阿里云存储OSS

Modal title

腾讯云实时音视频Smart 视频电话语音电话互动直播语音聊天室