火山引擎 React Native SDK

简介

火山引擎 React Native SDK 是火山引擎提供的 React Native 端音视频通话 SDK。

最低要求

要求 Node >= 18。

安装

npm install @volcengine/react-native-rtc

yarn add @volcengine/react-native-rtc

基础示例

核心调用定义

@/core/index.ts

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

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

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

    /** 引擎相关 */
    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;
    }

    /** 房间相关 */
    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();

基础加房页面

@/page/login.tsx

主要关注 NativeViewComponent 的使用方式, 须注意组件注册完成后，在 onLoad 中调用 setLocalVideoCanvas 设置本地渲染视图，远端用户同理。

import { Platform } from 'react-native';
import { NativeViewComponent, StreamIndex, RenderMode } from '@volcengine/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 () => {
        /** 获取权限 */
        await requestDevicePermission();

        /** 初始化引擎 */
        await RTCClient.createEngine({
            appID: 'Your appId',
        });

        /** 设置相关回调函数 */
        RTCClient.setRTCVideoEventHandler(...Your custom events);

        /** 设置本地渲染视图 */
        RTCClient.setLocalVideoCanvas(
            StreamIndex.STREAM_INDEX_MAIN,
            {
                viewId,
                renderMode: RenderMode.ByteRTCRenderModeFit,
            },
        );
        /** 创建房间实例 */
        RTCClient.createRoom(roomId!);
        /** 设置相关回调函数 */
        RTCClient.setRTCRoomEventHandler(roomEventListeners);

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

        /** 采集本地流 */
        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;

注意

• 在 Android/iOS 场景中, 屏幕共享的方式略有不同, 详情可参考 Android 屏幕共享 和 iOS 屏幕共享。