The SDK for React Native is packaged from the TRTC SDK for iOS and Android. It supports only audio calls currently, and is expected to enable video calls as well in the future.
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);
4. Playing local video
<TXVideoView.LocalView />
5. Playing the video of a remote user
<TXVideoView.RemoteView userId={remoteUserId} streamType={TRTCCloudDef.TRTC_VIDEO_STREAM_TYPE_BIG} />
6. 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](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
Configure application permissions in `AndroidManifest.xml`. The TRTC SDK requires the following permissions:
! Do not set
android:hardwareAccelerated="false"
. Disabling hardware acceleration will result in failure to render remote users’ 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
]);
}
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-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>
npx react-native start
npx react-native run-ios
yarn ios
again..xcworkspace
to runGenerated using TypeDoc