Integrating The SDK

Installing 100ms package

Package	Version
@100mslive/react-native-room-kit
@100mslive/react-native-hms
@100mslive/react-native-video-plugin

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

Permissions

For iOS

Add following lines in Info.plist file

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

For Android

Add following permissions in AndroidManifest.xml

<uses-feature android:name="android.hardware.camera"/>

<uses-feature android:name="android.hardware.camera.autofocus"/>

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

<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE"/>

<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>

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

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

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />

<uses-permission android:name="android.permission.BLUETOOTH" android:maxSdkVersion="30" />

<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />

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.

Proguard configuration

100ms Android SDK 2.1.2 or higher

If using 100ms Android SDK version 2.1.2 and higher proguard configuration is bundled inside it. No additional code is required.

Prior to Android SDK version 2.1.2

Prior to Android SDK version 2.1.2, the following configuration was needed in release builds.

Add it to your proguard-rules.pro

# 100ms proguard rules
-keep class org.webrtc.** { *; }
-keep class live.hms.video.** { *; }

Expo Setup

100ms React Native SDK supports development with Expo. Following is a guide to set it up -

1. Install node modules

npm install

2. Install expo-cli globally to run the Expo commands

npm install --global expo-cli

3. Install Expo Dev Client

expo install expo-dev-client

4. Now we can run on iOS and Android

expo run: ios -d

expo run: android -d

Alternatively, you can run it from IDE of your choice (VS Code, Android Studio, Xcode, etc) and start the dev server from terminal (it will help running on devices). To start the server use the following command -

expo start --dev-client

Github Repository

You can checkout the 100ms React Native SDK Github repository which also contains a fully fledged Example app implementation here

Example App

In the 100ms Example App we have shown how to setup the various listeners, what data to store in the redux and what all features you can implement.

We have also implemented multiple views which are commonly used. Checkout the videos & relevant code in the Example app.