trtc-react-native

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

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

• Initialization

  // 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();
  

• Room entry/exit

  // 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();
  

• Listener registration

  // 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);
  

• Playing local video

  <TXVideoView.LocalView />
  

• Playing the video of a remote user

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

• Playing the Screen sharing of a remote user

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

Android development environment

You can refer to React Native’s official document to set up a development environment for Android. Note: You must debug your project on a real device.

Configuring app permissions

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

• Android audio and video permissions need to be applied manually:

  // 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

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

  npx react-native start
  

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

  npx react-native run-android
  

iOS development environment

You can refer to React Native’s official document to set up a development environment for iOS.

Configuring app permissions

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

  <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

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

  npx react-native start
  

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

  npx react-native run-ios
  

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

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