Camera Effects Reference

The Whereby Camera Effects SDK is the low-level foundation for applying real-time visual effects to camera streams within the Whereby ecosystem. It provides a set of predefined images and videos that can be used as background effects on an existing video stream. It's meant to be used alongside Whereby's other SDK's, like the React Hooks browser SDK, or Whereby Core.

Use Case

Implementing camera effects such as background blur, background images, or video backgrounds for use with either @whereby.com/core or @whereby.com/browser-sdk/react

Requirements

The Camera Effects SDK is intended for browser environments and requires access to modern browser APIs.

Getting started

Installation

Install the @whereby.com/camera-effects package from the public npm registry.

npm

npm install @whereby.com/camera-effects

yarn

pnpm

Usage

// Use alongside @whereby.com/core. Can also be used with @whereby.com/browser-sdk
import { WherebyClient } from "@whereby.com/core";

const client = new WherebyClient();
const roomConnection = client.getRoomConnection();

// Join the room as usual

// list of available effects
const [effectPresets, setEffectPresets] = useState<Array<string>>([]);

// Lazy-loaded and can be called when needed
async function loadBackgroundEffects() {
    if (!showCameraEffects) return;

    const { getUsablePresets } = await import("@whereby.com/camera-effects");
    const usablePresets = getUsablePresets();
    setEffectPresets(usablePresets);
}
    
// Switch to the selected effect
async function setCameraEffect(effectPreset: string) {
    await roomConnection.switchCameraEffect(effectPreset);
}