更新记录

6.1.1（2023-07-08）

  1. 修复module函数getRoomInfos参数不一致bug(内测);

6.1.0（2023-03-07）

  1. 升级trtcLiveRoom基础库;
  2. 新增浮窗点击事件(内测);

6.0.0（2023-02-21）

  1. 升级IM SDK至6.9.3560;
  2. 升级TRTC SDK至10.9.0.13092;
查看更多

平台兼容性

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

原生插件通用使用流程：

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

腾讯云视频互动直播

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

接口模式(纯API)

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

Android iOS 联系我们
Android示例代码 iOS示例代码 技术支持

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

UI模式

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

Android iOS 联系我们
Android示例代码 iOS示例代码 技术支持

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

定制UI

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

技术支持

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

联系我们 微信号 更多功能
联系我们
ruanyunkeji006
fileId播放
人声设置
背景音乐

API 接口文档

使用教程

快速接入

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

  • 加载插件

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

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

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

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

备注:

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

  • 腾讯云配置
  1. 注册或登录腾讯云账号，并进行实名认证；
  2. 点击实时音视频，点击"创建应用"创建实时音视频应用。
  • 生成签名

手动签名点击 UserSig生成&校验 选择对应的sdkAppId的应用，输入userId，获取对应的用户签名userSig；

如果您需要【自动签名】，联系我们（微信号: ruanyunkeji006）获取。

步骤2: 插件初始化

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

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

步骤3: 设置监听器

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

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

步骤4: 登录

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

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

步骤5: 主播端开播

  1. 主播登录后，可以调用 setSelfProfile 设置自己的昵称和头像。
  2. 主播在开播前可先调用 startCameraPreview 开启摄像头预览，也可以配置美颜相关功能进行美颜设置。
  3. 主播调整美颜效果后，可以调用 createRoom 创建新的直播间。
  4. 主播调用 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: 观众端观看

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

说明：

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

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

注意：

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

  1. 观众选择一个直播间，调用 enterRoom 并传入房间号即可进入该房间。
  2. 调用 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: 观众与主播连麦

  1. 观众端调用 setLinkMicListener 设置连麦监听，然后 requestJoinAnchor 向主播端发起连麦请求。
  2. 主播端会收到setLiveRoomListener#onRequestJoinAnchor（即有观众请求与您连麦）的事件通知。
  3. 主播端可以通过调用 responseJoinAnchor 决定是否接受来自观众端的连麦请求。
  4. 观众端连麦监听会收到回调通知，该结果通知会携带来自主播端的处理结果。
  5. 如果主播同意连麦请求，观众端可调用 startCameraPreview 开启本地摄像头，随后调用 startPublish 启动观众端的推流。
  6. 主播端会在观众端启动通知后收到 setLiveRoomListener#onAnchorEnter （即另一路音视频流已到来）通知，该通知会携带观众端的 userId。
  7. 主播端调用 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

  1. 主播 A 调用 setRoomPKListener 设置跨房PK监听，然后调用 requestRoomPK 向主播 B 发起 PK 请求。
  2. 主播 B 会收到 setLiveRoomListener#onRequestRoomPK 回调通知。
  3. 主播 B 调用 responseRoomPK 决定是否接受主播 A 的 PK 请求。
  4. 主播 B 接受主播 A 的请求，等待setLiveRoomListener#onAnchorEnter 通知，调用 startPlay 显示主播 A。
  5. 主播 A 的跨房PK监听收到回调通知，PK 请求是否被同意。
  6. 主播 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')) {
        // 6.主播 A 收到主播 B 进房的通知，播放主播 B 的画面
        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')
        }
    }
});

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

// 发送端：您可以通过自定义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给您点了个赞！')
            }
        }
    }
});

更多功能

  • 基础美颜
  • 人声设置
  • 背景音乐

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

技术支持



微信号: ruanyunkeji006

隐私、权限声明

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/43181

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

无

评论列表 撰写评论
加载更多...
插件问答 我要提问

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

加载更多...