ImageCapture, ImageBitmap and canvas

grab-frame.js

// The theory is that we can avoid moving the video data into RAM since we are only
// passing the ImagieBitmap reference around, which should improve the performance when
// plotting captured frames.

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

const [track] = stream.getVideoTracks()
const ic = new ImageCapture(track)
const bmp = await ic.grabFrame()

const canvas = document.createElement('canvas')
// We can't draw on this context though!
const ctx = canvas.getContext('bitmaprenderer')
ctx.transferFromImageBitmap(bmp);

// Now we can place the canvas on the DOM where and whenever needed