Flutter Web + flutter_webrtc
- Video
- Web
El plugin effects_sdk envuelve el SDK web de video: entrégale un MediaStream de flutter_webrtc y recibe un MediaStream procesado.
flutter_webrtc · livekit_client · Flutter Web
Fondo virtual y cancelación de ruido para Flutter
Añade desenfoque y reemplazo del fondo, embellecimiento y encuadre automático a apps de video Flutter en Android, iOS y la web, y cancelación de ruido con IA a Flutter Web, con plugins listos basados en flutter_webrtc.
Elige tu configuración
Android, iOS y web con LiveKit
- Video
- Android
- iOS
- Web
Un fork del SDK de LiveKit para Flutter añade Video Effects SDK a LocalVideoTrack. En Android e iOS usa los SDK nativos y en la web, el SDK web.
Cancelación de ruido para Flutter Web
- Audio
- Web
El plugin audio_effects_sdk ejecuta Audio Effects SDK sobre un MediaStream de flutter_webrtc: supresión de ruido con IA con los presets speed, balanced y quality.
Código
Los plugins siguen el flujo del SDK web: entrega un MediaStream, espera a onReady, ejecútalo y usa el stream procesado. En el fork de LiveKit, los efectos son métodos de LocalVideoTrack.
- Obtén un Customer ID en el Developer Portal
- Añade el plugin desde GitHub a pubspec.yaml
- En la web, carga el script del SDK en index.html
- Ejecuta el ejemplo: 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();
};Preguntas
¿Usas LiveKit? Consulta la integración con LiveKit.
¿Qué plataformas son compatibles con Flutter?
Efectos de video: Android, iOS y la web mediante el fork de LiveKit para Flutter, y la web mediante el plugin de flutter_webrtc. Cancelación de ruido de audio: Flutter Web mediante el plugin audio_effects_sdk.
Uso flutter_webrtc sin LiveKit en Android o iOS. ¿Qué opciones tengo?
Usa los SDK nativos de Android e iOS mediante un platform channel. El fork de LiveKit es una buena referencia: conecta los pipelines nativos de la cámara con Flutter en ambas plataformas. Cuéntanos tu configuración y te ayudaremos.
¿Cómo añado cancelación de ruido a una app móvil de Flutter?
El plugin de audio para Flutter funciona por ahora en la web. En Android e iOS, llama al Audio Effects SDK nativo (Maven ai.effectssdk:audio, Swift Package AudioEffectsSDK) mediante un platform channel.
¿Qué efectos están disponibles?
Desenfoque y reemplazo del fondo, embellecimiento, encuadre automático, corrección de color, diseños, rótulos y superposiciones en el plugin web; el fork de LiveKit expone los modos del pipeline nativo en móvil.
¿Desarrollas con Flutter?
Cuéntanos tus plataformas y cómo capturas el video y el audio. Te ayudamos con la integración.
¿Listo para empezar? Abre el Developer Portal y comienza una prueba gratuita.