hms_video_plugin

Description:

hms video plugin

100ms Video Plugin #












Integrate virtual backgrounds, blur backgrounds effects in your Flutter app with the 100ms Video Plugin. 100ms video plugin enabled adding virtual backgrounds, blur backgrounds, and other video filters to your 100ms video conferencing app. The plugin is built on top of the 100ms Flutter SDK.
📖 Read the Complete Documentation here: https://www.100ms.live/docs/flutter/v2/guides/quickstart
📲 Download the Sample iOS app here: https://testflight.apple.com/join/Uhzebmut
🤖 Download the Sample Android app here: https://appdistribution.firebase.dev/i/b623e5310929ab70
100ms Flutter apps are also released on the App Stores, you can download them here:
📲 iOS app on Apple App Store: https://apps.apple.com/app/100ms-live/id1576541989
🤖 Android app on Google Play Store: https://play.google.com/store/apps/details?id=live.hms.flutter


🚂 Setup Guide #


Sign up on https://dashboard.100ms.live/register & visit the Developer tab to access your credentials.


Get familiarized with Tokens & Security here


Complete the steps in Auth Token Quick Start Guide


Get the hms_video_plugin via pub.dev. Add the hms_video_plugin to your pubspec.yaml.


📖 Do refer the Complete Installation Guide here.
Minimum Configuration #

Support for Flutter 3.10.0 or above
Support for Android API level 21 or above
Support for iOS 15 or above

Supported Versions/Resolutions #

Minimum 100ms SDK version it can work with is 1.10.3

Limitations #

Has poor fps on older android phones
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.

Add dependency #
To add virtual background to your application add hms_video_plugin to your application's pubspec.yaml file.
hms_video_plugin:
copied to clipboard
How to Integrate Virtual Background Plugin: #

🔑 Note: hms_video_plugin cannot be used independently. Always call the virtual background APIs after onJoin or onPreview.

1. Set the isVirtualBackgroundEnabled property in HMSVideoTrackSetting as true
var videoTrackSetting = HMSVideoTrackSetting(
trackInitialState: joinWithMutedVideo
? HMSTrackInitState.MUTED
: HMSTrackInitState.UNMUTED,
isVirtualBackgroundEnabled: true);
copied to clipboard
2. Pass the Track Settings to the HMSSDK constructor
/// Create Instance of `HMSTrackSetting`
var trackSettings = HMSTrackSetting(
audioTrackSetting: HMSAudioTrackSetting(),
videoTrackSetting: videoTrackSetting);
/// Set the track settings to HMSSDK
var hmsSDK = HMSSDK(
hmsTrackSetting: trackSettings);
copied to clipboard
Step 3: Check for Virtual Background availability
class Meeting implements HMSUpdateListener, HMSActionResultListener{
...
bool isVirtualBackgroundSupported = false;
/// This method checks the virtual background availability
void checkIsVirtualBackgroundSupported() async {
isVirtualBackgroundSupported = await HMSVideoPlugin.isSupported();
}
...
}
copied to clipboard
Step 4: If Virtual Background is available, enable it
To enable virtual background, call the enable method.
class Meeting implements HMSUpdateListener, HMSActionResultListener{
...
bool isVirtualBackgroundSupported = false;
/// This method checks the virtual background availability
void checkIsVirtualBackgroundSupported() async {
isVirtualBackgroundSupported = await HMSVideoPlugin.isSupported();
}
void enableVirtualBackground(Uint8List? image) async{
///[image] is the image to be set as background
if(isVirtualBackgroundSupported){
HMSException? isEnabled = await HMSVideoPlugin.enable(image: image);
if(isEnabled == null){
///Virtual background started successfully
}else{
///Error enabling virtual background
}
}
}
...
}
copied to clipboard
To enabled background blur, call the enableBlur method.
class Meeting implements HMSUpdateListener, HMSActionResultListener{
...
bool isVirtualBackgroundSupported = false;
/// This method checks the virtual background availability
void checkIsVirtualBackgroundSupported() async {
isVirtualBackgroundSupported = await HMSVideoPlugin.isSupported();
}
void enableBackgroundBlur(int blurRadius) async{
///[blurRadius] is the radius of the blur effect
if(isVirtualBackgroundSupported){
HMSException? isEnabled = await HMSVideoPlugin.enableBlur(blurRadius: blurRadius);
if(isEnabled == null){
///Background blur started successfully
}else{
///Error enabling blur
}
}
}
...
}
copied to clipboard
Step 5: To change virtual background image use changeVirtualBackground method
class Meeting implements HMSUpdateListener, HMSActionResultListener{
...
bool isVirtualBackgroundSupported = false;
/// This method checks the virtual background availability
void checkIsVirtualBackgroundSupported() async {
isVirtualBackgroundSupported = await HMSVideoPlugin.isSupported();
}
///If virtual background is enabled, then we can change the virtual background image
void changeVirtualBackground(Uint8List? image) {
///[image] is the image new image to be set as background
///[isVirtualBackgroundSupported] is the flag to check if virtual background is supported
///[isVirtualBackgroundEnabled] is the flag to check if virtual background is enabled
if(isVirtualBackgroundSupported && isVirtualBackgroundEnabled){
HMSVideoPlugin.changeVirtualBackground(image: image);
}
}
...
}
copied to clipboard
Step 6: To disable Virtual Background use disable methods
To disable virtual background, call the disable method.
class Meeting implements HMSUpdateListener, HMSActionResultListener{
...
bool isVirtualBackgroundSupported = false;
/// This method checks the virtual background availability
void checkIsVirtualBackgroundSupported() async {
isVirtualBackgroundSupported = await HMSVideoPlugin.isSupported();
}
void disableVirtualBackground() async{
if(isVirtualBackgroundSupported){
HMSException? isDisabled = await HMSVideoPlugin.disable();
if(isDisabled == null){
///Virtual Background disabled successfully
}else{
///Error disabling virtual background
}
}
}
...
}
copied to clipboard
To disable background blur use disableBlur method
class Meeting implements HMSUpdateListener, HMSActionResultListener{
...
bool isVirtualBackgroundSupported = false;
/// This method checks the virtual background availability
void checkIsVirtualBackgroundSupported() async {
isVirtualBackgroundSupported = await HMSVideoPlugin.isSupported();
}
void disableBackgroundBlur() async{
if(isVirtualBackgroundSupported){
HMSException? isDisabled = await HMSVideoPlugin.disableBlur();
if(isDisabled == null){
///Background blur disabled successfully
}else{
///Error disabling blur
}
}
}
...
}
copied to clipboard