Tencent Real-time Audio and Video React Native Component

react-native-trtc

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

Install (React Native >= 0.60.0)

npm i --save rn-trtc

Open the ios directory and run

pod install

use

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

Official API documentation

Download Details:

Author: Martinzz

Source Code: https://github.com/Martinzz/react-native-trtc

#react-native #react #mobile-apps