@100mslive/react-native-hms 中文文档教程

Question

react-native-hms

< /a> < /a>

100 毫秒 SDK 的 React 本机包装器

Installation

npm install @100mslive/react-native-hms --save

在此处下载示例 iOS 应用程序：https://testflight.apple.com/join/v4bSIPad

在此处下载示例 Android 应用程序：https:

Permissions

For iOS Permissions

//appdistribution.firebase.dev/i/7b7ab3b30e627c35 在 Info.plist 文件中添加以下行

<key>NSCameraUsageDescription</key>
<string>Please allow access to Camera to enable video conferencing</string>
<key>NSLocalNetworkUsageDescription</key>
<string>Please allow access to network usage to enable video conferencing</string>
<key>NSMicrophoneUsageDescription</key>
<string>Please allow access to Microphone to enable video conferencing</string>

For Android Permissions

在 AndroidManifest.xml 中添加以下

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />

权限在加入通话或显示预览之前，还需要在运行时请求摄像头和录制音频权限。 请按照 Android 文档 获取运行时权限。

我们建议使用 react-native-permission 从两个平台获取权限。

QuickStart

该包导出所有类和管理所有内容的 HMSSDK 类。

Setting up the HMS Instance:

首先我们必须调用 build 方法，该方法返回 HMSSDK 类的一个实例，该方法用于执行所有操作

import { HMSSDK } from '@100mslive/react-native-hms';
...

const hmsInstance = await HMSSDK.build();
// save this instance, it will be used for all the operations that we'll perform

...

Add event listeners

，为所有事件添加事件侦听器，例如 onPreview、onJoin、onPeerUpdate 等。这些操作可以在HMSUpdateListenerActions 类

import { HMSUpdateListenerActions } from '@100mslive/react-native-hms';
...

// instance acquired from build() method
hmsInstance.addEventListener(
  HMSUpdateListenerActions.ON_PREVIEW,
  previewSuccess, // function that will be called on Preview success
);

...

事件处理程序是处理 hms 中发生的任何更新的方式 所有事件都可以在 HMSUpdateListenerActions 类中

Join the room

找到房间的详细信息和用户加入功能

import { HMSUpdateListenerActions, HMSConfig } from '@100mslive/react-native-hms';
...

const HmsConfig = new HMSConfig({authToken, userID, roomID});

// instance acquired from build() method
hmsInstance.preview(HmsConfig); // to start preview
// or
hmsInstance.join(HmsConfig); // to join a room

...

不要忘记在调用加入之前添加 ON_JOIN 监听器以接收事件回调

Viewing the video of a peer

要在屏幕上显示视频，包提供一个名为 HmsView 的 UI 组件，它获取视频轨道 ID 并在其中显示视频组件，此组件需要 style 属性中的 width 和 height 来设置将显示视频流的图块的边界

...
import { HMSRemotePeer } from '@100mslive/react-native-hms';

// getting local track ID
const localTrackId: string = hmsInstance?.localPeer?.videoTrack?.trackId;

// getting remote track IDs
const remotePeers: HMSRemotePeer[] = hmsInstance?.remotePeers
const remoteVideoIds: string[] = [];

remotePeers.map((remotePeer: HMSRemotePeer) => {
  const remoteTrackId: string = remotePeer?.videoTrack?.trackId;

  if (remoteTrackId) {
    remoteVideoIds.push(remoteTrackId);
  }
});

...

Display a video in HmsView

import { HMSVideoViewMode } from '@100mslive/react-native-hms';

// instance acquired from build() method
const HmsView = hmsInstance?.HmsView;
...
const styles = StyleSheet.create({
  hmsView: {
    height: '100%',
    width: '100%',
  },
});

// trackId can be acquired from the method explained above
// sink is passed false video would be removed. It is a ios only prop, for android it is handled by the package itself.
// scaleType can be selected from HMSVideoViewMode as required
// mirror can be passed as true to flip videos horizontally
<HmsView sink={true} style={styles.hmsView} trackId={trackId} mirror={true} scaleType={HMSVideoViewMode.ASPECT_FIT} />

...

Calling various functions of HMS

// Mute Audio
hmsInstance?.localPeer?.localAudioTrack()?.setMute(true);

// Stop Video
hmsInstance?.localPeer?.localVideoTrack()?.setMute(true);

// Switch Camera
hmsInstance?.localPeer?.localVideoTrack()?.switchCamera();

// Leave the call (async function)
await hmsInstance?.leave();

Sending messages

import { HMSRole, HMSPeer } from '@100mslive/react-native-hms';

const message = 'hello'
const roles: HMSRole[] = hmsInstance?.knownRoles
// any remote peer
const peer: HMSPeer = hmsInstance?.remotePeers[0]

// send a different type of messages
hmsInstance?.sendBroadcastMessage(message);
hmsInstance?.sendGroupMessage(message, [role[0]);
hmsInstance?.sendDirectMessage(message, peer);

Error handling

import { HMSUpdateListenerActions } from '@100mslive/react-native-hms';

// add an error event listener
hmsInstance.addEventListener(HMSUpdateListenerActions.ON_ERROR, onError);

Run Example App

运行示例应用程序在 您的系统，请按照下列步骤操作 -

1. In the project root, run npm install
2. Go to the example folder, cd example
3. In the example folder, run npm install
4. To run on Android, run npx react-native run-android
5. To run on iOS, first install the pods in iOS folder, cd ios; pod install. Then, in example folder, run npx react-native run-ios