Backgrounds

The background option accepts a wide input surface. Same input shape works at construction or runtime via pipeline.setBackground(...).

Keyword

new EffectsPipeline(stream, { background: 'blur' })
new EffectsPipeline(stream, { background: 'none' })   // passthrough

Image URL

new EffectsPipeline(stream, {
  background: 'https://example.com/beach.jpg',
})

The SDK fetches and decodes to an ImageBitmap on the main thread before init.

Pre-resolved bitmap or element

const bitmap = await createImageBitmap(myImg)
new EffectsPipeline(stream, { background: bitmap })

// Or pass an <img> element directly
new EffectsPipeline(stream, { background: document.querySelector('img') })

Structured forms

new EffectsPipeline(stream, { background: { blur: { sigma: 8 } } })
new EffectsPipeline(stream, { background: { color: '#0a3322' } })
new EffectsPipeline(stream, { background: { image: 'https://example.com/beach.jpg' } })

Swapping at runtime

pipeline.setBackground('blur')
pipeline.setBackground({ color: '#000' })
pipeline.setBackground(otherBitmap)

No re-init, no flicker. Internally the compositor swaps its reference texture.

Performance note

'blur' is meaningfully slower than image / solid color — extra blur pyramid passes. If you’re benchmarking or showing perf-sensitive demos, default to image or color. Functional demos where perf isn’t the message can use blur freely.