The React Native SDK is packaged based on the SDK of Tencent Cloud iOS/Android platform, and currently supports live pull streaming.

Documentation guide

API Docs。

SDK class files

• live_premier：The main interface class of license
• live_player：The main interface class of the pull flow function
• tx_video_view：Video rendering view

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.

Sample calls

1. Initialize

   // Create a LivePremier instance
   let mLivePremier: V2TXLivePremier | null = null;
   // Create a LivePlayer instance
   let mLivePlayer: V2TXLivePlayer | null = null;
   
   // Initialize the LivePremier instance
   mLivePremier = V2TXLivePremier.sharedInstance();
   // Initialize the LivePlayer instance
   mLivePlayer = await V2TXLivePlayer.createLivePlayer();

2. Set the SDK authorization License

   mLivePremier.setLicence(LICENSEURL, LICENSEURLKEY);

3. Listener registration

   // Set event listening
   mLivePremier.registerListener(onPremierListener);
   mLivePlayer.registerPlayerObserver(onRtcListener);
   
   function onPremierListener(type: V2TXLivePremierObserver, params: any) {
      if (type === V2TXLivePremierObserver.onLicenceLoaded) {
         // setLicence callback
      }
   }
   
   function onRtcListener(type: V2TXLivePlayerObserver, params: any) {
      if (type === V2TXLivePlayerObserver.onError) {
         if (params.code != 0) {
            // Live player error notification
         }
      }
      if (type === V2TXLivePlayerObserver.onWarning) {
         // Live player warning notification
      }
   }
   
   // Unregister listeners
   mLivePlayer.unRegisterListener(onRtcListener);
   mLivePremier.unRegisterListener(onPremierListener);

4. Video rendering

   <TXVideoView.View />

Docs

1. Configure application permissions in AndroidManifest.xml. The Live 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" />
   <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
   <uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW" />

   ! 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:

   // 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. Download the RN and Live React Native dependency file in the Demo directory

   npx install
   npm i live-react-native

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

   npx react-native start

3. 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

1. 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

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

   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

   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