🩹(frontend) add conditional stopProcessor call for cross-browser compat

Implement browser detection to explicitly stop processors in Firefox and other
browsers that lack full support for modern web APIs, before switching from
one processor to another.

This issue was introduced by recent upgrade of track processor.
An issue has been opened.

src/frontend/src/features/rooms/livekit/components/blur/index.ts

@@ -32,6 +32,10 @@ export enum ProcessorType {
 }
 
 export class BackgroundProcessorFactory {
+  static hasModernApiSupport() {
+    return ProcessorWrapper.hasModernApiSupport
+  }
+
   static isSupported() {
     return (
       ProcessorWrapper.isSupported ||

src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx

@@ -114,6 +114,13 @@ export const EffectsConfiguration = ({
           type,
           options
         )!
+        // IMPORTANT: Must explicitly stop previous processor before setting a new one
+        // in browsers without modern API support to prevent UI crashes.
+        // This workaround is needed until this issue is resolved:
+        // https://github.com/livekit/track-processors-js/issues/85
+        if (!BackgroundProcessorFactory.hasModernApiSupport()) {
+          await videoTrack.stopProcessor()
+        }
         await videoTrack.setProcessor(newProcessor)
         onSubmit?.(newProcessor)
       } else {