100ms Logo

100ms

Docs

Search docs
/

Integrating the SDK

Installing the dependencies

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.BLUETOOTH"/> <uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />

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.

Note: Compiling with Kotlin for compileSdkVersion 30 requires JDK 11 or above

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
  1. Install expo-cli globally to run the Expo commands
npm install --global expo-cli
  1. Install Expo Dev Client
expo install expo-dev-client
  1. 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

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

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.