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.
- 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
-
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} />
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.
-
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 ]); }
-
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
You can refer to React Native’s official document to set up a development environment for iOS.
-
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>
-
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