-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
24 changed files
with
575 additions
and
52 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -15,6 +15,17 @@ description: Release Notes for 100ms JavaScript SDK | |
| | @100mslive/hms-noise-cancellation | [](https://badge.fury.io/js/%40100mslive%2Fhms-noise-cancellation) | | ||
| | @100mslive/hms-video-react(deprecated) | [](https://badge.fury.io/js/%40100mslive%2Fhms-video-react) | | ||
|
|
||
| ## 2024-06-05 | ||
| Released: `@100mslive/[email protected]`, `@100mslive/[email protected]`, `@100mslive/[email protected]`, `@100mslive/[email protected]`, `@100mslive/[email protected]` | ||
|
|
||
| ### Added: | ||
| - Roomkit Prebuilt: Closed captions | ||
| - `findPeerByName` API for large rooms | ||
|
|
||
| ### Fixed: | ||
| - Average jitter buffer delay calculation | ||
| - Roomkit Prebuilt: peers able to submit quiz attempts multiple times by rejoining | ||
|
|
||
| ## 2024-05-24 | ||
| Released: `@100mslive/[email protected]`, `@100mslive/[email protected]`, `@100mslive/[email protected]`, `@100mslive/[email protected]`, `@100mslive/[email protected]` | ||
|
|
||
|
|
||
191 changes: 191 additions & 0 deletions
191
docs/react-native/v2/how-to-guides/extend-capabilities/virtual-background.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,191 @@ | ||
| --- | ||
| title: Virtual Background Plugin (Beta) | ||
| nav: 13.3 | ||
| --- | ||
|
|
||
| Virtual Background plugin helps in customising one’s background that replacing the background with a static image or blurring the background. | ||
| This guide provides an overview of usage of the Virtual Background plugin of 100ms. | ||
|
|
||
| <video loop="true" autoplay="autoplay" controls="controls" id="vid" muted height="700" width="300"> | ||
| <source src="/docs/guides/virtual-background-ui-demo.mov" type="video/mp4" /> | ||
| </video> | ||
| <br /> | ||
|
|
||
| ## Minimum Requirements | ||
|
|
||
| - Minimum `@100mslive/react-native-hms` SDK verison is `^1.10.6` | ||
| - `@100mslive/react-native-video-plugin` library is required | ||
|
|
||
|
|
||
| ## Limitations | ||
|
|
||
| ### Android | ||
| - Has poor fps on older android phones | ||
|
|
||
| ### iOS | ||
| - Minimum iOS version required to support Virtual Background plugin is `iOS 15` | ||
| - Virtual background plugin is in beta stage and may have performance issues on iPhone X, 8, 7, 6 and other older devices. We recommend that you use this feature on a high performance device for smooth experience. | ||
|
|
||
|
|
||
| ## Usage | ||
|
|
||
| <div className="steps-container"> | ||
|
|
||
| ### Step 1: Add required dependency | ||
|
|
||
| Install `@100mslive/react-native-video-plugin` library | ||
|
|
||
| ```bash | ||
| npm install @100mslive/react-native-video-plugin | ||
| ``` | ||
|
|
||
| ### Step 2: Create instance of HMSVirtualBackgroundPlugin | ||
|
|
||
| ```js{2,6} | ||
| // Import from `@100mslive/react-native-video-plugin` library | ||
| import { HMSVirtualBackgroundPlugin } from '@100mslive/react-native-video-plugin'; | ||
| ... | ||
| const virtualBackgroundPlugin = new HMSVirtualBackgroundPlugin(); | ||
| ``` | ||
|
|
||
| ### Step 3: Create instance of HMSVideoTrackSettings | ||
|
|
||
| ```js{4} | ||
| let videoSettings = new HMSVideoTrackSettings({ | ||
| initialState: HMSTrackSettingsInitState.MUTED | ||
| // The virtual background plugin to use for the video track. @type {HMSVirtualBackgroundPlugin} | ||
| videoPlugin: virtualBackgroundPlugin, | ||
| }); | ||
| let trackSettings = new HMSTrackSettings({ | ||
| video: videoSettings, | ||
| }); | ||
| ``` | ||
|
|
||
| ### Step 4: Pass the Track Settings to the HMSSDK | ||
|
|
||
| ```js{2} | ||
| const hmsInstance = await HMSSDK.build({ | ||
| trackSettings, | ||
| }); | ||
| ``` | ||
|
|
||
| ### Step 5: How to enable and disable virtual background | ||
|
|
||
| Hold on to a reference to the instance of HMSVirtualBackgroundPlugin and use `enable` and `disable` methods on it to enable/disable the virtual background. | ||
|
|
||
| ```js | ||
| const virtualBackgroundPlugin = new HMSVirtualBackgroundPlugin(); | ||
|
|
||
| ... | ||
|
|
||
| let isVBEnabled = false; | ||
|
|
||
| // Enable VB | ||
| await virtualBackgroundPlugin.enable(); | ||
| isVBEnabled = true; | ||
|
|
||
| // Disable VB | ||
| await virtualBackgroundPlugin.disable(); | ||
| isVBEnabled = false; | ||
| ``` | ||
|
|
||
| > Always call `enable` method after `ON_JOIN` and `ON_PREVIEW` event | ||
| > Enabling Virtual Background and applying effect can take some time, you should add a loader in UI. | ||
| ### Step 6: How to apply Blur as virtual background | ||
|
|
||
| Enable the blur background using the `setBlur` method. You should pass blur percentage ranging from 0-100 | ||
|
|
||
| ```js | ||
| const virtualBackgroundPlugin = new HMSVirtualBackgroundPlugin(); | ||
|
|
||
| ... | ||
| // state for tracking if VB is enabled | ||
| let isVBEnabled = false; | ||
|
|
||
| // If VB is disabled, first enable it before calling `setBlur` method | ||
| if (isVBEnabled === false) { | ||
| await virtualBackgroundPlugin.enable(); | ||
| isVBEnabled = true; | ||
| } | ||
|
|
||
| await virtualBackgroundPlugin.setBlur(100); | ||
| ``` | ||
|
|
||
| > You should only call `setBlur` method only after enabling the virtual background | ||
| ### Step 7: How to apply Image as virtual background | ||
|
|
||
| Enable the background image using the `setBackground` method. It accepts image source (either a object with height, width and uri properties or a static image file). | ||
|
|
||
| Here is how to use a static image file - | ||
|
|
||
| ```js | ||
| const virtualBackgroundPlugin = new HMSVirtualBackgroundPlugin(); | ||
|
|
||
| ... | ||
| // state for tracking if VB is enabled | ||
| let isVBEnabled = false; | ||
|
|
||
| // If VB is disabled, first enable it before calling `setBlur` method | ||
| if (isVBEnabled === false) { | ||
| await virtualBackgroundPlugin.enable(); | ||
| isVBEnabled = true; | ||
| } | ||
|
|
||
| const image = require('<PATH_TO_IMAGE_HERE>'); // ex: require('../assets/VB-1.jpg') | ||
| await virtualBackgroundPlugin.setBackground(image); | ||
| ``` | ||
|
|
||
| Here is how to use remote image file, `setBackground` method accepts object of following type - | ||
|
|
||
| ```js | ||
| export interface ImageURISource { | ||
| width: number; | ||
|
|
||
| height: number; | ||
|
|
||
| /** | ||
| * `uri` is a string representing the resource identifier for the image, which | ||
| * could be an http address, a local file path, or the name of a static image | ||
| * resource (which should be wrapped in the `require('./path/to/image.png')` | ||
| * function). | ||
| */ | ||
| uri: | ||
| } | ||
|
|
||
| ... | ||
|
|
||
| await virtualBackgroundPlugin.setBackground({ | ||
| width, | ||
| height, | ||
| uri: 'file://...', // path of image stored in device | ||
| }); | ||
| ``` | ||
|
|
||
| Using library like [react-native-image-picker](https://www.npmjs.com/package/react-native-image-picker) - | ||
|
|
||
| ```js | ||
| import { launchImageLibrary } from 'react-native-image-picker'; | ||
|
|
||
| ... | ||
|
|
||
| // You can use result from library like `react-native-image-picker` to use images from photo library | ||
| const result = await launchImageLibrary({ mediaType: 'photo', selectionLimit: 1 }); | ||
|
|
||
| // getting first image | ||
| const imageObject = response.assets?.[0]; | ||
|
|
||
| // If image is selected, use it as background | ||
| if (imageObject) { | ||
| await virtualBackgroundPlugin.setBackground(imageObject); | ||
| } | ||
| ``` | ||
| > You should only call `setBackground` method only after enabling the virtual background | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.