In the code below I want to:

1. save the first 5 seconds of the camera capture as frames
2. then each time round the draw() loop I want to draw the 1st frame on the canvas, then the 2nd one on the next draw loop, etc. until I reach the end and start back from the top.

However, this is not working and I believe it's because the imageData of each frame is an data:image/octet-stream;base64,.... String which I'm not sure how to draw on the canvas.

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
  }
}

Btw, it's important that I have access to and loop through individual frame-images, because I will later be sending those to the server.