En el siguiente código quiero:

1. guarde los primeros 5 segundos de la captura de la cámara como fotogramas
2. luego, cada vez que se redondea el bucle draw() , quiero dibujar el primer cuadro en el lienzo, luego el segundo en el siguiente bucle de dibujo, etc. hasta que llegue al final y comience de nuevo desde la parte superior.

Sin embargo, esto no funciona y creo que se debe a que el imageData de cada cuadro es un data:image/octet-stream;base64,.... Cadena que no estoy seguro de cómo dibujar en el lienzo.

 const FRAME_RATE = 10 const CAPTURE_DURATION = 5 // secs let framesCaptured = [] let i = 0 function setup() { frameRate(FRAME_RATE) let video = createCapture(VIDEO) video.hide() createCanvas(640, 480) saveFrames('frames', 'png', CAPTURE_DURATION, FRAME_RATE, (frames) => { framesCaptured = frames.map(({ imageData }) => { return imageData }) }) } function draw() { if (i < framesCaptured.length) { image(loadImage(framesCaptured[i]), 0, 0) i = i === framesCaptured.length - 1 ? 0 : i+1 } }

Por cierto, es importante que tenga acceso y recorra las imágenes de fotogramas individuales, porque luego las enviaré al servidor.