I am running a real-time process from the live media stream of the webcam, which requires the FPS to stay around 30FPS. getImageData was one of my main bottlenecks, it was requiring around 22ms to extract the ImageData object from the canvas, leaving me only 11ms to do my other operations.

Here is a simple snippet of what I had before

  video = document.createElement("video");
  inputCanvas = document.createElement("canvas");
  inputCanvas.width = width;
  inputCanvas.height = height;
  inputCanvasCtx = inputCanvas.getContext("2d");
  video.width = width;
  video.height = height;
  video.srcObject = stream;

// And using the requestVideoFrameCallback API, whenever a frame is presented, this callback is triggered
  function onFrame(now, metadata){

     inputCanvasCtx.drawImage(video, 0, 0);;

     // Get frame from our canvas.
     frame = inputCanvasCtx.getImageData(0,0,inputCanvas.width, inputCanvas.height);

     // Other computations
  }

After doing this simple change to my setup, without changing anything else I managed to extract the frame in 11ms, half the time it took before, and I cannot understand why. I only converted the regular canvas to an offscreencanvas in two lines.

  video = document.createElement("video");
  inputCanvas = document.createElement("canvas");
  inputCanvas.width = width;
  inputCanvas.height = height;
  offscreen = inputCanvas.transferControlToOffscreen(); // Changed line
  inputCanvasCtx = offscreen.getContext("2d"); // Changed line
  video.width = width;
  video.height = height;
  video.srcObject = stream;

I would appreciate any insight on this matter.