Fast & open source virtual effects in the browser

Add video & audio effects to any web video application in 3 lines of code. It's free & open source,and and powered by the fastest and most accurate models on the web.

See the demo Get started

effects.js

import { EffectsPipeline } from 'longpipe'

const pipeline = new EffectsPipeline(stream, {
    background: 'background.png'
    audio: 'denoise'
});

effects.js

import { EffectsPipeline } from 'longpipe'

const stream = await navigator.mediaDevices
  .getUserMedia({ video: true, audio: true })

const pipeline = new EffectsPipeline(stream, {
  background: 'blur',
  preset:     'auto',
  audio:      'denoise',
})

videoEl.srcObject = pipeline.stream

// Swap at runtime — no flicker, no re-init
await pipeline.setBackground('https://example.com/bg.jpg')
await pipeline.setBackground({ blur: { strength: 0.8 } })

// Tear down when done
pipeline.destroy()

Built for production

Longpipe is not just a tflite model, it's an end to end production-ready SDK, powered by a custom version of EfficientNetLite written in WebGPU/WebGL and an efficient zero-copy pipeline.

→ Support across browsers: Works on every browser, simplifying dozens of browser inconsistencies in one simple API.
→ Performance: Longpipe was built from the ground up to work as well on 10-year-old netbooks as it does on the latest MacBook Pro.
→ Adaptivity: Longpipe has several model variants for both audio and video, auto-selecting to provide the best quality while maintaining 30 fps.
→ Built by the founder of Vectorly, a commercial effects SDK acquired in 2021. A ground-up redesign for the WebGPU era, with years of production lessons baked in.

The best models on the web

Longpipe's video models beats all other open source models (e.g. Mediapipe) on both accuracy and speed simultaneously for tasks like background sementation. For audio, longpipe ships DeepFilterNet (current state of the art), but re-writes the core WASM kernels to achieve a 3x speed improvement over the original.

Blazing fast performance

Longpipe is not just more accurate than other open source models like Bodypix/Mediapipe, it's also much faster.

Longpipe achieves this by avoiding bloated general purpose runtimes like Tensorflow or ONNX, instead writing custom, model-specific and device-specific shaders directly in WebGPU/WebGL.

Along with a zero-copy pipeline which avoids any CPU to GPU communication at all, Longpipe achieves much better real world performance than Mediapipe or Bodypix despite using bigger models.

Try it.

Real-time virtual effects, real source you can read. Three lines to integrate, zero config to start.

effects.js

$ npm install longpipe

import { EffectsPipeline } from 'longpipe'
const pipeline = new EffectsPipeline(stream, { background: 'blur' })

Get started See the demo