Flutter视频处理插件hms_video_plugin的使用

通过集成虚拟背景和模糊背景效果，您可以为您的Flutter应用添加丰富的视频处理功能。100ms视频插件允许您在100ms视频会议应用中添加虚拟背景、模糊背景和其他视频过滤器。该插件基于100ms Flutter SDK构建。

📖 完整文档：100ms官方文档

📲 示例iOS应用下载：TestFlight

🤖 示例Android应用下载：Firebase

100ms Flutter应用已发布在应用商店中，您可以通过以下链接下载：

📲 iOS应用在Apple App Store：100ms Live

🤖 Android应用在Google Play Store：100ms Live

安装指南

1. 在100ms官网注册，并访问开发者标签以获取您的凭证。
2. 阅读令牌与安全文档。
3. 完成认证令牌快速入门指南中的步骤。
4. 在pubspec.yaml文件中添加hms_video_plugin依赖。

dependencies:
  hms_video_plugin: ^最新版本号

📖 参考完整的安装指南。

最低配置

• 支持Flutter 3.10.0及以上版本
• 支持Android API级别21及以上版本
• 支持iOS 15及以上版本

支持的版本/分辨率

• 最小支持的100ms SDK版本为1.10.3

限制

• 较旧的Android手机帧率较低
• 虚拟背景插件支持的最低iOS版本为iOS 15
• 虚拟背景插件处于测试阶段，在iPhone X, 8, 7, 6等较旧设备上可能存在性能问题。建议在高性能设备上使用以获得流畅体验。

添加依赖

要将虚拟背景添加到您的应用中，请将hms_video_plugin添加到应用的pubspec.yaml文件中。

dependencies:
  hms_video_plugin: ^最新版本号

如何集成虚拟背景插件

🗝️ 注意：hms_video_plugin不能独立使用。始终在onJoin或onPreview之后调用虚拟背景API。

1. 设置isVirtualBackgroundEnabled属性

var videoTrackSetting = HMSVideoTrackSetting(
  trackInitialState: joinWithMutedVideo
      ? HMSTrackInitState.MUTED
      : HMSTrackInitState.UNMUTED,
  isVirtualBackgroundEnabled: true);

2. 将轨道设置传递给HMSSDK构造函数

/// 创建HMSTrackSetting实例
var trackSettings = HMSTrackSetting(
  audioTrackSetting: HMSAudioTrackSetting(),
  videoTrackSetting: videoTrackSetting);

/// 设置轨道设置到HMSSDK
var hmsSDK = HMSSDK(
  hmsTrackSetting: trackSettings);

3. 检查虚拟背景是否可用

class Meeting implements HMSUpdateListener, HMSActionResultListener {
  ...
  bool isVirtualBackgroundSupported = false;

  /// 此方法检查虚拟背景是否可用
  void checkIsVirtualBackgroundSupported() async {
    isVirtualBackgroundSupported = await HMSVideoPlugin.isSupported();
  }
  ...
}

4. 如果虚拟背景可用，则启用它

要启用虚拟背景，请调用enable方法。

class Meeting implements HMSUpdateListener, HMSActionResultListener {
  ...
  bool isVirtualBackgroundSupported = false;

  /// 此方法检查虚拟背景是否可用
  void checkIsVirtualBackgroundSupported() async {
    isVirtualBackgroundSupported = await HMSVideoPlugin.isSupported();
  }

  /// 启用虚拟背景
  void enableVirtualBackground(Uint8List? image) async {
    /// [image] 是作为背景的图像
    if (isVirtualBackgroundSupported) {
      HMSException? isEnabled = await HMSVideoPlugin.enable(image: image);
      if (isEnabled == null) {
        /// 虚拟背景成功启动
      } else {
        /// 启用虚拟背景时出错
      }
    }
  }
  ...
}

要启用背景模糊，请调用enableBlur方法。

class Meeting implements HMSUpdateListener, HMSActionResultListener {
  ...
  bool isVirtualBackgroundSupported = false;

  /// 此方法检查虚拟背景是否可用
  void checkIsVirtualBackgroundSupported() async {
    isVirtualBackgroundSupported = await HMSVideoPlugin.isSupported();
  }

  /// 启用背景模糊
  void enableBackgroundBlur(int blurRadius) async {
    /// [blurRadius] 是模糊效果的半径
    if (isVirtualBackgroundSupported) {
      HMSException? isEnabled = await HMSVideoPlugin.enableBlur(blurRadius: blurRadius);
      if (isEnabled == null) {
        /// 背景模糊成功启动
      } else {
        /// 启用模糊时出错
      }
    }
  }
  ...
}

5. 更改虚拟背景图像

要更改虚拟背景图像，请使用changeVirtualBackground方法。

class Meeting implements HMSUpdateListener, HMSActionResultListener {
  ...
  bool isVirtualBackgroundSupported = false;

  /// 此方法检查虚拟背景是否可用
  void checkIsVirtualBackgroundSupported() async {
    isVirtualBackgroundSupported = await HMSVideoPlugin.isSupported();
  }

  /// 如果虚拟背景已启用，则可以更改虚拟背景图像
  void changeVirtualBackground(Uint8List? image) {
    /// [image] 是新图像
    /// [isVirtualBackgroundSupported] 是检查虚拟背景是否受支持的标志
    /// [isVirtualBackgroundEnabled] 是检查虚拟背景是否启用的标志
    if (isVirtualBackgroundSupported && isVirtualBackgroundEnabled) {
      HMSVideoPlugin.changeVirtualBackground(image: image);
    }
  }
  ...
}

6. 禁用虚拟背景

要禁用虚拟背景，请调用disable方法。

class Meeting implements HMSUpdateListener, HMSActionResultListener {
  ...
  bool isVirtualBackgroundSupported = false;

  /// 此方法检查虚拟背景是否可用
  void checkIsVirtualBackgroundSupported() async {
    isVirtualBackgroundSupported = await HMSVideoPlugin.isSupported();
  }

  /// 禁用虚拟背景
  void disableVirtualBackground() async {
    if (isVirtualBackgroundSupported) {
      HMSException? isDisabled = await HMSVideoPlugin.disable();
      if (isDisabled == null) {
        /// 虚拟背景成功禁用
      } else {
        /// 禁用虚拟背景时出错
      }
    }
  }
  ...
}

要禁用背景模糊，请使用disableBlur方法。

class Meeting implements HMSUpdateListener, HMSActionResultListener {
  ...
  bool isVirtualBackgroundSupported = false;

  /// 此方法检查虚拟背景是否可用
  void checkIsVirtualBackgroundSupported() async {
    isVirtualBackgroundSupported = await HMSVideoPlugin.isSupported();
  }

  /// 禁用背景模糊
  void disableBackgroundBlur() async {
    if (isVirtualBackgroundSupported) {
      HMSException? isDisabled = await HMSVideoPlugin.disableBlur();
      if (isDisabled == null) {
        /// 背景模糊成功禁用
      } else {
        /// 禁用模糊时出错
      }
    }
  }
  ...
}

示例代码

以下是使用hms_video_plugin的基本示例代码。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('HMS Video Plugin example app'),
        ),
        body: const Center(
          child: Text('HMS Video Plugin example app'),
        ),
      ),
    );
  }
}