Effects Quickstart

Install, build a pipeline, attach it to a camera — the shortest real path to a filtered call.

Prerequisites: a joined room with a published camera — see RTC → Quickstart or Live Streaming → Quickstart.

1. Install

Not published to npm yet. The commands below are what installation will look like once these packages are released. Until then, install from a local checkout — see Installing from source.

npm install @corvidhq/effects

@corvidhq/rtc already depends on @corvidhq/effects, so camera.attachEffects() is available even without installing it directly — install it yourself only to build filter/preset configs (effects.filters.*, effects.presets.*).

npm install @corvidhq/effects @corvidhq/react

2. Build a pipeline

import { effects } from '@corvidhq/effects';
 
const pipeline = effects.createPipeline();
 
pipeline.add(effects.filters.brightness({ value: 0.2 }));
pipeline.add(effects.filters.saturation({ value: 1.2 }));

Or start from a preset:

pipeline.applyPreset(effects.presets.cinematic);

3. Attach it to the camera

const camera = await room.enableCamera();
await camera.attachEffects(pipeline);
 
// Later, to stop processing and restore the original camera feed:
await camera.detachEffects();

'use client';
import { useCamera, useCameraEffects, effectPresets } from '@corvidhq/react';
 
function EffectsPanel() {
  const camera = useCamera();
  const effects = useCameraEffects();
 
  return (
    <div>
      <button onClick={() => (camera.enabled ? camera.disable() : camera.enable())}>
        Camera: {camera.enabled ? 'on' : 'off'}
      </button>
      <button onClick={() => effects.applyPreset(effectPresets.cinematic)}>Cinematic</button>
      <button onClick={() => effects.clear()}>Reset</button>
      <p>{effects.isAttached ? `${effects.effects.length} effect(s) active` : 'Not attached yet'}</p>
    </div>
  );
}

useCameraEffects() owns one pipeline for the lifetime of the component and attaches/detaches it automatically as the camera track is enabled/disabled — see React for the full hook API.

attachEffects() swaps the published track in place — the RTC session never disconnects, reconnects, or renegotiates, and audio is untouched.

What if the browser can't run it?

attachEffects() never throws for a GPU/rendering failure. If this runtime has no WebGL2, no Canvas2D, or no captureStream() support, the pipeline passes the original camera track through unmodified and emits an error event on the pipeline (RAVEN_EFFECT_UNSUPPORTED) — the call keeps working either way. See Performance for how to detect this ahead of time and Troubleshooting for what to check first.

Filters — every parameter and its valid range.
Pipeline — the full lifecycle API and event catalogue.
RTC Integration

Effects Quickstart

1. Install

2. Build a pipeline

3. Attach it to the camera

What if the browser can't run it?

Related