Based on Tencent’s real-time audio and video (TRTC) latest SDK React Native components are basically packaged, and support IOS and Android at the same time
The encapsulation of all APIs is not implemented, and there are few uncommon functions that have not yet been implemented
There will be time to continue to improve
npm i --save rn-trtc
Open the ios directory and run
pod install
TRTCLocalView displays the video preview TRTCRemoteView displays the remote video stream
Need to be rendered after joining the room
import React, { Component, useEffect, useRef } from "react";
import TRTCEngine, {
TRTCLocalView,
Scene,
Role,
VideoRotation,
TRTCRemoteView,
LogLevel,
VideoResolution
} from 'rn-trtc';
TRTCEngine . SetLogLevel ( LogLevel . TRTCLogLevelNone ) ; // Set the log level
// Initialization, parameters refer to the official document
const engine = TRTCEngine . Create ( {
videoResolution : VideoResolution . TRTC_VIDEO_RESOLUTION_640_360 ,
videoFps : 15 ,
videoBitrate : 1200 ,
} ) ;
engine . setBeautyStyle ( 1 ) ; // Set the beauty style
engine . setBeautyLevel ( 5 ) ; // Set the beauty level
engine . setWhitenessLevel ( 1 ) ; // Set the whitening level
// Bind the event, refer to the official documentation for the event name
engine . AddListener ( "onError" , ( args ) => {
console . Error ( args )
} ) ;
engine . addListener ( "onEnterRoom" , ( args ) => {
const { result } = args ;
if ( result > 0 ) {
console . log ( `Successful entry into the room, total time spent ${ result } ms` )
} else {
console . error ( `Failed to enter the room, error code ${ result } ` )
}
} ) ;
// Enter the room
Engine . enterRoom ( {
sdkAppId : sdkAppId , // appId: Number The
userId : userId , // userId: String
roomId : roomId , // roomId: nubmer
USERSIG : USERSIG , // user signature generation official reference document
Role : Role . TRTCRoleAudience , // Characters who joined the room
} , Scene . TRTC_APP_SCENE_LIVE )
// API
engine.switchRole(Role.TRTCRoleAnchor);
engine.startLocalAudio();
// After successful addition of the room to display local video preview
{ joinSucceed && < TRTCLocalView style = { Styles . VideoContainer } / > }
// A remote video is added to the display
{ remoteUsers . Map ( ( uid , index ) => < TRTCRemoteView uid = { uid }
key = { `trtc- ${ index } ` }
style = { styles . VideoContainer } / > ) }
Author: Martinzz
Source Code: https://github.com/Martinzz/react-native-trtc
#react-native #react #mobile-apps