# trtc-react-native

Leveraging Tencent's 21 years of experience in network and audio/video technologies, Tencent Real-Time Communication (TRTC) offers solutions for group audio/video calls and low-latency interactive live streaming. With TRTC, you can quickly develop cost-effective, low-latency, and high-quality interactive audio/video services.

### Docs

[API Docs](https://comm.qq.com/trtc-react-native-en/api2/index.html)

### SDK class files

- trtc_cloud: main TRTC API classes
- tx_audio_effect_manager: music and audio effect APIs
- tx_device_manager: device management class
- trtc_cloud_def: definitions of key TRTC types
- trtc_cloud_listener: TRTC event callback APIs

### Sample calls

1. Initialization

   ```javascript
   // Create a `TRTCCloud` singleton
   const trtcCloud = TRTCCloud.sharedInstance();
   // Get the device management module
   const txDeviceManager = trtcCloud.getDeviceManager();
   // Get the audio effect management class
   const txAudioManager = trtcCloud.getAudioEffectManager();
   ```

2. Room entry/exit

   ```javascript
   // Enter a room
   const params = new TRTCParams({
     sdkAppId: SDKAPPID, // Application ID
     userId, // User ID
     userSig, // User signature
     roomId: 2366, // Room ID
   });
   trtcCloud.enterRoom(params, TRTCCloudDef.TRTC_APP_SCENE_VIDEOCALL);
   // Leave a room
   trtcCloud.exitRoom();
   ```

3. Listener registration

   ```javascript
   // Register a listener
   trtcCloud.registerListener(onRtcListener);

   function onRtcListener(type: TRTCCloudListener, params: any) {
     // Callback for room entry
     if (type === TRTCCloudListener.onEnterRoom) {
       if (params.result > 0) {
         // Entered room successfully
       }
     }
     // Callback for the entry of a remote user
     if (type === TRTCCloudListener.onRemoteUserEnterRoom) {
       // params.userId: ID of the remote user
     }
     // Whether a remote user’s mic is turned on
     if (type === TRTCCloudListener.onUserAudioAvailable) {
       // param.userId: ID of the remote user
       // param.visible: `true` indicates that the user’s mic is turned on.
     }
   }
   // Unregister a listener
   trtcCloud.unRegisterListener(onRtcListener);
   ```

4. Playing local video

   ```xml
   <TXVideoView.LocalView />
   ```

5. Playing the video of a remote user

   ```xml
   <TXVideoView.RemoteView
     userId={remoteUserId}
     streamType={TRTCCloudDef.TRTC_VIDEO_STREAM_TYPE_BIG}
   />
   ```

6. Playing the Screen sharing of a remote user

   ```xml
   <TXVideoView.RemoteView
     userId={remoteUserId}
     streamType={TRTCCloudDef.TRTC_VIDEO_STREAM_TYPE_SUB}
   />
   ```

### Android development environment

You can refer to React Native’s [official document](https://reactnative.dev/docs/environment-setup) to set up a development environment for Android.
**Note: You must debug your project on a real device.**

#### Configuring app permissions

1. Configure application permissions in `AndroidManifest.xml`. The TRTC SDK requires the following permissions:

   ```xml
   <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 set `android:hardwareAccelerated="false"`. Disabling hardware acceleration will result in failure to render remote users’ videos.

2. Android audio and video permissions need to be applied manually:

   ```javascript
   // 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
     ]);
   }
   ```

#### Developing and debugging

1. To start Metro, run npx react-native start inside your React Native project folder

   ```sh
   npx react-native start
   ```

2. Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following

   ```sh
   npx react-native run-android
   ```

### iOS development environment

You can refer to React Native’s [official document](https://reactnative.dev/docs/environment-setup) to set up a development environment for iOS.

#### Configuring app permissions

1. Configure application permissions in `Info.plist`. The TRTC SDK requires the following permissions:

   ```plist
   <key>NSCameraUsageDescription</key>
   <string>Authorize the camera permission to make a normal video call</string>
   <key>NSMicrophoneUsageDescription</key>
   <string>Authorize microphone permissions to make normal voice calls</string>
   ```

#### Developing and debugging

1. To start Metro, run npx react-native start inside your React Native project folder

   ```sh
   npx react-native start
   ```

2. Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following

   ```sh
   npx react-native run-ios
   ```

3. If there are any changes to the iOS directory, just run `yarn ios` again.

4. If you need to debug iOS, in the ios directory, open `.xcworkspace` to run