@byteplus/react-native-rtc
v1.0.0
Published
volcengine sdk for react native
Downloads
7
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.