@volcengine/react-native-rtc
v1.0.0
Published
volcengine sdk for react native
Downloads
84
Maintainers
Keywords
Readme
火山引擎 React Native SDK
简介
火山引擎 React Native SDK 是火山引擎提供的 React Native 端音视频通话 SDK。
最低要求
要求 Node >= 18。
| 端 | 最低版本 | | - | - | | Android | 6.0 (API 23) | | iOS | 13.4 |
安装
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 屏幕共享。