如需快速接入视频互动直播功能,您可以直接基于我们提供的 Demo 进行修改适配,也可以使用我们提供的 TRTCLiveRoom 组件并实现自定义 UI 界面。
说明
TUIKit 系列组件同时使用了腾讯云 实时音视频 TRTC 和 即时通信 IM 两个基础 PaaS 服务,开通实时音视频后会同步开通即时通信IM服务。即时通信 IM 服务详细计费规则请参见 即时通信 - 价格说明,TRTC 开通会默认关联开通 IM SDK 的体验版,仅支持100个 DAU。
复用 Demo 的 UI 界面
步骤1:创建新的应用
1. 登录实时音视频控制台,选择 开发辅助 >快速跑通Demo。
2. 输入应用名称,例如
TestLive
,单击 创建。注意
本功能同时使用了腾讯云 实时音视频 TRTC 和 即时通信 IM 两个基础 PaaS 服务,开通实时音视频后会同步开通即时通信 IM 服务。 即时通信 IM 属于增值服务,详细计费规则请参见 即时通信 IM 价格说明。
步骤2:下载 SDK 和 Demo 源码
1. 根据实际业务需求下载 SDK 及配套的 Demo 源码。
2. 下载完成后,单击 已下载,下一步。
![](https://qcloudimg.tencent-cloud.cn/image/document/ae39a4b83d56c91bdda59143c2505da6.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/ae39a4b83d56c91bdda59143c2505da6.png)
步骤3:配置 Demo 工程文件
1. 进入修改配置页,根据您下载的源码包,选择相应的开发环境。
2. 找到并打开
/example/lib/debug/GenerateTestUserSig.dart
文件。3. 设置
GenerateTestUserSig.dart
文件中的相关参数:SDKAPPID:默认为PLACEHOLDER,请设置为实际的 SDKAppID。
SECRETKEY:默认为PLACEHOLDER,请设置为实际的密钥信息。
![](https://qcloudimg.tencent-cloud.cn/image/document/4a0f2dff06cade58f7ebfbc71400359b.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/4a0f2dff06cade58f7ebfbc71400359b.png)
4. 粘贴完成后,单击 已复制粘贴,下一步 即创建成功。
5. 编译完成后,单击 回到控制台概览 即可。
注意
本文提到的生成 UserSig 的方案是在客户端代码中配置 SECRETKEY,该方法中 SECRETKEY 很容易被反编译逆向破解,一旦您的密钥泄露,攻击者就可以盗用您的腾讯云流量,因此该方法仅适合本地跑通 Demo 和功能调试。
正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向 App 的接口,在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。
步骤4:编译运行
注意
Android 端需要在真机下运行,不支持模拟器调试。
1. 执行
flutter pub get
。2. 编译运行调试:
1. 执行
flutter run
。2. 使用 Android Studio(3.5及以上的版本)打开源码工程,单击 运行 即可。
1. 使用 XCode(11.0及以上的版本)打开源码目录下的
/ios工程
。2. 编译并运行 Demo 工程即可。
步骤5:修改 Demo 源代码
源码中的 TRTCLiveRoom 文件夹包含两个子文件夹 ui 和 model,ui 文件夹中均为界面代码,如下表格列出了各个文件或文件夹及其所对应的 UI 界面,以便于您进行二次调整:
文件或文件夹 | 功能描述 |
base | UI 使用的基础类。 |
list | 列表页和创建房间页。 |
room | 主房间页面,包括主播和观众两种界面。 |
实现自定义 UI 界面
源码 中的 TRTCLiveRoom 文件夹包含两个子文件夹 ui 和 model,model 文件夹中包含可重用的开源组件 TRTCLiveRoom,您可以在
TRTCLiveRoom.dart
文件中看到该组件提供的接口函数,并使用对应接口实现自定义 UI 界面。注意:
3.0以下的 Flutter 版本可使用。
步骤1:集成 SDK
在项目的
pubspec.yaml
中写如下依赖:dependencies:tencent_trtc_cloud: 最新版本号tencent_im_sdk_plugin: 最新版本号
步骤2:配置权限及混淆规则
需要在
Info.plist
中加入对相机和麦克风的权限申请:<key>NSMicrophoneUsageDescription</key><string>授权麦克风权限才能正常语音通话</string>
1. 打开
/android/app/src/main/AndroidManifest.xml
文件。2. 将
xmlns:tools="http://schemas.android.com/tools"
加入到 manifest 中。3. 将
tools:replace="android:label"
加入到 application 中。说明
![图示](https://qcloudimg.tencent-cloud.cn/image/document/b660727fac0a38b87246d6afd026b292.png)
![图示](https://qcloudimg.tencent-cloud.cn/image/document/b660727fac0a38b87246d6afd026b292.png)
步骤3:导入 TRTCLiveRoom 组件
拷贝以下目录中的所有文件到您的项目中:
lib/TRTCLiveRoom/model/
步骤4:创建并登录组件
1. 调用
sharedInstance
接口可以创建一个 TRTCLiveRoom 组件的实例对象。2. 调用
registerListener
函数注册组件的事件通知。3. 调用
login
函数完成组件的登录,请参考下表填写关键参数:参数名 | 作用 |
sdkAppId | |
userId | 当前用户的 ID,字符串类型,只允许包含英文字母(a-z、A-Z)、数字(0-9)、连词符(-)和下划线(_)。建议结合业务实际账号体系自行设置。 |
userSig | |
useCDNFirst | 用于设置观众观看方式。true 表示普通观众通过 CDN 观看,计费便宜但延时较高。false 表示普通观众通过低延时观看,计费价格介于 CDN 和连麦之间,但延迟可控制在1s以内。 |
CDNPlayDomain |
步骤5:主播端开播
1. 主播执行 步骤4 登录后,可以调用
setSelfProfile
设置自己的昵称和头像。2. 主播在开播前可先调用
startCameraPreview
开启摄像头预览,界面上可以配置美颜调节按钮调用,通过 getBeautyManager
进行美颜设置。说明
非企业版 SDK 不支持变脸和贴图挂件功能。
3. 主播调整美颜效果后,可以调用
createRoom
创建新的直播间。4. 主播调用
startPublish
开始推流。如需支持 CDN 观看,请在 login 时传入的 TRTCLiveRoomConfig
参数中指定 useCDNFirst
和 CDNPlayDomain
并在 startPublish
时指定直播拉流用的 streamID。![](https://qcloudimg.tencent-cloud.cn/image/document/fdc70898c43294abed559a6faa0d149a.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/fdc70898c43294abed559a6faa0d149a.png)
步骤6:观众端观看
1. 观众端执行 步骤4 登录后,可以调用
setSelfProfile
设置自己的昵称和头像。2. 观众端向业务后台获取最新的直播房间列表。
说明
Demo 中的直播间列表仅做演示使用,直播间列表的业务逻辑千差万别,腾讯云暂不提供直播间列表的管理服务,请自行管理您的直播间列表。
3. 观众端调用
getRoomInfos
获取房间的详细信息,该信息是在主播端调用 createRoom
创建直播间时设置的简单描述信息。注意
如果您的直播间列表包含了足够全面的信息,可跳过调用
getRoomInfos
相关步骤。4. 观众选择一个直播间,调用
enterRoom
并传入房间号即可进入该房间。5. 调用
startPlay
并传入主播的 userId 开始播放。若直播间列表已包含主播端的 userId 信息,观众端可直接调用
startPlay
并传入主播的 userId 即可开始播放。若在进房前暂未获取主播的 userId,观众端在进房后会收到主播
onAnchorEnter
的事件回调,该回调中携带主播的 userId 信息,调用 startPlay
即可播放。![](https://qcloudimg.tencent-cloud.cn/image/document/c74a8f2233eeb8a246b932b37976dbc2.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/c74a8f2233eeb8a246b932b37976dbc2.png)
步骤7:观众与主播连麦上下麦
1. 观众端调用
requestJoinAnchor
向主播端发起连麦请求。2. 主播端会收到
TRTCLiveRoomDelegate#onRequestJoinAnchor
(即有观众请求与您连麦)的事件通知。3. 主播端可以通过调用
responseJoinAnchor
决定是否接受来自观众端的连麦请求。4. 观众端会收到
onAnchorAccepted
事件通知,该通知会携带来自主播端的处理结果。5. 如果主播同意连麦请求,观众端可调用
startCameraPreview
开启本地摄像头,随后调用 startPublish
启动观众端的推流。6. 主播端会在观众端启动通知后收到
TRTCLiveRoomDelegate#onAnchorEnter
(即另一路音视频流已到来)通知,该通知会携带观众端的 userId。7. 主播端调用
startPlay
即可看到连麦观众的画面。![](https://qcloudimg.tencent-cloud.cn/image/document/95aa07aca8786db38d75328ca75d6c6a.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/95aa07aca8786db38d75328ca75d6c6a.png)
步骤8:主播与主播 PK
1. 主播 A 调用
requestRoomPK
向主播 B 发起 PK 请求。2. 主播 B 会收到
TRTCLiveRoomDelegate onRequestRoomPK
回调通知。3. 主播 B 调用
responseRoomPK
决定是否接受主播 A 的 PK 请求。4. 主播 B 接受主播 A 的要求,等待
TRTCLiveRoomDelegate onAnchorEnter
通知,调用 startPlay
显示主播 A。5. 主播 A 收到
onRoomPKAccepted
回调通知,PK 请求是否被同意。6. 主播 A 请求被同意,等待
TRTCLiveRoomDelegate onAnchorEnter
通知,调用 startPlay
显示主播 B。![](https://qcloudimg.tencent-cloud.cn/image/document/6212a5486347c3b5b5ce4124f79e38fb.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/6212a5486347c3b5b5ce4124f79e38fb.png)
步骤9:实现文字聊天和弹幕消息
通过
sendRoomTextMsg
可以发送普通的文本消息,所有在该房间内的主播和观众均可以收到 onRecvRoomTextMsg
回调。
即时通信 IM 后台有默认的敏感词过滤规则,被判定为敏感词的文本消息不会被云端转发。// 发送端:发送文本消息trtcLiveCloud.sendRoomTextMsg("Hello Word!");// 接收端:监听文本消息onListenerFunc(type, params) async {switch (type) {case TRTCLiveRoomDelegate.onRecvRoomTextMsg://收到群文本消息,可以用作文本聊天室break;}}
通过
sendRoomCustomMsg
可以发送自定义(信令)的消息,所有在该房间内的主播和观众均可以收到 onRecvRoomCustomMsg
回调。
自定义消息常用于传输自定义信令,例如用于点赞消息的发送和广播。