Flutter Web + flutter_webrtc
- Video
- Web
effects_sdk 外掛程式封裝了 Web Video Effects SDK：傳入來自 flutter_webrtc 的 MediaStream，取回處理後的 MediaStream。
flutter_webrtc · livekit_client · Flutter Web
Flutter 的虛擬背景與降噪
為 Android、iOS 和 Web 上的 Flutter 視訊 App 加入背景模糊與替換、美顏和自動取景，並為 Flutter Web 加入 AI 降噪——使用以 flutter_webrtc 為基礎的現成外掛程式。
選擇你的方案
以 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 行動 App 加入降噪？
Flutter 音訊外掛程式目前以 Web 為主。在 Android 和 iOS 上，請透過 platform channel 呼叫原生 Audio Effects SDK（Maven ai.effectssdk:audio、Swift Package AudioEffectsSDK）。
有哪些特效可用？
Web 外掛程式提供背景模糊與替換、美顏、自動取景、色彩校正、版面、下方字幕和疊加圖層；LiveKit 分支在行動裝置上提供原生管線的各種模式。