Docs Overview/
集成 TUIRoom (Flutter)/

集成 TUIRoom (Flutter)

您可以 下载 安装我们的 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 SDK 和 IM 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;
    }
}