@100mslive/react-native-hms 0.8.4 → 0.9.2

package/README.md

@@ -14,16 +14,25 @@
 [![Discord](https://img.shields.io/discord/843749923060711464?label=Join%20on%20Discord)](https://100ms.live/discord)
 [![Firebase](https://img.shields.io/badge/Download%20Android-Firebase-green)](https://appdistribution.firebase.dev/i/7b7ab3b30e627c35)
 [![TestFlight](https://img.shields.io/badge/Download%20iOS-TestFlight-blue)](https://testflight.apple.com/join/v4bSIPad)
+[![Activity](https://img.shields.io/github/commit-activity/m/100mslive/react-native-hms.svg)](https://github.com/100mslive/react-native-hms/projects/1)
 [![Register](https://img.shields.io/badge/Contact-Know%20More-blue)](https://dashboard.100ms.live/register)
 
 React native wrapper for 100ms SDK
 
+## Run Example App
+
+To run the example app on your system, follow these steps -
+
+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`
+
 ## Installation
 
 ```bash
 npm install @100mslive/react-native-hms --save
-
-cd ios/ && pod install
 ```
 
 📲 Download the Sample iOS App here: https://testflight.apple.com/join/v4bSIPad
@@ -63,7 +72,7 @@ We suggest using [react-native-permission](https://www.npmjs.com/package/react-n
 
 The package exports all the classes and a HMSSDK class that manages everything.
 
-# Setting up the HMS Instance:
+## Setting up the HMS Instance
 
 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
 
@@ -77,7 +86,7 @@ const hmsInstance = await HMSSDK.build();
 ...
 ```
 
-# Add event listeners
+## Add event listeners
 
 add event listeners for all the events such as onPreview, onJoin, onPeerUpdate etc. the actions can be found in HMSUpdateListenerActions class
 
@@ -96,7 +105,16 @@ hmsInstance.addEventListener(
 
 The event handlers are the way of handling any update happening in hms all events can be found in HMSUpdateListenerActions class
 
-# Join the room
+## Error handling
+
+```js
+import { HMSUpdateListenerActions } from '@100mslive/react-native-hms';
+
+// add an error event listener
+hmsInstance.addEventListener(HMSUpdateListenerActions.ON_ERROR, onError);
+```
+
+## Join the room
 
 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
 
@@ -116,7 +134,23 @@ hmsInstance.join(HmsConfig); // to join a room
 
 don't forget to add ON_JOIN listener before calling join to receive an event callback
 
-# Viewing the video of a peer
+## Calling various functions of HMS
+
+```js
+// 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();
+```
+
+## Viewing the video of a peer
 
 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
 
@@ -124,7 +158,7 @@ To display a video on screen the package provide a UI component named HmsView th
 ...
 import { HMSRemotePeer } from '@100mslive/react-native-hms';
 
-// getting local track ID 
+// getting local track ID
 const localTrackId: string = hmsInstance?.localPeer?.videoTrack?.trackId;
 
 // getting remote track IDs
@@ -142,7 +176,7 @@ remotePeers.map((remotePeer: HMSRemotePeer) => {
 ...
 ```
 
-# Display a video in HmsView
+## Display a video in HmsView
 
 ```js
 import { HMSVideoViewMode } from '@100mslive/react-native-hms';
@@ -166,43 +200,230 @@ const styles = StyleSheet.create({
 ...
 ```
 
-# Calling various functions of HMS
+## Mute/Unmute others
 
 ```js
-// Mute Audio
-hmsInstance?.localPeer?.localAudioTrack()?.setMute(true);
+const mute: boolean = true;
 
-// Stop Video
-hmsInstance?.localPeer?.localVideoTrack()?.setMute(true);
+// hms instance acquired by build methodhmsInstance?.changeTrackState(audioTrack as HMSTrack, mute);
+hmsInstance?.changeTrackState(videoTrack as HMSTrack, mute);
 
-// Switch Camera
-hmsInstance?.localPeer?.localVideoTrack()?.switchCamera();
+const unmute: boolean = false;
 
-// Leave the call (async function)
-await hmsInstance?.leave();
+hmsInstance?.changeTrackState(audioTrack as HMSTrack, unmute);
+hmsInstance?.changeTrackState(videoTrack as HMSTrack, unmute);
 ```
 
-# Sending messages
+## End Room for all
 
 ```js
-import { HMSRole } from '@100mslive/react-native-hms';
+const reason = 'Host ended the room';
+const lock = false; // optional parameter
+
+// hms instance acquired by build method
+hmsInstance.endRoom(reason, lock);
+```
+
+## Remove Peer
+
+```js
+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);
+```
+
+## Sending messages
+
+```js
+import { HMSRole, HMSPeer } from '@100mslive/react-native-hms';
 
 const message = 'hello'
 const roles: HMSRole[] = hmsInstance?.knownRoles
-// can any remote peer's peerID
-const peerId: string = hmsInstance?.localPeer?.peerID  
+// 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, peerId);
+hmsInstance?.sendDirectMessage(message, peer);
 ```
 
-# Error handling
+## Role Change
 
 ```js
-import { HMSUpdateListenerActions } from '@100mslive/react-native-hms';
+import { HMSRole, HMSRemotePeer } from '@100mslive/react-native-hms';
+// hms instance acquired by build method
+const roles: HMSRole[] = hmsInstance?.knownRoles;
+const newRole: HMSRole = roles[0];
 
-// add an error event listener 
-hmsInstance.addEventListener(HMSUpdateListenerActions.ON_ERROR, onError);
+// 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
+```
+
+## Raise Hand & BRB
+
+```js
+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,
+  })
+);
+```
+
+## HLS Streaming
+
+```js
+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));
+};
+```
+
+## Start Streaming / Recording
+
+```js
+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);
+```
+
+## Get RTC Stats
+
+```js
+// hms instance acquired by build method
+hmsInstance?.enableRTCStats();
+```
+
+## Screenshare
+
+```js
+// hms instance acquired by build method
+hmsInstance?.startScreenshare();
+```
+
+## Getting Audio Levels for all speaking peers
+
+```js
+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)
+  );
+};
+```
+
+## Local mute others
+
+```js
+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
+```
+
+## Locally Set Volume
+
+```js
+const volume: Float = 1.0;
+const track: HMSTrack = remotePeer.audioTrack as HMSTrack;
+
+// hms instance acquired by build method
+hmsInstance?.setVolume(track, volume);
+```
+
+## Change name
+
+```js
+const newName: string = 'new name';
+
+// hms instance acquired by build method
+hmsInstance.changeName(newName);
+```
+
+## Join with specific Track Settings
+
+```js
+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 });
+};
 ```

package/android/.idea/gradle.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="GradleSettings">
+    <option name="linkedExternalProjectsSettings">
+      <GradleProjectSettings>
+        <option name="testRunner" value="GRADLE" />
+        <option name="distributionType" value="DEFAULT_WRAPPED" />
+        <option name="externalProjectPath" value="$PROJECT_DIR$" />
+        <option name="resolveModulePerSourceSet" value="false" />
+      </GradleProjectSettings>
+    </option>
+  </component>
+</project>

package/android/.idea/misc.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" project-jdk-name="11" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/build/classes" />
+  </component>
+  <component name="ProjectType">
+    <option name="id" value="Android" />
+  </component>
+</project>

package/android/.idea/modules/android.iml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module external.linked.project.id=":" external.linked.project.path="$MODULE_DIR$/../.." external.root.project.path="$MODULE_DIR$/../.." external.system.id="GRADLE" type="JAVA_MODULE" version="4">
+  <component name="FacetManager">
+    <facet type="android-gradle" name="Android-Gradle">
+      <configuration>
+        <option name="GRADLE_PROJECT_PATH" value=":" />
+        <option name="LAST_SUCCESSFUL_SYNC_AGP_VERSION" />
+        <option name="LAST_KNOWN_AGP_VERSION" />
+      </configuration>
+    </facet>
+  </component>
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$/../.." />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/android/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/modules/android.iml" filepath="$PROJECT_DIR$/.idea/modules/android.iml" />
+    </modules>
+  </component>
+</project>

package/android/.idea/sonarlint/issuestore/index.pb

@@ -0,0 +1,3 @@
+
+<
+build.gradle,f/0/f07866736216be0ee2aba49e392191aeae700a35

package/android/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
+  </component>
+</project>

package/android/build.gradle

@@ -26,7 +26,7 @@ def safeExtGet(prop, fallback) {
 }
 
 android {
-    compileSdkVersion safeExtGet('Hmssdk_compileSdkVersion', 29)
+    compileSdkVersion safeExtGet('Hmssdk_compileSdkVersion', 30)
     defaultConfig {
         minSdkVersion safeExtGet('Hmssdk_minSdkVersion', 21)
         targetSdkVersion safeExtGet('Hmssdk_targetSdkVersion', 29)
@@ -63,6 +63,8 @@ dependencies {
     //noinspection GradleDynamicVersion
     implementation "com.facebook.react:react-native:+"
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"  // From node_modules
-    implementation 'com.github.100mslive:android-sdk:2.2.5'
+    implementation 'com.github.100mslive.android-sdk:lib:2.3.4'
     implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.5.0'
+    implementation 'androidx.constraintlayout:constraintlayout:2.1.0'
+    implementation 'androidx.appcompat:appcompat:1.3.1'
 }

package/android/local.properties

@@ -0,0 +1,8 @@
+## This file must *NOT* be checked into Version Control Systems,
+# as it contains information specific to your local configuration.
+#
+# Location of the SDK. This is only used by Gradle.
+# For customization when using a Version Control System, please read the
+# header note.
+#Tue Mar 01 18:12:03 IST 2022
+sdk.dir=/Users/yogesh/Library/Android/sdk

package/android/src/main/java/com/reactnativehmssdk/HmsDecoder.kt

@@ -31,8 +31,10 @@ object HmsDecoder {
           "serverRecordingState",
           this.getHMSServerRecordingState(hmsRoom.serverRecordingState)
       )
+      room.putMap("hlsStreamingState", this.getHMSHlsStreamingState(hmsRoom.hlsStreamingState))
       room.putMap("localPeer", this.getHmsLocalPeer(hmsRoom.localPeer))
       room.putArray("peers", this.getAllPeers(hmsRoom.peerList))
+      room.putInt("peerCount", hmsRoom.peerCount)
     }
     return room
   }
@@ -122,7 +124,7 @@ object HmsDecoder {
       permissions.putBoolean("changeRoleForce", hmsPermissions.changeRoleForce)
       permissions.putBoolean("unmute", hmsPermissions.unmute)
       permissions.putBoolean("recording", hmsPermissions.recording)
-      permissions.putBoolean("rtmp", hmsPermissions.rtmp)
+      permissions.putBoolean("streaming", hmsPermissions.streaming)
       permissions.putBoolean("changeRole", hmsPermissions.changeRole)
     }
     return permissions
@@ -153,7 +155,7 @@ object HmsDecoder {
 
   private fun getHmsAudioSettings(hmsAudioSettings: AudioParams?): WritableMap {
     val audioSettings: WritableMap = Arguments.createMap()
-    if (hmsAudioSettings != null) {
+    if (hmsAudioSettings != null && hmsAudioSettings.codec != null) {
       audioSettings.putInt("bitRate", hmsAudioSettings.bitRate)
       audioSettings.putString("codec", hmsAudioSettings.codec.name)
     }
@@ -162,7 +164,7 @@ object HmsDecoder {
 
   private fun getHmsVideoSettings(hmsVideoSettings: VideoParams?): WritableMap {
     val videoSettings: WritableMap = Arguments.createMap()
-    if (hmsVideoSettings != null) {
+    if (hmsVideoSettings != null && hmsVideoSettings.codec != null) {
       videoSettings.putInt("bitRate", hmsVideoSettings.bitRate)
       videoSettings.putInt("frameRate", hmsVideoSettings.frameRate)
       videoSettings.putInt("width", hmsVideoSettings.width)
@@ -361,11 +363,34 @@ object HmsDecoder {
     return decodedError
   }
 
+  private fun getCustomError(message: String?, code: Int?): WritableMap {
+    val decodedError: WritableMap = Arguments.createMap()
+    var customCode = 101
+    var customMessage = "SOMETHING WENT WRONG"
+    if (code !== null) {
+      customCode = code.toInt()
+    }
+    if (message !== null) {
+      customMessage = message
+    }
+    decodedError.putInt("code", customCode)
+    decodedError.putString("localizedDescription", customMessage)
+    decodedError.putString("description", customMessage)
+    decodedError.putString("message", customMessage)
+    decodedError.putInt("name", customCode)
+    decodedError.putInt("action", customCode)
+
+    return decodedError
+  }
+
   private fun getHMSBrowserRecordingState(data: HMSBrowserRecordingState?): ReadableMap {
     val input = Arguments.createMap()
     if (data !== null) {
       input.putBoolean("running", data.running)
-      input.putMap("error", data.error?.let { this.getError(it) })
+      input.putString("startedAt", data.startedAt.toString())
+      input.putString("stoppedAt", data.stoppedAt.toString())
+      input.putBoolean("running", data.running)
+      input.putMap("error", this.getCustomError(data.error?.message, data.error?.code))
     }
     return input
   }
@@ -374,7 +399,9 @@ object HmsDecoder {
     val input = Arguments.createMap()
     if (data !== null) {
       input.putBoolean("running", data.running)
-      input.putMap("error", data.error?.let { this.getError(it) })
+      input.putString("startedAt", data.startedAt.toString())
+      input.putString("stoppedAt", data.stoppedAt.toString())
+      input.putMap("error", this.getCustomError(data.error?.message, data.error?.code))
     }
     return input
   }
@@ -383,11 +410,36 @@ object HmsDecoder {
     val input = Arguments.createMap()
     if (data !== null) {
       input.putBoolean("running", data.running)
+      input.putString("startedAt", data.startedAt.toString())
       input.putMap("error", data.error?.let { this.getError(it) })
     }
     return input
   }
 
+  private fun getHMSHlsStreamingState(data: HMSHLSStreamingState?): ReadableMap {
+    val input = Arguments.createMap()
+    if (data !== null) {
+      input.putBoolean("running", data.running)
+      input.putArray("variants", this.getHMSHLSVariant(data.variants))
+    }
+    return input
+  }
+
+  private fun getHMSHLSVariant(data: ArrayList<HMSHLSVariant>?): ReadableArray {
+    val variants = Arguments.createArray()
+    if (data !== null) {
+      for (variant in data) {
+        val input = Arguments.createMap()
+        input.putString("hlsStreamUrl", variant.hlsStreamUrl)
+        input.putString("meetingUrl", variant.meetingUrl)
+        input.putString("metadata", variant.metadata)
+        input.putString("startedAt", variant.startedAt.toString())
+        variants.pushMap(input)
+      }
+    }
+    return variants
+  }
+
   private fun getHmsSubscribeSettings(hmsSubscribeSettings: SubscribeParams?): WritableMap {
     val subscribeSettings: WritableMap = Arguments.createMap()
     if (hmsSubscribeSettings != null) {
@@ -446,4 +498,14 @@ object HmsDecoder {
     }
     return decodedTracks
   }
+
+  fun getHmsMessageRecipient(recipient: HMSMessageRecipient?): WritableMap {
+    val hmsRecipient: WritableMap = Arguments.createMap()
+    if (recipient != null) {
+      hmsRecipient.putMap("recipientPeer", this.getHmsPeer(recipient.recipientPeer))
+      hmsRecipient.putArray("recipientRoles", this.getAllRoles(recipient.recipientRoles))
+      hmsRecipient.putString("recipientType", recipient.recipientType.name)
+    }
+    return hmsRecipient
+  }
 }