tencent cloud

文档反馈

最后更新时间:2024-02-19 17:44:45
    本文将介绍如何用最短的时间完成TUIRoomKit组件的接入,跟随本文档,您将在一个小时的时间内完成如下几个关键步骤,并最终得到一个包含完备 UI 界面的音视频会议功能。

    环境准备

    平台
    版本
    Flutter
    3.0.0 及以上版本。
    Android
    最低兼容 Android 4.1(SDK API Level 16),建议使用 Android 5.0 (SDK API Level 21)及以上版本。
    Android Studio 3.5 及以上的版本(Gradle 3.5.4 及以上的版本)。
    Android 4.1 及以上的手机设备。
    iOS
    iOS 12.0 及更高。

    步骤一:开通服务

    在使用 TUIRoomKit 前,您需要开通 TUIRoomKit 专属的多人音视频互动服务,详细步骤如下:
    1. 登录实时音视频控制台总览页,单击创建应用
    2. 在弹窗页面中选择 RTC Engine,输入应用名称,例如 FlutterExample,然后单击创建
    
    
    
    3. 在应用创建成功后,您可以在基本信息中获取到您的 SDKAppId 和 SecretKey,它们会在后续的 步骤四:登录 TUIRoomKit 组件 中被用到,至此多人音视频房间 SDK 服务开通完成。
    
    
    

    步骤二:集成 TUIRoomKit 组件

    在您的工程 pubspec.yaml 文件中,添加 rtc_conference_tui_kit 插件依赖,或进入你的工程目录下执行如下命令添加依赖。
    dependencies:
    rtc_conference_tui_kit: 最新版本
    执行以下命令安装组件:
    flutter pub get

    步骤三:完成工程配置

    由于 rtc_conference_tui_kit 组件使用了GetX状态管理库进行导航,您需要在您的应用程序中使用GetMaterialApp来代替MaterialApp。或者您也可以将您MaterialApp中的navigatorKey属性设置为Get.key以实现相同的效果。
    使用 Xcode 打开您的工程,选择项目 > Building Settings > Deployment,将其下的 Strip Style 设置为Non-Global Symbols ,以保留所需要的全局符号信息。
    如您需要在iOS端使用音视频功能,需要授权麦克风和摄像头的使用权限(Android端已在 SDK 中声明相关权限,您无需手动进行相关配置)。
    在 App 的Info.plist中添加以下两项,分别对应麦克风和摄像头在系统弹出授权对话框时的提示信息。
    <key>NSCameraUsageDescription</key>
    <string>TUIRoom需要访问您的相机权限</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>TUIRoom需要访问您的麦克风权限</string>
    完成以上添加后,在您的 ios/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',
    'PERMISSION_CAMERA=1',
    ]
    end
    end
    end

    步骤四:登录组件

    在您的项目中添加如下代码,它的作用是通过调用 TUIRoomKit 中的相关接口完成组件的初始化。这个步骤非常关键,因为只有在初始化后才能正常使用 TUIRoomKit 的各项功能,故请您耐心检查相关参数是否配置正确:
    import 'package:rtc_room_engine/rtc_room_engine.dart';
    
    var result = await TUIRoomEngine.login(
    SDKAPPID, // 请替换为您的SDKAPPID
    'userId', // 请替换为您的User ID
    'userSig',// 请替换为您的userSig
    );
    
    if (result.code == TUIError.success) {
    // login success
    } else {
    // login error
    }
    参数说明 这里详细介绍一下 login 函数中所需要用到的几个关键参数:
    SDKAppID:在 步骤一 中的第4步中您已经获取到,这里不再赘述。
    UserID:当前用户的 ID,字符串类型,只允许包含英文字母(a-z 和 A-Z)、数字(0-9)、连词符(-)和下划线(_)。
    UserSig:使用 步骤一 的第4步中获取的 SecretKey 对 SDKAppID、UserID 等信息进行加密,就可以得到 UserSig,它是一个鉴权用的票据,用于腾讯云识别当前用户是否能够使用 TRTC 的服务。您可以通过控制台左侧项目栏中的 UserSig 工具,创建一个临时可用的 UserSig。
    
    
    
    更多信息请参见 UserSig相关
    注意:
    这个步骤也是目前我们收到的开发者反馈最多的步骤,常见问题如下:
    SDKAppID 设置错误,国内站的 SDKAppID 一般是以140开头的10位整数。
    UserSig 被错配成了加密密钥(SecretKey),UserSig 是用 SecretKeySDKAppIDUserID 以及过期时间等信息加密得来的,而不是直接把 SecretKey 配置成 UserSig
    UserID 被设置成“1”、“123”、“111”等简单字符串,由于 TRTC 不支持同一个 UserID 多端登录,所以在多人协作开发时,形如 “1”、“123”、“111” 这样的 UserID 很容易被您的同事占用,导致登录失败,因此我们建议您在调试的时候设置一些辨识度高的 UserID
    Github 中的示例代码使用了 genTestUserSig 函数在本地计算 UserSig 是为了更快地让您跑通当前的接入流程,但该方案会将您的 SecretKey 暴露在 App 的代码当中,这并不利于您后续升级和保护您的 SecretKey,所以我们强烈建议您将 UserSig 的计算逻辑放在服务端进行,并由 App 在每次使用 TUIRoomKit 组件时向您的服务器请求实时计算出的 UserSig。

    步骤五:使用组件

    设置用户信息

    通过调用 TUIRoomKitsetSelfInfo 即可设置用户的用户名、头像。
    import 'package:rtc_conference_tui_kit/rtc_conference_tuikit.dart';
    
    var roomKit = TUIRoomKit.createInstance();
    roomKit.setSelfInfo(userName, avatarURL);
    参数
    类型
    含义
    userName
    String
    用户名
    avatarURL
    String
    用户头像 URL

    创建房间

    通过调用 TUIRoomKitcreateRoom 方法,便可以创建房间。
    import 'package:rtc_conference_tui_kit/rtc_conference_tuikit.dart';
    
    var roomKit = TUIRoomKit.createInstance();
    TUIRoomInfo roomInfo = TUIRoomInfo(roomId: '您的roomId');
    var result = await roomKit.createRoom(roomInfo);
    if (result.code == TUIError.success) {
    // create room success
    } else {
    // create room error
    }
    参数
    类型
    含义
    roomInfo
    房间的基本信息
    注意:
    在调用 createRoom 方法创建房间后,并不会自动进入房间,您需要手动调用进入房间接口 enterRoom 后才能进入房间。

    加入房间

    通过调用 TUIRoomKitenterRoom 函数并指定房间号,便可以进入指定房间。(调用该接口后会为您拉起UI界面进入房间)
    import 'package:rtc_conference_tui_kit/rtc_conference_tuikit.dart';
    
    var roomKit = TUIRoomKit.createInstance();
    var result = await roomKit.enterRoom('roomId', // 您的room id
    isOpenMicrophone, // 进房是否开启麦克风
    isOpenCamera, // 进房是否开启摄像头
    userSpeaker); // 进房是否使用扬声器播放声音
    if (result.code == TUIError.success) {
    // enter room success
    } else {
    // enter room success
    }
    参数
    类型
    含义
    roomid
    String
    需要加入的房间号
    isOpenMicrophone
    bool
    进房是否开启麦克风
    isOpenCamera
    bool
    进房是否开启摄像头
    userSpeaker
    bool
    进房是否使用扬声器播放声音

    更多功能

    TUIRoomEngine SDK 提供了丰富音视频房间功能,具体内容请参考 API 概览

    交流与反馈

    如果有任何需要或者反馈,您可以联系:colleenyu@tencent.com。
    
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持