tencent cloud

文档反馈

React Native

最后更新时间:2022-05-09 15:24:26

    本文主要介绍如何快速运行腾讯云 TRTC Demo(React Native)。

    环境要求

    • ReactNative 0.63 及以上版本
    • Node & Watchman,node版本需在 v12 以上
    • Android 端开发:
      • Android Studio 3.5及以上版本
      • App 要求 Android 4.1及以上版本设备
    • iOS & macOS 端开发:
      • Xcode 11.0及以上版本
      • osx 系统版本要求 10.11 及以上版本
      • 请确保您的项目已设置有效的开发者签名
    • 环境安装请参见 官方文档

    前提条件

    您已 注册腾讯云 账号。

    操作步骤

    步骤1:创建新的应用

    1. 登录实时音视频控制台,选择 开发辅助>快速跑通Demo
    2. 单击 新建应用 输入应用名称,例如 TestTRTC;若您已创建应用可单击 选择已有应用
    3. 根据实际业务需求添加或编辑标签,单击 创建
    说明:

    • 应用名称只能包含数字、中英文字符和下划线,长度不能超过15个字符。
    • 标签用于标识和组织您在腾讯云的各种资源。例如:企业可能有多个业务部门,每个部门有1个或多个 TRTC 应用,这时,企业可以通过给 TRTC 应用添加标签来标记部门信息。标签并非必选项,您可根据实际业务需求添加或编辑。

    步骤2:下载 SDK 和 Demo 源码

    1. 根据实际业务需求下载 SDK 及配套的 Demo 源码
    2. 下载完成后,单击 已下载,下一步
    注意:

    控制台暂时无法下载 ReactNative Demo,请直接通过上方链接下载 Demo 源码

    步骤3:配置 Demo 工程文件

    1. 进入修改配置页,根据您下载的源码包,选择相应的开发环境。

    2. 找到并打开 /debug/config.js 文件。

    3. 设置 SDKAPPIDSECRETKEY 参数:

      • SDKAPPID:默认为 PLACEHOLDER ,请设置为实际的 SDKAppID。
      • SECRETKEY:默认为 PLACEHOLDER ,请设置为实际的密钥信息。
    4. 粘贴完成后,单击 已复制粘贴,下一步 即创建成功。

    5. 编译完成后,单击 回到控制台概览 即可。

    说明:

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

    步骤4:权限配置

    需要配置 App 权限才能运行。

    1. AndroidManifest.xml 中配置 App 的权限,TRTC SDK 需要以下权限:

      <uses-permission android:name="android.permission.INTERNET" />
      <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
      <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
      <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
      <uses-permission android:name="android.permission.RECORD_AUDIO" />
      <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
      <uses-permission android:name="android.permission.BLUETOOTH" />
      <uses-permission android:name="android.permission.CAMERA" />
      <uses-permission android:name="android.permission.READ_PHONE_STATE" />
      <uses-feature android:name="android.hardware.camera" />
      <uses-feature android:name="android.hardware.camera.autofocus" />
      

      注意

      请勿设置 android:hardwareAccelerated="false",关闭硬件加速之后,会导致对方的视频流无法渲染。

    2. Android 端音视频权限需要手动申请。

      if (Platform.OS === 'android') {
       await PermissionsAndroid.requestMultiple([
         PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, //音频需要
         PermissionsAndroid.PERMISSIONS.CAMERA, // 视频需要
       ]);
      }
      

    步骤5:编译运行

    启动 Metro,在您的 React Native 项目目录下运行 npx react-native start

    新开窗口,启动开发调试:

    npx react-native run-android
    

    联系我们

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

    技术支持

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

    7x24 电话支持