@whereby.com/camera-effects

@whereby.com/camera-effects

Adds effects on top of camera stream.

Provides a set of presets that can be used to add effects to a camera stream. This library is meant to be used alongside @whereby.com/core, or @whereby.com/browser-sdk. Static assets (images and webassembly files) are hosted on a CDN and loaded at runtime.

Installation

npm install @whereby.com/camera-effects

or

yarn add @whereby.com/camera-effects

or

pnpm add @whereby.com/camera-effects

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);
    }

Development

Can be tested in storybook. Since the static assets are hosted on a CDN, we have two ways of testing locally:

• Add the environment variable REACT_APP_IS_DEV=true to your local .env file. This will make the library load assets from the local assets folder.

• If you don't use the env variable, or it's set to false, the static assets will be loaded from the CDN as in production.