Fast & open source virtual effects in the browser

Add virtual backgrounds 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 of any effects sdk.

See the demo Get started

virtual-bg.js

import { EffectsPipeline } from 'longpipe'

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

virtual-bg.js

import { EffectsPipeline } from 'longpipe'

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

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

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 (xl to xs), 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 model on the web

Longpipe has the highest quality of any open source real time segmentation model on the web, with even Longpipe's smallest variants outperforming Mediapipe selfie and Bodypix by a wide margin.

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 backgrounds, real source you can read. Three lines to integrate, zero config to start.

virtual-bg.js

$ npm install longpipe

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

Get started See the demo