videoglow

Demo

Canvas source

Any canvas you draw into becomes a frame source, continuous or on demand.

@videoglow/react@videoglow/canvas

Install

npm install @videoglow/react
npm install @videoglow/canvas

Engine state

running
false
sampling
false
visible
false
source
none / -
frames rendered
0
frames skipped (fps cap)
0
buffer
0x0
last render
0.000 ms
average render
0.000 ms
render errors
0

Usage

'use client'
import { createCanvasSource } from '@videoglow/canvas'
import { Ambilight, useFrameSource } from '@videoglow/react'

export const metadata = {
  title: 'Canvas source',
  alternates: { canonical: '/canvas' },
}

export function Visualizer() {
  const [source, ref] = useFrameSource((el: HTMLCanvasElement) => createCanvasSource(el, { mode: 'continuous' }))
  return (
    <Ambilight source={source} blur={70}>
      <canvas ref={ref} width={640} height={360} />
    </Ambilight>
  )
}

Modes

continuous sources are sampled on the animation loop while active (pause the animation and the engine stops sampling). manual sources render only when you call invalidate(), which is right for charts and static scenes.