Skip to content
flutter_webrtc · livekit_client · Flutter Web

Flutter 向けバーチャル背景とノイズキャンセリング

Android、iOS、Web の Flutter 映像アプリに背景ぼかしと置換、美肌補正、オートフレーミングを、Flutter Web に AI ノイズキャンセリングを追加。flutter_webrtc を基にした既製のプラグインで実現します。

構成を選ぶ

Flutter Web + flutter_webrtc

  • Video
  • Web

effects_sdk プラグインは Web Video Effects SDK をラップしたものです。flutter_webrtc の MediaStream を渡すと、処理済みの MediaStream が返ります。

LiveKit を使った Android、iOS、Web

  • Video
  • Android
  • iOS
  • Web

LiveKit Flutter SDK のフォークが LocalVideoTrack に Video Effects SDK を追加します。Android と iOS ではネイティブ SDK を、Web では Web SDK を使います。

Flutter Web 向けノイズキャンセリング

  • Audio
  • Web

audio_effects_sdk プラグインは flutter_webrtc の MediaStream 上で Audio Effects SDK を実行します。speed、balanced、quality のプリセットによる AI ノイズ抑制です。

コード

プラグインは Web SDK と同じ流れです。MediaStream を渡し、onReady を待って実行し、処理済みのストリームを使います。LiveKit のフォークでは、エフェクトは LocalVideoTrack のメソッドです。

  • Developer Portal で Customer ID を取得
  • GitHub のプラグインを pubspec.yaml に追加
  • Web では index.html で SDK のスクリプトを読み込む
  • サンプルを実行:flutter run --dart-define=CUSTOMER_ID=…
// web/index.html: <script src="https://effectssdk.ai/sdk/web/{VERSION}/tsvb-web.js"></script>
// pubspec.yaml:   effects_sdk: { git: { url: https://github.com/EffectsSDK/flutter-plugin.git } }

final effectsSDK = EffectsSDK('YOUR_CUSTOMER_ID');
effectsSDK.useStream(cameraStream);
final outputStream = effectsSDK.getStream();

effectsSDK.onReady = () {
  effectsSDK.run();
  effectsSDK.setBlur(60);
};
// pubspec.yaml: livekit_client from github.com/EffectsSDK/livekit-client-sdk-flutter

final videoTrack = await LocalVideoTrack.createCameraTrack(
  CameraCaptureOptions(effectsSdkRequired: true),
);
await videoTrack.start();

final status = await videoTrack.auth('YOUR_CUSTOMER_ID');
if (status == AuthStatus.active) {
  await videoTrack.setPipelineMode(PipelineMode.blur);
  await videoTrack.setBlurPower(0.6);
}
// web/index.html: <script crossorigin="anonymous" src="https://effectssdk.ai/sdk/audio/dev/{VERSION}/atsvb-web.js"></script>
// pubspec.yaml:   audio_effects_sdk: { git: { url: https://github.com/EffectsSDK/audio-flutter-wrapper } }

final audioSDK = AudioEffectsSDK('YOUR_CUSTOMER_ID');
audioSDK.useStream(micStream);

audioSDK.onReady = () {
  audioSDK.run();
  final cleanStream = audioSDK.getStream();
};

よくある質問

LiveKit をお使いですか?LiveKit との連携をご覧ください。

Flutter ではどのプラットフォームに対応していますか?

ビデオエフェクト:LiveKit Flutter のフォークで Android、iOS、Web、flutter_webrtc プラグインで Web に対応。音声ノイズキャンセリング:audio_effects_sdk プラグインで Flutter Web に対応しています。

Android や iOS で LiveKit なしで flutter_webrtc を使っています。どんな方法がありますか?

platform channel を通じて Android と iOS のネイティブ SDK を使ってください。LiveKit のフォークが良い参考になります。両プラットフォームでネイティブのカメラパイプラインを Flutter とつないでいます。構成をお聞かせいただければお手伝いします。

Flutter のモバイルアプリにノイズキャンセリングを追加するには?

Flutter の音声プラグインは現在 Web 向けです。Android と iOS では、platform channel を通じてネイティブの Audio Effects SDK(Maven ai.effectssdk:audio、Swift Package AudioEffectsSDK)を呼び出してください。

どのエフェクトが使えますか?

Web プラグインでは背景のぼかしと置換、美肌補正、オートフレーミング、色補正、レイアウト、テロップ、オーバーレイ。LiveKit のフォークでは、モバイルでネイティブパイプラインのモードを利用できます。

Flutter で開発していますか?

対象プラットフォームと、映像・音声のキャプチャ方法をお知らせください。導入をサポートします。

準備はできましたか?Developer Portal を開いて無料トライアルを始めましょう。

reCAPTCHA で保護されています。プライバシーポリシーをご覧ください。