tencent cloud

实时音视频

动态与公告
产品动态
产品近期公告
关于 TRTC Live 正式上线的公告
关于TRTC Conference 正式版上线的公告
Conference 商业化版本即将推出
关于多人音视频 Conference 开启内测公告
关于音视频通话 Call 正式版上线的公告
关于腾讯云音视频终端 SDK 播放升级及新增授权校验的公告
关于 TRTC 应用订阅套餐服务上线的相关说明
产品简介
产品概述
基本概念
产品功能
产品优势
应用场景
性能数据
购买指南
计费概述
免费时长说明
月订阅
现收现付
TRTC 逾期与暂停政策
常见问题解答
退款说明
新手指引
Demo 体验
视频通话 SDK
组件介绍
开通服务
跑通 Demo
快速接入
离线唤醒
会话聊天
云端录制
AI 降噪
界面定制
Chat 集成通话能力
更多特性
无 UI 集成
服务端 API
客户端 API
解决方案
错误码表
发布日志
常见问题
视频会议 SDK
组件介绍(TUIRoomKit)
开通服务(TUIRoomKit)
跑通 Demo(TUIRoomKit)
快速接入(TUIRoomKit)
屏幕共享(TUIRoomKit)
预定会议(TUIRoomKit)
会中呼叫(TUIRoomKit)
界面定制(TUIRoomKit)
虚拟背景(TUIRoomKit)
会议控制(TUIRoomKit)
云端录制(TUIRoomKit)
AI 降噪(TUIRoomKit)
会中聊天(TUIRoomKit)
机器人推流(TUIRoomKit)
更多特性(TUIRoomKit)
客户端 API(TUIRoomKit)
服务端 API(TUIRoomKit)
常见问题(TUIRoomKit)
错误码 (TUIRoomKit)
SDK更新日志(TUIRoomKit)
直播与语聊 SDK
Live 视频直播计费说明
组件介绍
开通服务(TUILiveKit)
跑通 Demo
无 UI 集成
UI 自定义
直播监播
视频直播
语聊房
高级功能
客户端 API
服务端 API
错误码
发布日志
常见问题
RTC Engine
开通服务
SDK 下载
API-Example
接入指引
API-参考手册
高级功能
AI 集成
概述
MCP 配置
Skills 配置
集成指南
常见问题
RTC RESTFUL API
History
Introduction
API Category
Room Management APIs
Stream mixing and relay APIs
On-cloud recording APIs
Data Monitoring APIs
Pull stream Relay Related interface
Web Record APIs
AI Service APIs
Cloud Slicing APIs
Cloud Moderation APIs
Making API Requests
Call Quality Monitoring APIs
Usage Statistics APIs
Data Types
Appendix
Error Codes
控制台指南
应用管理
套餐包管理
用量统计
监控仪表盘
开发辅助
解决方案
实时合唱
常见问题
迁移指南
计费相关
功能相关
UserSig 相关
应对防火墙限制相关
缩减安装包体积相关
Andriod 与 iOS 相关
Web 端相关
Flutter 相关
Electron 相关
TRTCCalling Web 相关
音视频质量相关
其他问题
旧版文档
RTC RoomEngine SDK(旧)
集成 TUIRoom (Web)
集成 TUIRoom (Android)
集成 TUIRoom (iOS)
集成 TUIRoom (Flutter)
集成 TUIRoom (Electron)
TUIRoom API 查询
实现云端录制与回放(旧)
监控仪表盘计费(旧)
协议与策略
安全合规认证
安全白皮书
信息安全说明
服务等级协议
苹果隐私策略:PrivacyInfo.xcprivacy
TRTC 政策
隐私协议
数据处理和安全协议
词汇表
文档实时音视频旧版文档集成 TUIRoom (Flutter)

集成 TUIRoom (Flutter)

PDF
聚焦模式
字号
最后更新时间: 2024-09-14 16:38:21
您可以 下载 安装我们的 App 体验多人音视频房间的效果,包括屏幕分享、美颜、低延时会议等 TRTC 在多人音视频房间场景下的相关能力。
说明:
TUIKit 系列组件同时使用了腾讯云 实时音视频 TRTC即时通信 IM 两个基础 PaaS 服务,开通实时音视频后会同步开通即时通信IM服务。即时通信 IM 服务详细计费规则请参见 即时通信 - 价格说明,TRTC 开通会默认关联开通 IM SDK 的体验版,仅支持100个 DAU。

复用 App 的 UI 界面

步骤1:创建新的应用

1. 登录实时音视频控制台,选择 开发辅助 > 快速跑通Demo
2. 输入应用名称,例如 TestMeetingRoom,单击 创建
3. 单击 已下载,下一步 ,跳过此步骤。



注意:
本功能同时使用了腾讯云 实时音视频 TRTC即时通信 IM 两个基础 PaaS 服务,开通实时音视频后会同步开通即时通信 IM 服务。即时通信 IM 属于增值服务,详细计费规则请参见 即时通信 IM 价格说明

步骤2:下载 App 源码

单击进入 TRTCFlutterScenesDemo,Clone 或者下载源码。

步骤3:配置 App 文件

1. 进入修改配置页,根据您下载的源码包,选择相应的开发环境。
2. 找到并打开 /lib/debug/GenerateTestUserSig.dart 文件。
3. 设置 GenerateTestUserSig.dart 文件中的相关参数:
SDKAPPID:默认为PLACEHOLDER,请设置为实际的 SDKAppID。
SECRETKEY:默认为PLACEHOLDER,请设置为实际的密钥信息。



4. 粘贴完成后,单击 已复制粘贴,下一步 即创建成功。
5. 编译完成后,单击 回到控制台概览 即可。
注意:
本文提到的生成 UserSig 的方案是在客户端代码中配置 SECRETKEY,该方法中 SECRETKEY 很容易被反编译逆向破解,一旦您的密钥泄露,攻击者就可以盗用您的腾讯云流量,因此该方法仅适合本地跑通 Demo 和功能调试
正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向 App 的接口,在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig

步骤4:编译运行

注意:
Android 端需要在真机下运行,不支持模拟器调试。
1. 执行 flutter pub get
2. 编译运行调试:
iOS 端
Android 端
1. 使用 XCode(11.0及以上的版本)打开源码目录下的 /ios工程
2. 编译并运行 Demo 工程即可。
1. 执行 flutter run
2. 使用 Android Studio(3.5及以上的版本)打开源码工程,单击 运行 即可。

步骤5:修改 Demo 源代码

源码中的 TRTCMeetingDemo 文件夹包含两个子文件夹 ui 和 model,ui 文件夹中均为界面代码,如下表格列出了各个文件或文件夹及其所对应的 UI 界面,以便于您进行二次调整:
文件或文件夹
功能描述
TRTCMeetingIndex.dart
创建或进入会议界面
TRTCMeetingRoom.dart
视频会议的主界面
TRTCMeetingMemberList.dart
参会人员列表界面
TRTCMeetingSetting.dart
视频会议相关参数设置界面

实现自定义 UI 界面

源码 中的 TRTCMeetingDemo 文件夹包含两个子文件夹 ui 和 model,model 文件夹中包含可重用的开源组件 TRTCMeeting,您可以在 TRTCMeeting.dart 文件中看到该组件提供的接口函数,并使用对应接口实现自定义 UI 界面。



步骤1:集成 SDK

互动直播组件 TRTCMeeting 依赖 TRTC SDKIM SDK,您可以通过配置 pubspec.yaml 自动下载更新。
在项目的 pubspec.yaml 中写如下依赖:
dependencies:
tencent_trtc_cloud: 最新版本号
tencent_im_sdk_plugin: 最新版本号

步骤2:配置权限及混淆规则

iOS 端
Android 端
需要在 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 中。
说明:
若不执行此步,会出现 Android Manifest merge failed 编译失败 问题。

图示



步骤3:导入 TRTCMeeting 组件

拷贝以下目录中的所有文件到您的项目中:
lib/TRTCMeetingDemo/model/

步骤4:创建并登录组件

1. 调用 sharedInstance 接口可以创建一个 TRTCMeeting 组件的实例对象。
2. 调用 registerListener 函数注册组件的事件通知。
3. 调用 login 函数完成组件的登录,请参考下表填写关键参数:
参数名
作用
sdkAppId
您可以在 实时音视频控制台 中查看 SDKAppID。
userId
当前用户的 ID,字符串类型,只允许包含英文字母(a-z、A-Z)、数字(0-9)、连词符(-)和下划线(_)。建议结合业务实际账号体系自行设置。
userSig
腾讯云设计的一种安全保护签名,获取方式请参考 如何计算及使用 UserSig
TRTCMeeting trtcMeeting = TRTCMeeting.sharedInstance();
trtcMeeting.registerListener(onListener);
ActionCallback res = await trtcMeeting.login(
GenerateTestUserSig.sdkAppId,
userId,
GenerateTestUserSig.genTestSig(userId),
);
if (res.code == 0) {
// 登录成功
}


步骤5:创建多人会议

1. 主持人执行 步骤4 登录后,可以调用 setSelfProfile 设置自己的昵称和头像。
2. 主持人调用 createMeeting 创建新的会议房间。
3. 主持人可以调用 startCameraPreview 进行视频画面的采集,也可以调用 startMicrophone 进行声音的采集。
4. 如果主持人有美颜的需求,界面上可以配置美颜调节按钮调用,通过 getBeautyManager 进行美颜设置。
说明:
非企业版 SDK 不支持变脸和贴图挂件功能。



// 1. 主持人设置昵称和头像
trtcMeeting.setSelfProfile('my_name', 'my_avatar');

// 2. 主持人创建会议
ActionCallback res = await trtcMeeting.createMeeting(roomId);
if (res.code == 0) {
// 创建会议成功
// 3. 打开摄像头和音频采集
trtcMeeting.startCameraPreview(true, TRTCCloudVideoViewId);
trtcMeeting.startMicrophone();
// 4. 设置美颜
trtcMeeting.getBeautyManager().setBeautyStyle(TRTCCloudDef.TRTC_BEAUTY_STYLE_PITU);
trtcMeeting.getBeautyManager().setBeautyLevel(6);
}


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

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



// 1. 参会成员设置昵称和头像
trtcMeeting.setSelfProfile('my_name', 'my_avatar');

// 2. 参会成员调用 enterMeeting 进入会议房间
ActionCallback res = await trtcMeeting.enterMeeting(roomId);
if (res.code == 0) {
// 进入会议成功
// 3. 打开摄像头和音频采集
trtcMeeting.startCameraPreview(true, TRTCCloudVideoViewId);
trtcMeeting.startMicrophone();
// 4. 设置美颜
trtcMeeting.getBeautyManager().setBeautyStyle(TRTCCloudDef.TRTC_BEAUTY_STYLE_PITU);
trtcMeeting.getBeautyManager().setBeautyLevel(6);
}

// 5. 参会成员收到其他成员摄像头打开的通知,开始播放
trtcMeeting.registerListener(onListener);
onListener(TRTCMeetingDelegate type, param) {
switch (type) {
case TRTCMeetingDelegate.onUserVideoAvailable:
if (param['available']) {
trtcMeeting.startCameraPreview(
param['userId'],
TRTCCloudDef.TRTC_VIDEO_STREAM_TYPE_BIG,
TRTCCloudVideoViewId
);
} else {
trtcMeeting.stopRemoteView(
param['userId'],
TRTCCloudDef.TRTC_VIDEO_STREAM_TYPE_BIG
);
}
break;
}
}


步骤7:屏幕分享

1. 屏幕分享功能需向系统申请悬浮窗权限,需要您在 UI 中实现具体的逻辑。
2. 调用 startScreenCapture,传入编码参数和录屏过程中的悬浮窗即可实现屏幕分享功能,具体信息请参见 TRTC SDK
3. 会议中其他成员会收到 onUserVideoAvailable 的事件通知。
注意:
屏幕分享和摄像头采集是两个互斥的操作,如果需要打开屏幕分享功能,请先调用 stopCameraPreview 关闭摄像头采集。详情请参见 TRTC SDK
await trtcMeeting.stopCameraPreview();
trtcMeeting.startScreenCapture(
videoFps: 10,
videoBitrate: 1600,
videoResolution: TRTCCloudDef.TRTC_VIDEO_RESOLUTION_1280_720,
videoResolutionMode: TRTCCloudDef.TRTC_VIDEO_RESOLUTION_MODE_PORTRAIT,
appGroup: iosAppGroup,
);


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

通过 sendRoomTextMsg 可以发送普通的文本消息,所有在该会议内的参会人员均可以收到 onRecvRoomTextMsg 回调。即时通信 IM 后台有默认的敏感词过滤规则,被判定为敏感词的文本消息不会被云端转发。
// 发送端:发送文本消息
trtcMeeting.sendRoomTextMsg('Hello Word!');
// 接收端:监听文本消息
trtcMeeting.registerListener(onListener);
onListener(TRTCMeetingDelegate type, param) {
switch (type) {
case TRTCMeetingDelegate.onRecvRoomTextMsg:
print('收到来自' + param['userName'] + '的消息:' + param['message']);
break;
}
}

通过 sendRoomCustomMsg 可以发送自定义(信令)的消息,所有在该会议内的参会人员均可以收到 onRecvRoomCustomMsg 回调。自定义消息常用于传输自定义信令,例如用于禁言之类的会场控制等。
// 发送端:您可以通过自定义 cmd 来区分禁言通知
// eg: "CMD_MUTE_AUDIO"表示禁言通知
trtcMeeting.sendRoomCustomMsg('CMD_MUTE_AUDIO', '1');
// 接收端:监听自定义消息
trtcMeeting.registerListener(onListener);
onListener(TRTCMeetingDelegate type, param) {
switch (type) {
case TRTCMeetingDelegate.onRecvRoomCustomMsg:
if (param['command'] == 'CMD_MUTE_AUDIO') {
// 收到禁言通知
print('收到来自' + param['userName'] + '的禁言通知:' + param['message']);
trtcMeeting.muteLocalAudio(message == '1');
}
break;
}
}



帮助和支持

本页内容是否解决了您的问题?

填写满意度调查问卷,共创更好文档体验。

文档反馈