Merge pull request #266 from 100mslive/develop

Develop to main

README.md

@@ -4,6 +4,7 @@
 </a>
 
 # react-native-hms
+
 [![npm](https://img.shields.io/npm/v/@100mslive/react-native-hms)](https://www.npmjs.com/package/@100mslive/react-native-hms)
 [![license](https://img.shields.io/npm/l/@100mslive/react-native-hms)](https://www.100ms.live/)
 [![quality](https://img.shields.io/npms-io/quality-score/@100mslive/react-native-hms)](https://www.npmjs.com/package/@100mslive/react-native-hms)
@@ -29,11 +30,10 @@ cd ios/ && pod install
 
 🤖 Download the Sample Android App here: https://appdistribution.firebase.dev/i/7b7ab3b30e627c35
 
-
-
 ## Permissions
 
 ### For iOS Permissions
+
 Add following lines in `Info.plist` file
 
 ```xml
@@ -46,6 +46,7 @@ Add following lines in `Info.plist` file
 ```
 
 ### For Android Permissions
+
 Add following permissions in `AndroidManifest.xml`
 
 ```xml
@@ -58,12 +59,14 @@ You will also need to request Camera and Record Audio permissions at runtime bef
 
 We suggest using [react-native-permission](https://www.npmjs.com/package/react-native-permissions) to acquire permissions from both platforms.
 
-
 ## QuickStart
+
 The package exports four Classes and an HMSManager class that manages everything.
 
 # Setting up the HMS Instance:
+
 first we'll have to call build method, that method returns an instance of HMSManager class and the same is used to perform all the operations
+
 ```js
 import HmsManager from 'react-native-hms';
 ...
@@ -75,7 +78,9 @@ const hmsInstance = await HmsManager.build();
 ```
 
 # Add event listeners
+
 add event listeners for all the events such as onPreview, onJoin, onPeerUpdate etc. the actions can be found in HMSUpdateListenerActions class
+
 ```js
 import HmsManager, {
   HMSUpdateListenerActions,
@@ -90,11 +95,13 @@ hmsInstance.addEventListener(
 
 ...
 ```
-The event handlers are the way of handling any update happening in hms all events can be found in HMSUpdateListenerActions class
 
+The event handlers are the way of handling any update happening in hms all events can be found in HMSUpdateListenerActions class
 
 # 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
+
 ```js
 import HmsManager, {
   HMSUpdateListenerActions,
@@ -105,15 +112,18 @@ import HmsManager, {
 // instance acquired from build() method
 const HmsConfig = new HMSConfig({authToken, userID, roomID});
 instance.preview(HmsConfig); // to start preview
-// or 
+// or
 instance.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
-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
+
+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
+
 ```js
 ...
 
@@ -136,8 +146,9 @@ remotePeers.map((remotePeer: any) => {
 ```
 
 # Display a video in HmsView
+
 ```js
-import { HmsView } from 'react-native-hms';
+import { HmsView, HMSVideoViewMode } from 'react-native-hms';
 
 ...
 const styles = StyleSheet.create({
@@ -148,14 +159,17 @@ const styles = StyleSheet.create({
 });
 
 // trackId can be acquired from the method explained above
-<HmsView style={styles.hmsView} trackId={trackId} />
+// sink is passed false video would be removed. It is a ios only prop, for android it is handled by the package itself.
+// scaleType can be selected from HMSVideoViewMode as required
+// mirror can be passed as true to flip videos horizontally
+<HmsView sink={true} style={styles.hmsView} trackId={trackId} mirror={true} scaleType={HMSVideoViewMode.ASPECT_FILL} />
 
 ...
 ```
 
 # Calling various functions of HMS
-```js
 
+```js
 // Mute Audio
 instance.localPeer.localAudioTrack().setMute(isMute);
 
@@ -166,32 +180,31 @@ instance.localPeer.localVideoTrack().setMute(muteVideo);
 instance.localPeer.localVideoTrack().switchCamera();
 
 // Leave the call
-instance.leave()
-
+instance.leave();
 ```
 
 # Sending messages
+
 ```js
 import { HMSMessage } from '@100mslive/react-native-hms';
-  
+
 // message object
 const message = new HMSMessage({
   type: 'chat',
   time: new Date().toISOString(),
   message: value,
 });
-  
+
 // send a message
 instance.send(message);
-
 ```
-  
+
 # Error handling
+
 ```js
 // import actions
 import { HMSUpdateListenerActions } from '@100mslive/react-native-hms';
-  
+
 // add a event listener
 instance.addEventListener(HMSUpdateListenerActions.ON_ERROR, onError);
-
 ```

android/build.gradle

@@ -64,6 +64,6 @@ 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:v2.1.4'
+    implementation 'com.github.100mslive:android-sdk:v2.1.5'
     implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.5.0'
 }

android/src/main/java/com/reactnativehmssdk/HmsView.kt

@@ -54,9 +54,12 @@ class HmsView(context: ReactContext) : FrameLayout(context) {
     }
   }
 
-  fun setData(trackId: String?, sink: Boolean?, hms: HMSSDK?) {
+  fun setData(trackId: String?, sink: Boolean?,mirror: Boolean?, hms: HMSSDK?) {
     if (trackId != null) {
       localTrack = trackId
+      if (mirror != null) {
+        surfaceView.setMirror(mirror)
+      }
       val localTrackId = hms?.getLocalPeer()?.videoTrack?.trackId
       if (localTrackId == localTrack) {
         videoTrack = hms?.getLocalPeer()?.videoTrack

android/src/main/java/com/reactnativehmssdk/HmssdkViewManager.kt

@@ -28,9 +28,10 @@ class HmssdkViewManager : SimpleViewManager<HmsView>() {
   fun setData(view: HmsView, data: ReadableMap) {
     val trackId = data.getString("trackId")
     val sink = data.getBoolean("sink")
+    val mirror = data.getBoolean("mirror")
 
     val hms = getHms()
-    view.setData(trackId, sink, hms)
+    view.setData(trackId, sink, mirror, hms)
     // do the processing here
   }
 

documentation/features/render-video.mdx

@@ -7,18 +7,18 @@ nav: 3.6
 
 It all comes down to this. All the setup so far has been done so that we can show live streaming video in our beautiful apps.
 
-The React Native SDK provides a Component HmsView that renders the video on screen. We have to pass video trackId and sink in this component. When sink is true the video will be visible and when it is false video would be removed. It is ios only prop for android it is handled by the package itself. Here is a code snippet explaining the way to link a videoTrack to HmsView.
+The React Native SDK provides a Component HmsView that renders the video on screen. We have to pass video trackId, scaleType and sink in this component. The prop scaleType can be selected from HMSVideoViewMode as required. When sink is true the video will be visible and when it is false video would be removed. We can also add mirror a boolean prop as true to flip videos horizontally. Here is a code snippet explaining the way to link a videoTrack to HmsView.
 
 ```js
-import { HmsView } from 'react-native-hms';
+import { HmsView, HMSVideoViewMode } from 'react-native-hms';
 ...
 const styles = StyleSheet.create({
   hmsView: {
     height: '100%',
     width: '100%',
   },
 });
-<HmsView sink={true} style={styles.hmsView} trackId={trackId} />
+<HmsView sink={true} style={styles.hmsView} trackId={trackId} mirror={true} scaleType={HMSVideoViewMode.ASPECT_FILL} />
 ...
 ```
 
@@ -34,26 +34,32 @@ these track IDs can directly be passed to HmsView component
 > A Pro tip: for fastest updates we can use ON_PEER_UPDATE and ON_TRACK_UPDATE listeners, these listeners get updated localPeer and remotePeers whenever there is any event related to these values.
 
 ```js
-HmsInstance.addEventListener(HMSUpdateListenerActions.ON_PEER_UPDATE, onPeerListener);
-HmsInstance.addEventListener(HMSUpdateListenerActions.ON_TRACK_UPDATE, onTrackListener);
+HmsInstance.addEventListener(
+  HMSUpdateListenerActions.ON_PEER_UPDATE,
+  onPeerListener
+);
+HmsInstance.addEventListener(
+  HMSUpdateListenerActions.ON_TRACK_UPDATE,
+  onTrackListener
+);
 const onPeerListener = ({
-    remotePeers,
-    localPeer
+  remotePeers,
+  localPeer,
 }: {
-    room?: any,
-    localPeer: any,
-    remotePeers: any
+  room?: any,
+  localPeer: any,
+  remotePeers: any,
 }) => {
-    updateVideoIds(remotePeers, localPeer); // this function can be used to update local and remotePeers on React-Native side
+  updateVideoIds(remotePeers, localPeer); // this function can be used to update local and remotePeers on React-Native side
 };
 const onTrackListener = ({
-    remotePeers,
-    localPeer
+  remotePeers,
+  localPeer,
 }: {
-    room?: any,
-    localPeer: any,
-    remotePeers: any
+  room?: any,
+  localPeer: any,
+  remotePeers: any,
 }) => {
-    updateVideoIds(remotePeers, localPeer);
+  updateVideoIds(remotePeers, localPeer);
 };
 ```

documentation/guides/quickstart.mdx

@@ -50,9 +50,9 @@ Add following lines in `Info.plist` file
 
 ## Concepts
 
--   Room: When we join a conference call, the participants are said to be in a video call room.
--   Peer: A participant in the video call. You are the local peer while others are remote peers.
--   Track: Media. There are two types of track a peer can have - audio and video.
+- Room: When we join a conference call, the participants are said to be in a video call room.
+- Peer: A participant in the video call. You are the local peer while others are remote peers.
+- Track: Media. There are two types of track a peer can have - audio and video.
 
 ## Initializing the SDK
 
@@ -77,8 +77,8 @@ import HmsManager, { HMSUpdateListenerActions } from 'react-native-hms';
 
 // instance acquired from build() method
 hmsInstance.addEventListener(
-    HMSUpdateListenerActions.ON_PREVIEW,
-    onPreview // function that will be called on Preview success
+  HMSUpdateListenerActions.ON_PREVIEW,
+  onPreview // function that will be called on Preview success
 );
 
 hmsInstance.addEventListener(HMSUpdateListenerActions.ON_ERROR, onError);
@@ -96,7 +96,10 @@ To join a room 3 fields are required:
 - `roomID` (optional): The ID of the room that you wanna join
 
 ```js
-import HmsManager, { HMSUpdateListenerActions, HMSConfig } from 'react-native-hms';
+import HmsManager, {
+  HMSUpdateListenerActions,
+  HMSConfig,
+} from 'react-native-hms';
 
 // instance acquired from build() method
 const HmsConfig = new HMSConfig({ authToken, userID, roomID, userName });
@@ -118,19 +121,25 @@ hmsInstance.leave();
 
 ## Render video
 
-Let us next add a way to show a tile for every participant in the room. We use HmsView component to render video on screen. This component takes Sink, TrackId of HMSVideoTrack and renders the corresponding track. When sink is true the video will be visible and when it is false video would be removed. It is ios only prop for android it is handled by the package itself.
+Let us next add a way to show a tile for every participant in the room. We use HmsView component to render video on screen. This component takes sink, trackId and scaleType of HMSVideoTrack and renders the corresponding track. The prop scaleType can be selected from HMSVideoViewMode as required. When sink is true the video will be visible and when it is false video would be removed. It is ios only prop for android it is handled by the package itself. We can also add mirror a boolean prop as true to flip videos horizontally. Here is a code snippet explaining the way to link a videoTrack to HmsView.
 
 ```js
-import { HmsView } from 'react-native-hms';
+import { HmsView, HMSVideoViewMode } from 'react-native-hms';
 
 const styles = StyleSheet.create({
-    hmsView: {
-        height: '100%',
-        width: '100%'
-    }
+  hmsView: {
+    height: '100%',
+    width: '100%',
+  },
 });
 
-<HmsView sink={true} style={styles.hmsView} trackId={trackId} />;
+<HmsView
+  sink={true}
+  style={styles.hmsView}
+  trackId={trackId}
+  mirror={true}
+  scaleType={HMSVideoViewMode.ASPECT_FILL}
+/>;
 ```
 
 There are 2 types of Peers - a localPeer & remotePeers. To extract trackId from peers we can use following code snippet.
@@ -146,30 +155,36 @@ These track IDs can directly be passed to HmsView component
 > A Pro tip: for fastest updates we can use ON_PEER_UPDATE and ON_TRACK_UPDATE listeners, these listeners get updated localPeer and remotePeers whenever there is any event related to these values.
 
 ```js
-HmsInstance.addEventListener(HMSUpdateListenerActions.ON_PEER_UPDATE, onPeerListener);
+HmsInstance.addEventListener(
+  HMSUpdateListenerActions.ON_PEER_UPDATE,
+  onPeerListener
+);
 
-HmsInstance.addEventListener(HMSUpdateListenerActions.ON_TRACK_UPDATE, onTrackListener);
+HmsInstance.addEventListener(
+  HMSUpdateListenerActions.ON_TRACK_UPDATE,
+  onTrackListener
+);
 
 const onPeerListener = ({
-    remotePeers,
-    localPeer
+  remotePeers,
+  localPeer,
 }: {
-    room?: any,
-    localPeer: any,
-    remotePeers: any
+  room?: any,
+  localPeer: any,
+  remotePeers: any,
 }) => {
-    updateVideoIds(remotePeers, localPeer); // this function can be used to update local and remotePeers on React-Native side
+  updateVideoIds(remotePeers, localPeer); // this function can be used to update local and remotePeers on React-Native side
 };
 
 const onTrackListener = ({
-    remotePeers,
-    localPeer
+  remotePeers,
+  localPeer,
 }: {
-    room?: any,
-    localPeer: any,
-    remotePeers: any
+  room?: any,
+  localPeer: any,
+  remotePeers: any,
 }) => {
-    updateVideoIds(remotePeers, localPeer);
+  updateVideoIds(remotePeers, localPeer);
 };
 ```