@100mslive/react-native-hms 0.9.1 → 0.9.4

package/README.md

@@ -19,6 +19,16 @@
 
 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
@@ -62,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
 
@@ -76,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
 
@@ -95,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
 
@@ -115,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
 
@@ -141,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';
@@ -165,23 +200,44 @@ 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
+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';
@@ -197,20 +253,177 @@ hmsInstance?.sendGroupMessage(message, [role[0]);
 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
 ```
 
-# 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`
+## 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/build.gradle

@@ -63,7 +63,7 @@ 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:lib:2.3.1'
+    implementation 'com.github.100mslive.android-sdk:lib:2.3.5'
     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/src/main/java/com/reactnativehmssdk/HmsDecoder.kt

@@ -1,6 +1,7 @@
 package com.reactnativehmssdk
 
 import com.facebook.react.bridge.*
+import live.hms.video.connection.stats.quality.HMSNetworkQuality
 import live.hms.video.error.HMSException
 import live.hms.video.media.settings.HMSAudioTrackSettings
 import live.hms.video.media.settings.HMSVideoResolution
@@ -47,6 +48,7 @@ object HmsDecoder {
       peer.putBoolean("isLocal", hmsPeer.isLocal)
       peer.putString("customerUserID", hmsPeer.customerUserID)
       peer.putString("metadata", hmsPeer.metadata)
+      peer.putMap("networkQuality", this.getHmsNetworkQuality(hmsPeer.networkQuality))
       peer.putMap("audioTrack", this.getHmsAudioTrack(hmsPeer.audioTrack))
       peer.putMap("videoTrack", this.getHmsVideoTrack(hmsPeer.videoTrack))
       peer.putMap("role", this.getHmsRole(hmsPeer.hmsRole))
@@ -182,6 +184,7 @@ object HmsDecoder {
       peer.putBoolean("isLocal", hmsLocalPeer.isLocal)
       peer.putString("customerUserID", hmsLocalPeer.customerUserID)
       peer.putString("metadata", hmsLocalPeer.metadata)
+      peer.putMap("networkQuality", this.getHmsNetworkQuality(hmsLocalPeer.networkQuality))
       peer.putMap("audioTrack", this.getHmsAudioTrack(hmsLocalPeer.audioTrack))
       peer.putMap("videoTrack", this.getHmsVideoTrack(hmsLocalPeer.videoTrack))
       peer.putMap("role", this.getHmsRole(hmsLocalPeer.hmsRole))
@@ -276,6 +279,7 @@ object HmsDecoder {
       peer.putBoolean("isLocal", hmsRemotePeer.isLocal)
       peer.putString("customerUserID", hmsRemotePeer.customerUserID)
       peer.putString("metadata", hmsRemotePeer.metadata)
+      peer.putMap("networkQuality", this.getHmsNetworkQuality(hmsRemotePeer.networkQuality))
       peer.putMap("audioTrack", this.getHmsAudioTrack(hmsRemotePeer.audioTrack))
       peer.putMap("videoTrack", this.getHmsVideoTrack(hmsRemotePeer.videoTrack))
       peer.putMap("role", this.getHmsRole(hmsRemotePeer.hmsRole))
@@ -498,4 +502,22 @@ 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
+  }
+
+  private fun getHmsNetworkQuality(networkQuality: HMSNetworkQuality?): WritableMap {
+    val hmsNetworkQuality: WritableMap = Arguments.createMap()
+    if (networkQuality != null) {
+      hmsNetworkQuality.putInt("downlinkQuality", networkQuality.downlinkQuality)
+    }
+    return hmsNetworkQuality
+  }
 }

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

@@ -1,17 +1,33 @@
 package com.reactnativehmssdk
 
+import android.content.Context
+import android.graphics.Bitmap
+import android.media.MediaScannerConnection
+import android.os.Build
+import android.os.Environment
+import android.os.Handler
+import android.util.Log
+import android.view.PixelCopy
+import androidx.annotation.RequiresApi
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.ReadableMap
+import live.hms.video.error.HMSException
 import live.hms.video.media.codec.HMSAudioCodec
 import live.hms.video.media.codec.HMSVideoCodec
 import live.hms.video.media.settings.HMSAudioTrackSettings
 import live.hms.video.media.settings.HMSTrackSettings
 import live.hms.video.media.settings.HMSVideoResolution
 import live.hms.video.media.settings.HMSVideoTrackSettings
-import live.hms.video.media.tracks.*
+import live.hms.video.media.tracks.HMSRemoteAudioTrack
+import live.hms.video.media.tracks.HMSRemoteVideoTrack
+import live.hms.video.media.tracks.HMSTrack
 import live.hms.video.sdk.models.*
-import live.hms.video.sdk.models.role.*
+import live.hms.video.sdk.models.role.HMSRole
 import live.hms.video.utils.HmsUtilities
+import org.webrtc.SurfaceViewRenderer
+import java.io.File
+import java.io.FileOutputStream
+import java.util.*
 
 object HmsHelper {
 
@@ -107,7 +123,7 @@ object HmsHelper {
 
   fun getTrackFromTrackId(trackId: String?, room: HMSRoom?): HMSTrack? {
     if (trackId != null && room != null) {
-      HmsUtilities.getTrack(trackId, room)
+      return HmsUtilities.getTrack(trackId, room)
     }
     return null
   }
@@ -120,9 +136,7 @@ object HmsHelper {
     var useHardwareEchoCancellation = false
     val requiredKeysUseHardwareEchoCancellation =
         this.areAllRequiredKeysAvailable(
-            data,
-            arrayOf(Pair("useHardwareEchoCancellation", "Boolean"))
-        )
+            data, arrayOf(Pair("useHardwareEchoCancellation", "Boolean")))
     if (requiredKeysUseHardwareEchoCancellation) {
       useHardwareEchoCancellation = data.getBoolean("useHardwareEchoCancellation")
     }
@@ -270,6 +284,26 @@ object HmsHelper {
     return meetingURLVariants
   }
 
+  fun getHlsRecordingConfig(data: ReadableMap): HMSHlsRecordingConfig? {
+    if (areAllRequiredKeysAvailable(data, arrayOf(Pair("hlsRecordingConfig", "Map")))) {
+      val hmsHlsRecordingConfig = data.getMap("hlsRecordingConfig")
+      if (hmsHlsRecordingConfig != null) {
+        var singleFilePerLayer = false
+        var videoOnDemand = false
+        if (areAllRequiredKeysAvailable(
+            hmsHlsRecordingConfig, arrayOf(Pair("singleFilePerLayer", "Boolean")))) {
+          singleFilePerLayer = hmsHlsRecordingConfig.getBoolean("singleFilePerLayer")
+        }
+        if (areAllRequiredKeysAvailable(
+            hmsHlsRecordingConfig, arrayOf(Pair("videoOnDemand", "Boolean")))) {
+          videoOnDemand = hmsHlsRecordingConfig.getBoolean("videoOnDemand")
+        }
+        return HMSHlsRecordingConfig(singleFilePerLayer, videoOnDemand)
+      }
+    }
+    return null
+  }
+
   private fun getHMSHLSMeetingURLVariant(
       hmsMeetingURLVariant: HashMap<String, String>?
   ): HMSHLSMeetingURLVariant {
@@ -281,4 +315,161 @@ object HmsHelper {
     }
     return meetingURLVariant
   }
+
+  fun getHmsConfig(credentials: ReadableMap): HMSConfig {
+    var config =
+        HMSConfig(
+            credentials.getString("username") as String,
+            credentials.getString("authToken") as String,
+        )
+
+    when {
+      areAllRequiredKeysAvailable(
+          credentials,
+          arrayOf(
+              Pair("endpoint", "String"),
+              Pair("metadata", "String"),
+              Pair("captureNetworkQualityInPreview", "Boolean"))) -> {
+        config =
+            HMSConfig(
+                credentials.getString("username") as String,
+                credentials.getString("authToken") as String,
+                initEndpoint = credentials.getString("endpoint") as String,
+                metadata = credentials.getString("metadata") as String,
+                captureNetworkQualityInPreview =
+                    credentials.getBoolean("captureNetworkQualityInPreview"),
+            )
+      }
+      areAllRequiredKeysAvailable(
+          credentials, arrayOf(Pair("endpoint", "String"), Pair("metadata", "String"))) -> {
+        config =
+            HMSConfig(
+                credentials.getString("username") as String,
+                credentials.getString("authToken") as String,
+                initEndpoint = credentials.getString("endpoint") as String,
+                metadata = credentials.getString("metadata") as String,
+            )
+      }
+      areAllRequiredKeysAvailable(
+          credentials,
+          arrayOf(
+              Pair("endpoint", "String"), Pair("captureNetworkQualityInPreview", "Boolean"))) -> {
+        config =
+            HMSConfig(
+                credentials.getString("username") as String,
+                credentials.getString("authToken") as String,
+                initEndpoint = credentials.getString("endpoint") as String,
+                captureNetworkQualityInPreview =
+                    credentials.getBoolean("captureNetworkQualityInPreview"),
+            )
+      }
+      areAllRequiredKeysAvailable(
+          credentials,
+          arrayOf(
+              Pair("metadata", "String"), Pair("captureNetworkQualityInPreview", "Boolean"))) -> {
+        config =
+            HMSConfig(
+                credentials.getString("username") as String,
+                credentials.getString("authToken") as String,
+                metadata = credentials.getString("metadata") as String,
+                captureNetworkQualityInPreview =
+                    credentials.getBoolean("captureNetworkQualityInPreview"),
+            )
+      }
+      areAllRequiredKeysAvailable(credentials, arrayOf(Pair("endpoint", "String"))) -> {
+        config =
+            HMSConfig(
+                credentials.getString("username") as String,
+                credentials.getString("authToken") as String,
+                initEndpoint = credentials.getString("endpoint") as String,
+            )
+      }
+      areAllRequiredKeysAvailable(credentials, arrayOf(Pair("metadata", "String"))) -> {
+        config =
+            HMSConfig(
+                credentials.getString("username") as String,
+                credentials.getString("authToken") as String,
+                metadata = credentials.getString("metadata") as String,
+            )
+      }
+      areAllRequiredKeysAvailable(
+          credentials, arrayOf(Pair("captureNetworkQualityInPreview", "Boolean"))) -> {
+        config =
+            HMSConfig(
+                credentials.getString("username") as String,
+                credentials.getString("authToken") as String,
+                captureNetworkQualityInPreview =
+                    credentials.getBoolean("captureNetworkQualityInPreview"))
+      }
+    }
+    return config
+  }
+
+  @RequiresApi(Build.VERSION_CODES.N)
+  fun captureSurfaceView(surfaceView: SurfaceViewRenderer, context: Context, id: String?) {
+    try {
+      val bitmap: Bitmap =
+        Bitmap.createBitmap(surfaceView.width, surfaceView.height, Bitmap.Config.ARGB_8888)
+      PixelCopy.request(
+        surfaceView,
+        bitmap,
+        { copyResult ->
+          if (copyResult === PixelCopy.SUCCESS) {
+            Log.d("captureSurfaceView", "bitmap: $bitmap")
+            saveImage(bitmap, context, id)
+          } else {
+            HmsModule.hmsCollection[id]?.emitHMSError(
+              HMSException(
+                103,
+                copyResult.toString(),
+                copyResult.toString(),
+                copyResult.toString(),
+                copyResult.toString()
+              )
+            )
+            Log.e("captureSurfaceView", "copyResult: $copyResult")
+          }
+        },
+        Handler()
+      )
+    } catch (e: Exception) {
+      Log.e("captureSurfaceView", "error: $e")
+    }
+  }
+
+  private fun saveImage(finalBitmap: Bitmap, context: Context, id: String?) {
+    val folder = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DCIM)
+    if (!folder.exists()) {
+      folder.mkdir()
+    }
+    val generator = Random()
+    var n = 10000
+    n = generator.nextInt(n)
+    val fileName = "Image-$n.jpg"
+    val file = File(folder.absolutePath, fileName)
+    if (file.exists()) file.delete()
+    try {
+      val out = FileOutputStream(file)
+      finalBitmap.compress(Bitmap.CompressFormat.JPEG, 90, out)
+      out.flush()
+      out.close()
+    } catch (e: Exception) {
+      HmsModule.hmsCollection[id]?.emitHMSError(
+        HMSException(
+          103,
+          e.message.toString(),
+          e.message.toString(),
+          e.message.toString(),
+          e.message.toString()
+        )
+      )
+      Log.e("saveImage", "error: $e")
+    }
+    // Tell the media scanner about the new file so that it is
+    // immediately available to the user.
+    MediaScannerConnection.scanFile(context, arrayOf(file.toString()), null) { path, uri ->
+      Log.i("ExternalStorage", "Scanned $path:")
+      Log.i("ExternalStorage", "-> uri=$uri")
+    }
+  }
 }

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

@@ -216,11 +216,11 @@ class HmsModule(reactContext: ReactApplicationContext) :
   }
 
   @ReactMethod
-  fun startScreenshare(data: ReadableMap) {
+  fun startScreenshare(data: ReadableMap, callback: Promise?) {
     currentActivity?.application?.registerActivityLifecycleCallbacks(this)
     val hms = HmsHelper.getHms(data, hmsCollection)
 
-    hms?.startScreenshare()
+    hms?.startScreenshare(callback)
   }
 
   @ReactMethod