更新记录

3.1.0(2021-04-16)

  1. 新增主播端画面旋转接口(内测);
  2. 修复底层依赖库部分情况下会冲突的问题;

3.0.0(2021-04-06)

  1. 修复连麦部分情况下会闪退的问题;
  2. 修复跨房PK会闪退的bug;
查看更多

平台兼容性

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


腾讯云连麦互动

该模块可以实现腾讯云连麦互动,支持主播创建新的直播间开播,观众进入直播间观看、主播和观众进行视频连麦互动、两个不同房间的主播 PK 互动,每一个直播间都有一个不限制房间人数的聊天室,支持发送各种文本消息和自定义消息,自定义消息可用于实现弹幕、点赞和礼物。

技术支持

如果希望获取更多高级功能或者技术支持,可以联系我们的客服微信:

ruanyunkeji001和ruanyunkeji002

接口列表

函数 功能
init 初始化
setLiveRoomListener 设置监听器
startPreview 开启本地视频的预览画面
login 登录
getRoomList 获取房间列表
createRoom 创建房间
exitRoom 离开房间
startLocalPreview 开启本地视频的预览画面
startRemoteView 启动渲染远端视频画面
enterRoom 进入房间
sendRoomTextMsg 发送文本消息
sendRoomCustomMsg 发送自定义文本消息
requestJoinAnchor 观众请求连麦
responseJoinAnchor 主播处理连麦请求
joinAnchor 进入连麦状态
quitJoinAnchor 观众退出连麦
requestRoomPK 请求跨房 PK
responseRoomPK 响应跨房 PK 请求
quitRoomPK 退出跨房 PK

使用教程

步骤一: 使用模块

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

加载模块

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

模块名称为: RY-TencentLiveRoom,使用标签

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

参数配置

data() {
    return {
        playerWidth: 0,
                playerHeight: 0,
                licence: {
                    url: 'http://license.voxxxxxLiveSDK.licence',
                    key: '76efcfxxxxx5be1ee9'
                },
                sdkAppId: 1400455277,
                userId: 'test001',
                userName: 'userName001', 
                userSig: 'eJyrVgrxCdYxxxxxwCf3zJA',
                userAvatar: 'https://jcq-1251049911.cos.ap-guangzhou.myqcloud.com/1.jpg',
                nickname: 'nickname001', 
                avatarUrl: 'https://jcq-1251049911.cos.ap-guangzhou.myqcloud.com/1.jpg',
                index: 0, 
                count: 3,
                roomInfo: "this is room info",
                remoteUserId: "test002", 
                reason: 'this is a reason',
                isAgree: true, 
                anchor: {
                    userId: 'test002'
                },
                isFront: true,
                isMirror: true,
                cmd: 'this is a cmd',
                msg: 'this is a msg',
    }
}

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

步骤二: 给 SDK 配置 License 授权

获取 License,您会获得两个字符串:一个字符串是 licenseURL,另一个字符串是解密 key,如上面步骤中data的licence的数据。

在您的 App 调用相关功能之前,需要设置有效的Licence,不然无法调用相关组件功能,你可以先联系我们技术客服微信:

ruanyunkeji001或ruanyunkeji002

获取Licence支持以及相关Licence详细配置步骤。

步骤三: 初始化推流组件并监听

首先创建一个TXLivePushConfig对象。该对象可以指定一些高级配置参数,但一般情况下我们不建议您操作该对象,因为我们已经在其内部配置好了所有需要校调的参数。之后再创建一个TXLivePush对象,该对象负责完成推流的主要工作。

init({params}, ret) 初始化

params:

参数 含义
licence 许可证
var self = this;
this.$refs.liveRoom.init({
    licence: self.licence,
    docPath: plus.io.convertLocalFileSystemURL('_doc')
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

setLiveRoomListener({params}, ret) 设置监听器

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

step4: 在应用管理中添加一个新的应用

调用 tencentLivePusher 中的startPreview接口可以开启当前手机的摄像头预览。您需要为startPreview 接口提供一个用于显示视频画面的坐标和区域。

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

params:

参数 含义
rect 预览显示的坐标和区域
var self = this;
this.$refs.livePusher.startPreview({
    rect: {
        x: 0, 
        y: 0, 
        w: self.playerWidth,
        h: self.playerHeight
    }
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

Step5. 登录房间服务

tencentLiveRoom 单靠一个终端的组件无法独自运行,它依赖一个后台服务为其实现房间管理和状态协调,这个后台服务我们称之为房间服务(RoomService)。而要使用这个房间服务,tencentLiveRoom 就需要先进行登录(login)。

login({params}, ret) 登录

params:

参数 含义
sdkAppId 当前应用的appId
userId 当前用户在您的帐号系统中的Id
userName 用户名(昵称)
userAvatar 用户头像的url地址
userSig 登录签名
var self = this;
this.$refs.livePusher.start({
    rtmpUrl: self.rtmpUrl
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
})

说明:

  • 由于 login 是一个需要跟后台服务器通讯的过程,建议等待 login 函数的异步回调后再调用其他函数。
  • 后台接口限制并发为每秒100次请求,若您有高并发请求请提前 联系我们 处理,避免影响服务调用。

Step6. 获取房间列表(非必需)

说明: 如果您希望使用自己的房间列表,该步骤可跳过,但需要您在 Step7 中自行指定 roomId。为避免房间号重复,建议使用主播的 userId 作为 roomId。

不管是主播还是观众都需要有一个房间列表,调用 tencentLiveRoom 的 getRoomList 接口可以获得一个简单的房间列表:

  • 当主播通过createRoom创建一个新房间时,房间列表中会相应地增加一条新的房间信息。
  • 当主播通过exitRoom退出房间时,房间列表中会移除该房间。

列表中每个房间都有对应的 roomInfo,由主播通过createRoom创建房间时传入,为提高扩展性,建议将 roomInfo 定义为 JSON 格式。

getRoomList({params}, ret) 获取房间列表

参数 含义
index 房间开始索引,从0开始计算
count 希望后台返回的房间个数
var self = this;
this.$refs.liveRoom.getRoomList({
    index: self.index, 
    count: self.count
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

exitRoom({}, ret) 离开房间

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

Step7. 主播开播

主播开播前,需要先调用 tencentLiveRoom 中的 startLocalPreview 接口开启本地摄像头预览,该函数需要传入 view 对象用于显示摄像头的视频影像,这期间 tencentLiveRoom 会申请摄像头使用权限。同时,主播也可以对着摄像头调整美颜和美白的具体效果。 然后调用 createRoom 接口,tencentLiveRoom 会在后台的房间列表中新建一个直播间,同时主播端会进入直播状态。

startLocalPreview({params}, ret) 设置视频编码质量

params:

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

createRoom({params}, ret) 创建房间

参数 含义
roomId 房间标识,推荐做法是用主播的 userId 作为房间的 roomId
roomInfo 房间信息,用于房间描述的信息,允许使用 JSON 格式作为房间信息
var self = this;
this.$refs.liveRoom.createRoom({
    roomId: self.roomId, 
    roomInfo: self.roomInfo
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

说明: 为避免房间号重复,建议使用主播的 userId 作为 roomId。如果您不手动设置 roomId,后台将会自动为您分配一个 roomId。 如果您想要管理房间列表,可以先由您的服务器确定 roomId,再通过 createRoom、enterRoom 和 exitRoom 接口使用 tencentLiveRoom 的连麦能力。

Step8. 观看直播

观众通过 tencentLiveRoom 中的 enterRoom 接口可以进入直播间观看视频直播,enterRoom 函数需要传入 view 对象坐标和大小用于显示直播流的视频影像。

进入房间后,通过调用 getAudienceList 接口可以获取观众列表。如果少于30名观众,列表会展示全部观众信息。如果多于30名观众,列表仅展示新进入房间的30名观众的信息。

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

params:

参数 含义
roomId 房间标识
rect 画面的坐标和大小
var self = this;
this.$refs.liveRoom.enterRoom({
    roomId: self.roomId, 
    rect: {
        x: 0, 
        y: 0, 
        w: self.playerWidth, 
        h: self.playerHeight
    }
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

Step9. 弹幕消息

tencentLiveRoom 包装了 IM 的消息发送接口,您可以通过 sendRoomTextMsg 函数发送普通的文本消息(用于弹幕),也可以通过 sendRoomCustomMsg 发送自定义消息(用于点赞,送花等等)。

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

注意: 腾讯云 IM 的直播聊天室,每秒钟最多可以收取40条的消息。如果您以高于40条/次的速度刷新 UI 上的弹幕界面,很容易导致 CPU 100%,请注意控制刷新频率,避免高频刷新。

10. 观众与主播连麦

步骤 角色 详情
第一步 观众 观众调用requestJoinAnchor()向主播发起连麦请求。
第二步 主播 主播会收到setLiveRoomListener#onRequestJoinAnchor通知,之后可以展示一个 UI 提示,询问主播要不要接受连麦。
第三步 主播 主播调用responseJoinAnchor()确定是否接受观众的连麦请求。
第四步 观众 setLiveRoomListener.RequestJoinAnchorCallback回调通知,得知请求是否被同意。
第五步 观众 观众如果请求被同意,则调用 startLocalPreview() 开启本地摄像头,如果 App 还没有取得摄像头和麦克风权限,会触发 UI 提示用户授权摄像头和麦克风的使用权限。
第六步 观众 观众调用joinAnchor()正式进入连麦状态。
第七步 主播 当观众进入连麦状态后,主播就会收到setLiveRoomListener#onAnchorEnter通知。
第八步 主播 主播调用startRemoteView()就可以看到连麦观众的视频画面。
第九步 观众 如果直播间里已经有其他观众正在跟主播进行连麦,那么新加入的这位连麦观众也会收到onAnchorJoin通知,用于展示(startRemoteView())其他连麦者的视频画面。
第九步 主播或观众 主播或观众随时都可以通过quitJoinAnchor()接口退出连麦状态,同时,主播还可以通过kickoutJoinAnchor()接口移除连麦观众。

requestJoinAnchor({params}, ret) 观众请求连麦

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

responseJoinAnchor({params}, ret) 主播处理连麦请求

参数 含义
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"
    });
});

joinAnchor({params}, ret) 进入连麦状态

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

startRemoteView({params}, ret) 启动渲染远端视频画面

params:

参数 含义
anchor 对方的用户信息
rect 画面坐标和大小
var self = this;
this.$refs.liveRoom.startRemoteView({
    anchor: self.anchor,
    rect: {
        x: 0, 
        y: 0, 
        w: self.playerWidth, 
        h: self.playerHeight
    }
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

quitJoinAnchor({}, ret) 观众退出连麦

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

kickoutJoinAnchor({params}, ret) 主播踢除连麦观众

参数 含义
userId 连麦小主播 Id
var self = this;
this.$refs.liveRoom.kickoutJoinAnchor({
    userId: self.remoteUserId
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

说明: tencentLiveRoom 在设计上最多支持10人同时连麦,但出于兼容低端 Android 终端和实际体验效果的考虑,建议将同时连麦人数控制在6人以下。

Step11. 主播间跨房间 PK

主播间跨房 PK 常被用于活跃直播平台的氛围,提升打赏频率,对平台的主播人数有一定要求。目前常见的主播 PK 方式是将所有愿意 PK 的主播“圈”在一起,再后台进行随机配对,每次 PK 都有一定时间要求,例如5分钟,超过后即结束 PK 状态。 由于我们暂时未在 tencentLiveRoom 的房间服务里加入配对逻辑,因此目前仅提供了基于客户端 API 接口的简单 PK 流程,您可以通过即时通信 IM 服务的消息下发 REST API 接口,由您的配对服务器,将配对开始、配对结束等指令发送给指定的主播,从而实现服务器控制的目的。如果采用此种控制方式,下述步骤中的第三步实现为默认接受即可。

步骤 角色 详情
第一步 主播 A 主播 A 调用requestRoomPK()向主播 B 发起连麦请求。
第二步 主播 B 主播 B 会收到 setLiveRoomListener#onRequestRoomPK(AnchorInfo)回调通知。
第三步 主播 B 主播 B 调用responseRoomPK()确定是否接受主播 A 的 PK 请求。如果采用服务器配对的 PK 方案,此处可以默认接受,不需要由主播 B 来决策。
第四步 主播 B 主播 B 在接受主播 A 的请求后,即可调用startRemoteView()来显示主播 A 的视频画面。
第五步 主播 A 主播 A 会收到setLiveRoomListene.RequestRoomPKCallback回调通知,可以得知请求是否被同意,如果请求被同意,则可以调用startRemoteView()显示主播 B 的视频画面。
第六步 主播 A或 B 主播 A 或 B 均可以通过调用quitRoomPK()接口结束 PK 状态。

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

params:

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

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

params:

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

quitRoomPK({}, ret) 退出跨房 PK

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

更多功能

联系我们获取更能多增值功能 技术客服微信: ruanyunkeji001或ruanyunkeji002

  • 背景音乐(内测)
  • 基础美颜(内测)
  • 声音控制(内测)

隐私、权限声明

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

Android: "android.permission.INTERNET", "android.permission.ACCESS_NETWORK_STATE", "android.permission.ACCESS_WIFI_STATE", "android.permission.SYSTEM_ALERT_WINDOW", "android.permission.WRITE_EXTERNAL_STORAGE", "android.permission.READ_EXTERNAL_STORAGE" iOS: 无

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

插件使用腾讯云移动直播SDK会采集数据,详情可参考: https://cloud.tencent.com/document/product/454/14606

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

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