https://github.com/100mslive/flutter-video-plugin
100ms Flutter Video filter and Effects Package
https://github.com/100mslive/flutter-video-plugin
android audio blur dart effects filters flutter ios live package real-time video virtual-background webrtc
Last synced: about 1 year ago
JSON representation
100ms Flutter Video filter and Effects Package
- Host: GitHub
- URL: https://github.com/100mslive/flutter-video-plugin
- Owner: 100mslive
- License: mit
- Created: 2024-05-27T11:08:23.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-01T07:47:11.000Z (almost 2 years ago)
- Last Synced: 2025-03-07T05:30:53.471Z (about 1 year ago)
- Topics: android, audio, blur, dart, effects, filters, flutter, ios, live, package, real-time, video, virtual-background, webrtc
- Language: Kotlin
- Homepage: https://www.100ms.live/
- Size: 141 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 100ms Video Plugin
[](https://pub.dev/packages/hms_video_plugin)
[](https://github.com/100mslive/100ms-flutter/actions/workflows/build.yml)
[](https://www.100ms.live/)
[](https://docs.100ms.live/flutter/v2/foundation/basics)
[](https://100ms.live/discord)
[](https://appdistribution.firebase.dev/i/b623e5310929ab70)
[](https://testflight.apple.com/join/Uhzebmut)
[](https://github.com/100mslive/100ms-flutter/projects?type=classic)
[](https://dashboard.100ms.live/register)
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:
🤖 Download the Sample Android app here:
100ms Flutter apps are also released on the App Stores, you can download them here:
📲 iOS app on Apple App Store:
🤖 Android app on Google Play Store:
## 🚂 Setup Guide
1. Sign up on & visit the Developer tab to access your credentials.
2. Get familiarized with [Tokens & Security here](https://www.100ms.live/docs/flutter/v2/foundation/security-and-tokens)
3. Complete the steps in [Auth Token Quick Start Guide](https://www.100ms.live/docs/flutter/v2/guides/token)
4. Get the `hms_video_plugin` via [pub.dev](https://pub.dev/packages/hms_video_plugin). Add the `hms_video_plugin` to your pubspec.yaml.
📖 Do refer the Complete [Installation Guide here](https://www.100ms.live/docs/flutter/v2/features/integration).
## 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.
```yaml
hms_video_plugin:
```
## 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`
```dart
var videoTrackSetting = HMSVideoTrackSetting(
trackInitialState: joinWithMutedVideo
? HMSTrackInitState.MUTED
: HMSTrackInitState.UNMUTED,
isVirtualBackgroundEnabled: true);
```
#### 2. Pass the Track Settings to the HMSSDK constructor
```dart
/// Create Instance of `HMSTrackSetting`
var trackSettings = HMSTrackSetting(
audioTrackSetting: HMSAudioTrackSetting(),
videoTrackSetting: videoTrackSetting);
/// Set the track settings to HMSSDK
var hmsSDK = HMSSDK(
hmsTrackSetting: trackSettings);
```
#### Step 3: Check for Virtual Background availability
```dart
class Meeting implements HMSUpdateListener, HMSActionResultListener{
...
bool isVirtualBackgroundSupported = false;
/// This method checks the virtual background availability
void checkIsVirtualBackgroundSupported() async {
isVirtualBackgroundSupported = await HMSVideoPlugin.isSupported();
}
...
}
```
#### Step 4: If Virtual Background is available, enable it
To enable virtual background, call the `enable` method.
```dart
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
}
}
}
...
}
```
To enabled background blur, call the `enableBlur` method.
```dart
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
}
}
}
...
}
```
#### Step 5: To change virtual background image use changeVirtualBackground method
```dart
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);
}
}
...
}
```
#### Step 6: To disable Virtual Background use disable methods
To disable virtual background, call the `disable` method.
```dart
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
}
}
}
...
}
```
To disable background blur use `disableBlur` method
```dart
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
}
}
}
...
}
```