Camera effects

Camera effects change the camera video before it leaves the device: blur the background, replace it with an image, or draw your own shaders into every frame. You can also read camera frames without changing the video, for example to run on-device ML.

All of this works on the camera Fishjam already manages. You keep using useCamera to start, stop and switch the camera, and set the effect with setCameraTrackMiddleware. Other peers receive the result as your regular cameraTrack, so nothing changes on the receiving side.

import { useCamera } from "@fishjam-cloud/react-native-client";

const { setCameraTrackMiddleware } = useCamera();

await setCameraTrackMiddleware(backgroundBlur); // null turns the effect off

important

If you want to publish something that isn't your camera, such as a game render loop or a video file, see Custom sources instead.

Choose a guide

Guide	Platform	Use it when
Background effects	📱 Mobile	You want background blur or a background image, without writing shaders
WebGPU effects	📱 Mobile · 🌐 Web	You want to draw your own shaders, overlays or effects into the published video
Frame processing	📱 Mobile	You want to read camera frames, e.g. for on-device ML, without changing the video
Stream middleware	📱 Mobile · 🌐 Web	You want to understand or write the middleware that the other guides are built on

How it runs in React Native

Effects run off the JS thread. @fishjam-cloud/react-native-worklets hands every camera frame to a worklet on a dedicated camera thread, and @fishjam-cloud/video-effects renders the result with WebGPU. See How camera effects work for the full picture.

Using VisionCamera?

If your app already captures the camera with VisionCamera, you can publish that feed instead. See the VisionCamera integration.

Guides in this section

📄️Background effects 📱

Blur or replace the background of the camera you publish to Fishjam, with ready-made effects from @fishjam-cloud/video-effects that run on the GPU.

📄️WebGPU effects

Draw your own shaders, overlays and effects into the camera video you publish to Fishjam, with WebGPU on the web and in React Native.

📄️Frame processing 📱

Run a worklet on every frame of the Fishjam camera track, for example to feed on-device ML, without changing the video you publish.

📄️Stream middleware

Intercept and transform camera and microphone tracks before they are sent to Fishjam, enabling effects and custom encodings.

Further reading

• Background blur tutorial and WebGPU effects tutorial: build a working app step by step
• How camera effects work: concepts behind the pipeline
• API reference: Video Effects package, React Native Worklets package