Tencent Cloud

React Native

Last updated: 2024-05-13 10:43:55

This document describes how to quickly run the TRTC demo for React Native.
Environment Requirements
React Native 0.63 or later
Node (later than v12) & Watchman
Developing for Android:
Android Studio 3.5 or later
Devices with Android 4.1 or later
Developing for iOS and macOS:
Xcode 11.0 or later
OS X 10.11 or later
A valid developer signature for your project
For how to set up the environment, see the React Native official document.
Prerequisites
You have signed up for a Tencent Cloud account.
Directions
Step 1. Create an application
1. Log in to the TRTC console overview page, click Create Application.
2. In the popup page, select RTC Engine, enter the application name, and then click Create.
﻿
﻿
﻿
Step 2. Get your SDKAppId and SecretKey
After your application created, you can get your SDKAppID and SDKSecretKey on Basic informaction. SDKAppID and SDKSecretKey is needed for running demo.  
﻿
﻿
﻿
Step 3. Download the sample code
Go to GitHub to download the SDK and demo source code.
git clone https://github.com/LiteAVSDK/TRTC_ReactNative.git
Step 4. Configure the project
1. Open the file downloaded previously, find and open /TRTC-Simple-Demo/debug/config.js, and set the following parameters:
SDKAPPID: A placeholder by default. Set it to the actual SDKAppID.
SDKSECRETKEY: A placeholder by default. Set it to the actual key.
Note
The method for generating UserSig described in this document involves configuring SDKSECRETKEY in the client code. In this method, SDKSECRETKEY may be easily decompiled and reversed, and if your key is disclosed, attackers can steal your Tencent Cloud traffic. Therefore, this method is only suitable for the local execution and debugging of TRTC-Simple-Demo.
The best practice is to integrate the calculation code of UserSig into your server and provide an application-oriented API. When UserSig is needed, your application can send a request to your server for a dynamic UserSig. For more information, see How do I calculate UserSig during production?.
Step 5. Configure permission requests
You need to configure permission requests in order to run the demo.
Android
1. Configure application permissions in AndroidManifest.xml. The TRTC SDK requires the following permissions:
<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" />
Do not use android:hardwareAccelerated="false". Disabling hardware acceleration will result in failure to render remote videos.
You need to request audio and video permissions manually for Android.
if (Platform.OS === 'android') {
  await PermissionsAndroid.requestMultiple([
    PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, //For audio calls
    PermissionsAndroid.PERMISSIONS.CAMERA, // For video calls
  ]);
}
iOS
1. Configure application permissions in Info.plist. The TRTC SDK requires the following permissions:
<key>NSCameraUsageDescription</key>
<string>You can make video calls only if you grant the app camera permission.</string>
<key>NSMicrophoneUsageDescription</key>
<string>You can make audio calls only if you grant the app mic permission.</string>
Step 6. Build and run the project
Run npm install.
Android
1. Start Metro in the demo directory.
npx react-native start
2. Open a new window in the demo directory and start debugging.
npx react-native run-android
iOS
1. Run pod install in the demo iOS directory to install dependencies.
2. Start Metro in the demo directory.
npx react-native start
3. Open a new window in the demo directory and start debugging (if an error occurs, please use Xcode to debug your project).
npx react-native run-ios

tencent cloud

Recent Pages

React Native

Environment Requirements

Prerequisites

Directions

Step 1. Create an application

Step 2. Get your SDKAppId and SecretKey

Step 3. Download the sample code

Step 4. Configure the project

Step 5. Configure permission requests

Android

iOS

Step 6. Build and run the project

Android

iOS

Was this page helpful?

Was this page helpful?

tencent cloud

Sign Up

Log in

Recent Pages

React Native

Environment Requirements

Prerequisites

Directions

Step 1. Create an application

Step 2. Get your SDKAppId and SecretKey

Step 3. Download the sample code

Step 4. Configure the project

Step 5. Configure permission requests

Android

iOS

Step 6. Build and run the project

Android

iOS

Was this page helpful?

Was this page helpful?