【新知实验室-TRTC聊天室之Flutter新体验】

听说腾讯云TRTC也出了Flutter版本，正好趁热体验一下聊天室功能。体验还不错，坑比较少。

silence_xz

2011人浏览 · 2022-11-27 19:43:23

silence_xz · 2022-11-27 19:43:23 发布

新知实验室-TRTC聊天室之Flutter新体验

初始TRTC
Flutter新体验
结论
项目地址【仅供参考，欢迎拍砖】

初始TRTC

最早接触TRTC是在两年前了，那时候还在做原生iOS开发；项目中需要使用直播技术；后来公司权衡阿里、腾讯、亚马逊，几个直播产品后，最终选择了使用腾讯的TRTC技术。
印象中比较深的一个原因，记得当时腾讯的SDK中有一个的美颜功能，并且基础版本是免费的，刚好基础版本的功能够用。阿里和亚马逊的直播技术，则需要自己集成美颜功能，自己集成美颜功能当时并不容易（见下图）。
直播技术研究

Flutter新体验

最近已经不怎么做原生开发了，技术栈已经换成Flutter了，听说腾讯TRTC也出了Flutter版本，正好趁热体验一下（也许是Flutter的热度、腾讯的热度、直播的热度，哈哈）。也将遇到的情况记录一下，方便自己和有需要的人来填坑。

准备工作【磨刀不误砍柴工】

登录腾讯云，体验TRTC产品，1000分钟免费体验，够耍的了。
创建应用，保存AppId和秘钥，后面用得着。
下载demo，遇到的问题，可以在demo中找到答案。
Api文档，不多说，很重要。

环境配置【不谈环境配置，就跑项目的都是耍流氓】

environment:
  sdk: ">=2.12.0 <3.0.0"
  flutter: "2.10.5"

创建聊天室【自己动手，开始体验】

如此，便可以根据文档，进行功能开发了。我是自己创建了一个demo，这里需要注意，TRTC不支持模拟器运行。请使用真机开发调试。正好我手里有两台手机，一个安卓、一个iOS，我就搞一个简单的聊天室，一对一。

创建了一个Flutter项目，yaml文件中添加所需插件。

dependencies:
#alert （自己写的）
  my_alert_dialog_package:
    git:
      url: git@gitlab.changshaxiemeng.com:xiemeng/fultter/flutter/my_alert_dialog_package.git
      ref: '1.2.3'
  #弹出提示框
  bot_toast: ^4.0.1
  tencent_trtc_cloud: ^2.4.0
  provider: ^5.0.0
  crypto: ^3.0.1
  dio: ^4.0.4
  path_provider: ^2.0.1
  #申请权限
  permission_handler: ^8.2.2
  replay_kit_launcher: ^1.0.0

生成签名
因为只是一个测试，可以使用demo中的获取签名方法；正式开发时，一般将获取签名方法放在后台处理，签名效验
房间id和用户id
因为是聊天室，那就一定是同一个roomId，我这里是一对一，两个用户userId就可以了。

  static int roomId = 10000;
  static String userId = Platform.isAndroid ? '1234568' : '12345682';
  static String userId2 = Platform.isAndroid ? '12345682' : '1234568';

初始化TRTC

  static TRTCCloud? trtcCloud;
  static TXDeviceManager? txDeviceManager;
  static TXBeautyManager? txBeautyManager;
  static TXAudioEffectManager? txAudioManager;
  static void Function(TRTCCloudListener, dynamic)? onRtcListener;
  
  static init() async {
    trtcCloud = await TRTCCloud.sharedInstance();
    txDeviceManager = trtcCloud?.getDeviceManager();
    txBeautyManager = trtcCloud?.getBeautyManager();
    txAudioManager = trtcCloud?.getAudioEffectManager();
  }

进入房间/退出房间，并且添加侦听事件

  /// 进入房间
  /// sdkAppId
  /// userId 用户id
  /// userSig 用户签名
  /// roomId 房间id
  /// role 角色
  static entryRoom(
      {required int sdkAppId,
      required String userId,
      required String userSig,
      required int roomId,
      int role = TRTCCloudDef.TRTCRoleAnchor}) {
    trtcCloud?.enterRoom(
        TRTCParams(
            sdkAppId: sdkAppId,
            userId: userId,
            userSig: userSig,
            roomId: roomId,
            role: role),
        TRTCCloudDef.TRTC_APP_SCENE_VIDEOCALL);
  }

  /// 退出房间
  static exitRoom() {
    trtcCloud?.exitRoom();
  }

  /// 注册侦听
  static registerListenerHanlder() {
    if (onRtcListener == null) {
      onRtcListener = (type, param) {
        if (type == TRTCCloudListener.onError) {
          BotToast.showText(text: '进入房间失败');
        }

        if (type == TRTCCloudListener.onEnterRoom) {
          if (param > 0) {
            BotToast.showText(text: '进入房间成功');
          }
        }

        if (type == TRTCCloudListener.onExitRoom) {
          BotToast.showText(text: '退出房间成功');
        }

        if (type == TRTCCloudListener.onUserVideoAvailable) {
          BotToast.showText(text: '可以开始视频会议了');
        }
      };
    }

    trtcCloud?.registerListener(onRtcListener!);
  }

开启本地视频和远程视频
需要开启相关权限：摄像头权限、 麦克风权限，如果没有开启则看不到图像，听不到声音。具体开启权限代码我就不写了，插件Permission中很清楚了。下面是打开本地视频镜像和远程视频镜像代码。

  /// 加载本地视频镜像
  localVideoWidget() {
    return TRTCCloudVideoView(onViewCreated: (viewId) {
      if (TrtcUtils.trtcCloud != null) {
        TrtcUtils.trtcCloud!
            .startLocalPreview(Platform.isAndroid ? true : false, viewId);
      }
    });
  }

  /// 加载远程视频镜像
  remoteVideoWidget() {
    return TRTCCloudVideoView(onViewCreated: (viewId) {
      if (TrtcUtils.trtcCloud != null) {
        TrtcUtils.trtcCloud!.startRemoteView(
            Config.userId2, TRTCCloudDef.TRTC_VIDEO_STREAM_TYPE_SMALL, viewId);
      }
    });
  }

需要注意的是，Flutter使用Permission.microphone.request().isGranted ,申请麦克风使用权限失败，可以在Podfile中替换最后一段代码解决：

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
    target.build_configurations.each do |config|
      config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
     '$(inherited)',
     'PERMISSION_MICROPHONE=1',
    ]
    end
  end
end