实时语音
  • iOS
  • Android
  • macOS
  • Windows
  • Linux
  • Web
  • 小程序
  • Flutter
  • Electron
  • Unreal Engine
  • Unity3D
  • uni-app
  • React Native : JavaScript
  • Cocos Creator
  • 产品简介
  • 下载
  • 快速开始
    • 跑通示例源码
    • 集成 SDK
    • 实现音频通话
  • 通信能力
  • 房间能力
  • 音频能力
  • 直播能力
  • 其他能力
  • 客户端 API
  • 服务端 API
  • 常见错误码
  • 常见问题
  • 文档中心
  • 实时语音
  • 快速开始
  • 集成 SDK

集成 SDK

更新时间:2023-07-23 16:45

1 准备环境

在开始集成 SDK 前,请确保开发环境满足以下技术要求:

  • React Native 0.60.0 或以上版本。
  • iOS 11.0 或以上版本且支持音视频的 iOS 设备或模拟器(推荐使用真机)。
  • Android 版本不低于 4.4 且支持音视频的 Android 设备或模拟器(推荐使用真机),如果为真机,请开启“允许调试”选项。
  • iOS 与 Android 设备已经连接到 Internet。
  • 配置 VS Code 开发环境,可在应用商店中搜索 “React Native Tools” 扩展并下载。

2 集成 SDK

2.1 新建项目(可选)

此步骤以如何创建新项目为例,如果是集成到已有项目,可忽略此步。

开发环境配置完毕后,在命令行中执行 react-native init YourProject

2.2 导入 SDK

  1. 进入项目根目录,打开 “package.json”,在 “dependencies” 一栏中,添加依赖 "zego-express-engine-reactnative": "^x.y.z".

    x.y.z 为当前官网最新版本号,可通过 npm 查找获取。

  2. 进入项目根目录,并执行 npm install zego-express-engine-reactnative --saveyarn add zego-express-engine-reactnative 命令安装 SDK。

  3. 进入 iOS 根目录,并执行 pod install 命令安装依赖。

完成如上操作即可在项目中通过 javascript 或 typescript (推荐使用 typescript) 来使用 zego-express-engine-reactnative SDK。

3 添加权限

根据实际需要,设置应用所需权限。

  • Android

    打开 “app/src/main/AndroidManifest.xml” 文件,添加如下内容:

    <!-- Permissions required by the SDK -->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.BLUETOOTH" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <!-- Permissions required by the App -->
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    
    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true" />
    
    <uses-feature android:name="android.hardware.camera" />
    <uses-feature android:name="android.hardware.camera.autofocus" />
    • 申请动态权限

      • 由于 Android 6.0 在一些重要的权限上必须申请动态权限,通过 “AndroidMainfest.xml” 文件申请静态权限后,还需要参考如下代码申请动态权限。
      • 关于 BLUETOOTH 权限:仅 Android 6.0 以下版本需要声明,Android 6.0 及以上版本无需声明。
    import {PermissionsAndroid} from 'react-native';
    
    const granted = PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.CAMERA,
                                          PermissionsAndroid.RECORD_AUDIO);
    granted.then((data)=>{
    
          if(!data) {
              const permissions = [PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, PermissionsAndroid.PERMISSIONS.CAMERA];
              PermissionsAndroid.requestMultiple(permissions);
          }
      }).catch((err)=>{
      console.log(err.toString());
      })
    }
  • iOS

    1. 在 Xcode 中,选择 “TARGETS > Info > Custom iOS Target Properties” 菜单。

      AddiOS Privacy

    2. 单击 “+” 按钮,添加摄像头和麦克风权限。

      • Privacy - Camera Usage Description
      • Privacy - Microphone Usage Description

      添加权限完成后显示结果如下图所示:

      AddiOS Privacy Done

4 常见问题

1. 可以使用 React Native 0.60.0 以下版本集成 SDK 吗?

不能,zego-express-engine-reactnative SDK 仅支持 0.60.0 或以上版本的 React Native。若需集成 SDK,请先升级项目版本。

2. 导入 SDK 到工程后,还需要手动执行 react-native link zego-express-engine-reactnative 命令链接 Native Module 吗?

不需要,React Native 从 0.60.0 版本开始,已支持自动链接 Native Module。

本篇目录