feat(ui): Allow video filters to be set before video track is created (#1035)

* Allow video filters to be set before video track is created

* changelog

* tweak

Author: Brazol

dogfooding/lib/app/app_content.dart

@@ -154,6 +154,7 @@ class _StreamDogFoodingAppContentState
             final extra = (
               call: call,
               connectOptions: null,
+              effectsManager: null,
             );
 
             _router.push(CallRoute($extra: extra).location, extra: extra);
@@ -179,6 +180,7 @@ class _StreamDogFoodingAppContentState
             final extra = (
               call: callToJoin,
               connectOptions: null,
+              effectsManager: null,
             );
 
             _router.push(CallRoute($extra: extra).location, extra: extra);
@@ -193,6 +195,7 @@ class _StreamDogFoodingAppContentState
         final extra = (
           call: call,
           connectOptions: null,
+          effectsManager: null,
         );
 
         _router.push(CallRoute($extra: extra).location, extra: extra);

dogfooding/lib/router/routes.dart

@@ -45,12 +45,13 @@ class LobbyRoute extends GoRouteData {
   Widget build(BuildContext context, GoRouterState state) {
     return LobbyScreen(
       call: $extra,
-      onJoinCallPressed: (connectOptions) {
+      onJoinCallPressed: (connectOptions, effectsManager) {
         // Navigate to the call screen.
         CallRoute(
           $extra: (
             call: $extra,
             connectOptions: connectOptions,
+            effectsManager: effectsManager,
           ),
         ).replace(context);
       },
@@ -79,13 +80,15 @@ class CallRoute extends GoRouteData {
   final ({
     Call call,
     CallConnectOptions? connectOptions,
+    StreamVideoEffectsManager? effectsManager,
   }) $extra;
 
   @override
   Widget build(BuildContext context, GoRouterState state) {
     return CallScreen(
       call: $extra.call,
       connectOptions: $extra.connectOptions,
+      videoEffectsManager: $extra.effectsManager,
     );
   }
 }

dogfooding/lib/router/routes.g.dart

@@ -31,18 +31,21 @@ class CallScreen extends StatefulWidget {
     super.key,
     required this.call,
     this.connectOptions,
+    this.videoEffectsManager,
   });
 
   final Call call;
   final CallConnectOptions? connectOptions;
+  final StreamVideoEffectsManager? videoEffectsManager;
 
   @override
   State<CallScreen> createState() => _CallScreenState();
 }
 
 class _CallScreenState extends State<CallScreen> {
   late final _userChatRepo = locator.get<UserChatRepository>();
-  late final _videoEffectsManager = StreamVideoEffectsManager(widget.call);
+  late final _videoEffectsManager =
+      widget.videoEffectsManager ?? StreamVideoEffectsManager(widget.call);
   late StreamSubscription<SpeakingWhileMutedState> _speechSubscription;
 
   Channel? _channel;
@@ -78,6 +81,7 @@ class _CallScreenState extends State<CallScreen> {
     _speakingWhileMutedRecognition.dispose();
     widget.call.leave();
     _userChatRepo.disconnectUser();
+    _videoEffectsManager.dispose();
     super.dispose();
   }
 

dogfooding/lib/screens/call_screen.dart

@@ -116,6 +116,7 @@ class _HomeScreenState extends State<HomeScreen> {
               CallRoute($extra: (
                 call: _call!,
                 connectOptions: null,
+                effectsManager: null,
               )).push(context);
             } else {
               LobbyRoute($extra: _call!).push(context);

dogfooding/lib/screens/home_screen.dart

@@ -16,7 +16,8 @@ class LobbyScreen extends StatefulWidget {
     required this.call,
   });
 
-  final ValueChanged<CallConnectOptions> onJoinCallPressed;
+  final Function(CallConnectOptions, StreamVideoEffectsManager)
+      onJoinCallPressed;
   final Call call;
 
   @override
@@ -26,8 +27,16 @@ class LobbyScreen extends StatefulWidget {
 class _LobbyScreenState extends State<LobbyScreen> {
   RtcLocalAudioTrack? _microphoneTrack;
   RtcLocalCameraTrack? _cameraTrack;
+  bool _blurEnabled = false;
 
   final _userAuthController = locator.get<UserAuthController>();
+  late StreamVideoEffectsManager _videoEffectsManager;
+
+  @override
+  void initState() {
+    super.initState();
+    _videoEffectsManager = StreamVideoEffectsManager(widget.call);
+  }
 
   void joinCallPressed() {
     var options = const CallConnectOptions();
@@ -46,7 +55,7 @@ class _LobbyScreenState extends State<LobbyScreen> {
       );
     }
 
-    widget.onJoinCallPressed(options);
+    widget.onJoinCallPressed(options, _videoEffectsManager);
   }
 
   @override
@@ -115,7 +124,41 @@ class _LobbyScreenState extends State<LobbyScreen> {
                 StreamLobbyVideo(
                   call: widget.call,
                   onMicrophoneTrackSet: (track) => _microphoneTrack = track,
-                  onCameraTrackSet: (track) => _cameraTrack = track,
+                  onCameraTrackSet: (track) {
+                    _cameraTrack = track;
+
+                    if (track != null && _blurEnabled) {
+                      _videoEffectsManager.applyBackgroundBlurFilter(
+                        BlurIntensity.medium,
+                        track: track,
+                      );
+                    }
+                  },
+                  additionalActionsBuilder: (context, call) {
+                    return [
+                      CallControlOption(
+                        icon: _blurEnabled
+                            ? const Icon(Icons.blur_on)
+                            : const Icon(Icons.blur_off),
+                        onPressed: () async {
+                          setState(() {
+                            _blurEnabled = !_blurEnabled;
+                          });
+
+                          if (_blurEnabled) {
+                            _videoEffectsManager.applyBackgroundBlurFilter(
+                              BlurIntensity.medium,
+                              track: _cameraTrack,
+                            );
+                          } else {
+                            _videoEffectsManager.disableAllFilters(
+                              track: _cameraTrack,
+                            );
+                          }
+                        },
+                      ),
+                    ];
+                  },
                 ),
                 const SizedBox(height: 24),
                 Container(

dogfooding/lib/screens/lobby_screen.dart

@@ -1,6 +1,11 @@
 ## Unreleased
 
+🐞 Fixed
+* Fixed an issue where video filters were cleared after toggling the camera.
+
 ✅ Added
+* Added support for setting video filters before the video track is created by listening for local participant state changes and applying the filters once the video is enabled.
+* Added support for setting video filters on a specific video track before the local participant is available — useful for scenarios like lobby previews with a temporary video track.
 * Introduced the `reconnectTimeout` option in `CallPreferences`, allowing you to set the maximum duration the SDK will attempt to reconnect to a call before giving up.
 
 🔄 Changed

packages/stream_video_flutter/CHANGELOG.md

@@ -18,6 +18,7 @@ class StreamLobbyVideo extends StatefulWidget {
     this.onMicrophoneTrackSet,
     this.onCameraTrackSet,
     this.streamVideo,
+    this.additionalActionsBuilder,
   });
 
   /// Represents a call.
@@ -32,6 +33,8 @@ class StreamLobbyVideo extends StatefulWidget {
   final FutureOr<void> Function(RtcLocalAudioTrack?)? onMicrophoneTrackSet;
   final FutureOr<void> Function(RtcLocalCameraTrack?)? onCameraTrackSet;
 
+  final List<Widget> Function(BuildContext, Call)? additionalActionsBuilder;
+
   /// An instance of [StreamVideo].
   ///
   /// If not provided, it will be obtained via StreamVideo.instance
@@ -188,6 +191,8 @@ class _StreamLobbyVideoState extends State<StreamLobbyVideo> {
                     cameraEnabled ? null : theme.optionOffBackgroundColor,
                 onPressed: toggleCamera,
               ),
+              if (widget.additionalActionsBuilder != null)
+                ...widget.additionalActionsBuilder!(context, widget.call),
             ],
           ),
         ],

packages/stream_video_flutter/lib/src/call_screen/lobby_video.dart

@@ -70,34 +70,6 @@ class _StreamLobbyViewState extends State<StreamLobbyView> {
 
   bool get hasMicrophoneEnabled => _microphoneTrack != null;
 
-  Future<void> toggleCamera() async {
-    if (hasCameraEnabled) {
-      await _cameraTrack?.stop();
-      return setState(() => _cameraTrack = null);
-    }
-
-    try {
-      final cameraTrack = await RtcLocalTrack.camera();
-      return setState(() => _cameraTrack = cameraTrack);
-    } catch (e) {
-      _logger.w(() => 'Error creating camera track: $e');
-    }
-  }
-
-  Future<void> toggleMicrophone() async {
-    if (hasMicrophoneEnabled) {
-      await _microphoneTrack?.stop();
-      return setState(() => _microphoneTrack = null);
-    }
-
-    try {
-      final microphoneTrack = await RtcLocalTrack.audio();
-      return setState(() => _microphoneTrack = microphoneTrack);
-    } catch (e) {
-      _logger.w(() => 'Error creating microphone track: $e');
-    }
-  }
-
   void onJoinCallPressed() {
     var options = const CallConnectOptions();