BytePlus React Native SDK

Introduction

BytePlus React Native SDK is the audio and video call SDK provided by BytePlus for React Native.

Minimum Requirements

Require Node >= 18.

Install

npm install @byteplus/react-native-rtc

yarn add @byteplus/react-native-rtc

Basic Example

Core Call Definition

@/core/index.ts

import {
   RTCManager, IEngine, IRoom, RTCVideoEventHandler, RTCRoomEventHandler, IJoinRoomProps, ICreateRTCEngineOptions,
} from '@byteplus/react-native-rtc';

class RTCClient {
    manager?: RTCManager;
    engine?: IEngine | null;
    room?: IRoom | null;

    constructor() {
        this.manager = new RTCManager();
    }

    /** Engine related */
    async createEngine({ appID }: ICreateRTCEngineOptions) {
      this.engine = await this.manager!.createRTCEngine({ appID });
    }
    setRTCVideoEventHandler(handlers: RTCVideoEventHandler) {
        this.engine?.setRtcVideoEventHandler(handlers);
    }
    setRTCRoomEventHandler(handlers: RTCRoomEventHandler) {
        this.room?.setRTCRoomEventHandler(handlers);
    }
    startAudioCapture() {
       return this.engine?.startAudioCapture();
    }
    startVideoCapture() {
       return this.engine?.startVideoCapture();
    }
    destroyEngine() {
        this.leaveRoom();
        this.room?.destroy();
        this.room = null;
        this.manager!.destroyRTCEngine();
        this.engine = null;
    }

    /** Room related */
    joinRoom(params: IJoinRoomProps) {
        return this.room?.joinRoom({
            token: 'Your token',
            ...params,
        });
    }
    leaveRoom() {
        this.effectPlayerUnloadAll();
        this.stopScreenCapture();
        this.room?.leaveRoom();
    }
    createRoom(roomId: string) {
        this.room = this.engine?.createRTCRoom(roomId);
        return this.room;
    }
}

export default new RTCClient();

Base JoinRoom Page

@/page/login.tsx

Mainly focus on the usage of NativeViewComponent. Note that after the component is registered, call setLocalVideoCanvas in onLoad to set the local rendering view. The same applies to remote users.

import { Platform } from 'react-native';
import { NativeViewComponent, StreamIndex, RenderMode } from '@byteplus/react-native-rtc';
import { request, PERMISSIONS } from 'react-native-permissions';
import RTCClient from '@/core';

const viewId = 'my-view';

const Login = () => {

    const requestDevicePermission = async () => {
        if (Platform.OS === 'ios') {
            await request(PERMISSIONS.IOS.CAMERA);
            await request(PERMISSIONS.IOS.MICROPHONE);
        } else {
            await request(PERMISSIONS.ANDROID.CAMERA);
            await request(PERMISSIONS.ANDROID.RECORD_AUDIO);
        }
    };

    const handleViewLoad = async () => {
        /** Fetch user's device permission */
        await requestDevicePermission();

        /** Engine Initialization */
        await RTCClient.createEngine({
            appID: 'Your appId',
        });

        /** Set relative callbacks */
        RTCClient.setRTCVideoEventHandler(...Your custom events);

        /** Set local stream renderer  */
        RTCClient.setLocalVideoCanvas(
            StreamIndex.STREAM_INDEX_MAIN,
            {
                viewId,
                renderMode: RenderMode.ByteRTCRenderModeFit,
            },
        );
        /** Create room instance */
        RTCClient.createRoom(roomId!);
        /** Set relative callbacks */
        RTCClient.setRTCRoomEventHandler(roomEventListeners);

        /** Join room */
        RTCClient.joinRoom({
            userId: localUser.userId,
            extras: {
                source_language: room.language,
            },
            roomConfigs: {
                profile: room.roomMode,
                isAutoPublish: room.autoPublish,
                isAutoSubscribeAudio: room.autoSubscribeAudio,
                isAutoSubscribeVideo: room.autoSubscribeVideo,
            },
        });

        /** Capture local streams */
        RTCClient.startVideoCapture();
        RTCClient.startAudioCapture();
    }

    return (
        <KeyboardAvoidingView
            behavior={Platform.OS === "ios" ? "padding" : "height"}
        >
            <NativeViewComponent
                viewId={viewId}
                onLoad={handleViewLoad}
                kind={
                    Platform.select({
                        android: 'TextureView',
                        ios: 'UIView',
                    })!
                }
            />
        </KeyboardAvoidingView>
    );
};

export default Login;

Attention

• In Android/iOS scenarios, the screen sharing method is slightly different. For details, please refer to Android screen sharing and iOS screen sharing.