why the background effect not working on firefox ,...
# ask-ai
p
why the background effect not working on firefox , i'm using this package : https://www.npmjs.com/package/@livekit/track-processors?activeTab=readme
t
Thanks for reaching out, Yassine. I'm an AI assistant and I'm here to help. Give me a moment while I research this topic.
Thanks — I understand you’re trying to use the background effect from
@livekit/track-processors
and it’s not working in Firefox. I can help explain why and give practical options. Short answer • The background effect in
@livekit/track-processors
uses
MediaStreamTrackProcessor
and
MediaStreamTrackGenerator
(WebCodecs-related APIs) to process video frames in the browser. Firefox does not fully support those interfaces, so the client-side background processing will not work in Firefox. Why this happens • The track-processor approach needs the browser ability to read and write frames (
MediaStreamTrackProcessor
/
MediaStreamTrackGenerator
). These APIs are available in Chromium-based browsers (Chrome, Edge, Brave) and Safari where WebCodecs support exists, but Firefox has limited or no support for them. Because of that gap, the processing pipeline in
@livekit/track-processors
cannot run on Firefox. What you can do now • Use a Chromium-based browser or Safari for clients that need the live background effect (this is the simplest fix). • Detect Firefox at runtime and disable the background effect for those users so your app degrades gracefully. • Provide a fallback: replace the live background effect with a static background image or simpler CSS/background blur applied locally (not true per-frame replacement). • Move processing server-side (server-side compositing) if you need all clients to see the effect regardless of browser support. Questions to help me further • Which Firefox version are you testing on? • Do you see any console errors when you try to enable the effect? If so, please paste them. • Are you able to test the same code in Chrome (to confirm the effect works there)? If you share your Firefox version and any console messages or a small code snippet showing how you enable the processor, I’ll help diagnose further and suggest the best fallback for your app. Sources: client-sdk-js | livekit/livekit_composite | DeepWiki | Optimizing Video Calls for Low-Powered Devices | LiveKit | Client SDKs | livekit/livekit_composite | DeepWiki