@byteplus/react-native-rtc
v1.0.0
Published
volcengine sdk for react native
Downloads
78
Maintainers
Keywords
Readme
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.
| Platform | Version | | - | - | | Android | 6.0 (API 23) | | iOS | 13.4 |
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.