Flutter Web + flutter_webrtc
- Video
- Web
Das Plugin effects_sdk kapselt das Web Video Effects SDK: Übergeben Sie einen MediaStream von flutter_webrtc und erhalten Sie einen verarbeiteten MediaStream zurück.
flutter_webrtc · livekit_client · Flutter Web
Virtueller Hintergrund und Rauschunterdrückung für Flutter
Fügen Sie Flutter-Video-Apps auf Android, iOS und im Web Hintergrund-Weichzeichnung und -Ersetzung, Beautification und Auto-Framing hinzu, und Flutter Web KI-Rauschunterdrückung – mit fertigen Plugins auf Basis von flutter_webrtc.
Wählen Sie Ihr Setup
Android, iOS und Web mit LiveKit
- Video
- Android
- iOS
- Web
Ein Fork des LiveKit-Flutter-SDK ergänzt LocalVideoTrack um das Video Effects SDK. Auf Android und iOS nutzt er die nativen SDKs, im Web das Web-SDK.
Rauschunterdrückung für Flutter Web
- Audio
- Web
Das Plugin audio_effects_sdk führt das Audio Effects SDK auf einem MediaStream von flutter_webrtc aus: KI-Rauschunterdrückung mit den Presets speed, balanced und quality.
Code
Die Plugins folgen dem Ablauf des Web-SDK: MediaStream übergeben, auf onReady warten, starten und den verarbeiteten Stream nutzen. Im LiveKit-Fork sind die Effekte Methoden von LocalVideoTrack.
- Customer ID im Developer Portal holen
- Plugin von GitHub in pubspec.yaml eintragen
- Im Web das SDK-Skript in index.html laden
- Beispiel starten: 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();
};Fragen
Sie nutzen LiveKit? Siehe LiveKit-Integration.
Welche Plattformen werden in Flutter unterstützt?
Videoeffekte: Android, iOS und Web über den LiveKit-Flutter-Fork sowie Web über das Plugin für flutter_webrtc. Audio-Rauschunterdrückung: Flutter Web über das Plugin audio_effects_sdk.
Ich nutze flutter_webrtc ohne LiveKit auf Android oder iOS. Welche Möglichkeiten habe ich?
Nutzen Sie die nativen SDKs für Android und iOS über einen Platform Channel. Der LiveKit-Fork ist eine gute Referenz: Er verbindet die nativen Kamera-Pipelines auf beiden Plattformen mit Flutter. Erzählen Sie uns von Ihrem Setup, wir helfen gern.
Wie füge ich einer mobilen Flutter-App Rauschunterdrückung hinzu?
Das Flutter-Audio-Plugin zielt derzeit auf das Web. Auf Android und iOS rufen Sie das native Audio Effects SDK (Maven ai.effectssdk:audio, Swift Package AudioEffectsSDK) über einen Platform Channel auf.
Welche Effekte sind verfügbar?
Hintergrund-Weichzeichnung und -Ersetzung, Beautification, Auto-Framing, Farbkorrektur, Layouts, Bauchbinden und Overlays im Web-Plugin; der LiveKit-Fork stellt auf Mobilgeräten die Modi der nativen Pipeline bereit.
Sie entwickeln mit Flutter?
Nennen Sie uns Ihre Plattformen und wie Sie Video und Audio aufnehmen. Wir helfen bei der Integration.
Bereit loszulegen? Öffnen Sie das Developer Portal und starten Sie eine kostenlose Testphase.