React native wrapper for 100ms SDK
To run the example app on your system, follow these steps -
- In the project root, run
npm install
- Go to the example folder,
cd example
- In the example folder, run
npm install
- To run on Android, run
npx react-native run-android
- To run on iOS, first install the pods in iOS folder,
cd ios; pod install
. Then, in example folder, runnpx react-native run-ios
npm install @100mslive/react-native-hms --save
📲 Download the Sample iOS App here: https://testflight.apple.com/join/v4bSIPad
🤖 Download the Sample Android App here: https://appdistribution.firebase.dev/i/7b7ab3b30e627c35
Add following lines in Info.plist
file
<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>
Add following permissions in AndroidManifest.xml
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
You will also need to request Camera and Record Audio permissions at runtime before you join a call or display a preview. Please follow Android Documentation for runtime permissions.
We suggest using react-native-permission to acquire permissions from both platforms.
The package exports all the classes and a HMSSDK class that manages everything.
first we'll have to call build method, that method returns an instance of HMSSDK class and the same is used to perform all the operations
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 for all the events such as onPreview, onJoin, onPeerUpdate etc. the actions can be found in HMSUpdateListenerActions class
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
);
...
The event handlers are the way of handling any update happening in hms all events can be found in HMSUpdateListenerActions class
import { HMSUpdateListenerActions } from '@100mslive/react-native-hms';
// add an error event listener
hmsInstance.addEventListener(HMSUpdateListenerActions.ON_ERROR, onError);
Joining the room connects you to the remote peer and broadcasts your stream to other peers, we need instance of HMSConfig in order to pass the details of room and user to join function
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
...
don't forget to add ON_JOIN listener before calling join to receive an event callback
// 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();
To display a video on screen the package provide a UI component named HmsView that takes the video track ID and displays the video in that component, this component requires on width and height in style prop to set bounds of the tile that will show the video stream
...
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);
}
});
...
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
// scaleType can be selected from HMSVideoViewMode as required
// mirror can be passed as true to flip videos horizontally
<HmsView style={styles.hmsView} trackId={trackId} mirror={true} scaleType={HMSVideoViewMode.ASPECT_FIT} />
...
const mute: boolean = true;
// hms instance acquired by build methodhmsInstance?.changeTrackState(audioTrack as HMSTrack, mute);
hmsInstance?.changeTrackState(videoTrack as HMSTrack, mute);
const unmute: boolean = false;
hmsInstance?.changeTrackState(audioTrack as HMSTrack, unmute);
hmsInstance?.changeTrackState(videoTrack as HMSTrack, unmute);
const reason = 'Host ended the room';
const lock = false; // optional parameter
// hms instance acquired by build method
hmsInstance.endRoom(reason, lock);
import { HMSPeer } from '@100mslive/react-native-hms';
const reason = 'removed from room';
// hms instance acquired by build method
const peer: HMSPeer = hmsInstance?.remotePeers[0];
hmsInstance.removePeer(peer, reason);
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);
import { HMSRole, HMSRemotePeer } from '@100mslive/react-native-hms';
// hms instance acquired by build method
const roles: HMSRole[] = hmsInstance?.knownRoles;
const newRole: HMSRole = roles[0];
// can any remote peer
const peer: HMSRemotePeer = hmsInstance?.remotePeers[0];
const force = false;
hmsInstance.changeRole(peer, newRole, force); // request role change
hmsInstance.changeRole(peer, newRole, !force); // force role change
const parsedMetadata = JSON.parse(hmsInstance?.localPeer?.metadata);
// Raise Hand
// hms instance acquired by build method
hmsInstance?.changeMetadata(
JSON.stringify({
...parsedMetadata,
isHandRaised: true,
})
);
// BRB
// hms instance acquired by build method
hmsInstance?.changeMetadata(
JSON.stringify({
...parsedMetadata,
isBRBOn: true,
})
);
import {
HMSHLSMeetingURLVariant,
HMSHLSConfig,
} from '@100mslive/react-native-hms';
const startHLSStreaming = () => {
const hmsHLSMeetingURLVariant = new HMSHLSMeetingURLVariant({
meetingUrl:
'https://yogi.app.100ms.live/preview/nih-bkn-vek?token=beam_recording',
metadata: '',
});
const hmsHLSConfig = new HMSHLSConfig({
meetingURLVariants: [hlsStreamingDetails],
});
// hms instance acquired by build method
hmsInstance
.startHLSStreaming(hmsHLSConfig)
.then((r) => console.log(r))
.catch((e) => console.log(e));
};
import { HMSRTMPConfig } from '@100mslive/react-native-hms';
const recordingDetails = HMSRTMPConfig({
record: true,
meetingURL: roomID + '/viewer?token=beam_recording',
rtmpURLs: [],
});
// hms instance acquired by build method
const result = await hmsInstance?.startRTMPOrRecording(recordingDetails);
// hms instance acquired by build method
hmsInstance?.enableRTCStats();
// hms instance acquired by build method
hmsInstance?.startScreenshare();
import {
HMSUpdateListenerActions,
HMSSpeakerUpdate,
HMSSpeaker,
} from '@100mslive/react-native-hms';
// hms instance acquired by build method
hmsInstance?.addEventListener(HMSUpdateListenerActions.ON_SPEAKER, onSpeaker);
const onSpeaker = (data: HMSSpeakerUpdate) => {
data?.peers?.map((speaker: HMSSpeaker) =>
console.log('speaker audio level: ', speaker?.level)
);
};
const remotePeer: HMSRemotePeer;
const isAudioPlaybackAllowed = remotePeer.remoteAudioTrack().setPlaybackAllowed(false);
const isVideoPlaybackAllowed = remotePeer.remoteVideoTrack().setPlaybackAllowed(true);
// hms instance acquired by build method
hmsInstance.muteAllPeersAudio(true) // mute
hmsInstance.muteAllPeersAudio(false) // unmute
const volume: Float = 1.0;
const track: HMSTrack = remotePeer.audioTrack as HMSTrack;
// hms instance acquired by build method
hmsInstance?.setVolume(track, volume);
const newName: string = 'new name';
// hms instance acquired by build method
hmsInstance.changeName(newName);
const getTrackSettings = () => {
let audioSettings = new HMSAudioTrackSettings({
maxBitrate: 32,
trackDescription: 'Simple Audio Track',
});
let videoSettings = new HMSVideoTrackSettings({
codec: HMSVideoCodec.vp8,
maxBitrate: 512,
maxFrameRate: 25,
cameraFacing: HMSCameraFacing.FRONT,
trackDescription: 'Simple Video Track',
resolution: new HMSVideoResolution({ height: 180, width: 320 }),
});
return new HMSTrackSettings({ video: videoSettings, audio: audioSettings });
};
const setupBuild = async () => {
const trackSettings = getTrackSettings();
const build = await HmsManager.build({ trackSettings });
setInstance(build);
updateHms({ hmsInstance: build });
};