集成 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 界面，以便于您进行二次调整：

实现自定义 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：配置权限及混淆规则

<key>NSMicrophoneUsageDescription</key>
<string>授权麦克风权限才能正常语音通话</string>

步骤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;
      }
  }