Estoy ejecutando un proceso en tiempo real desde la transmisión de medios en vivo de la cámara web, lo que requiere que el FPS permanezca alrededor de 30 FPS. getImageData fue uno de mis principales cuellos de botella, requería alrededor de 22 ms para extraer el objeto ImageData del lienzo, dejándome solo 11 ms para realizar mis otras operaciones.

Aquí hay un fragmento simple de lo que tenía antes.

 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 }

Después de hacer este simple cambio en mi configuración, sin cambiar nada más, logré extraer el cuadro en 11 ms , la mitad del tiempo que tomaba antes, y no puedo entender por qué. Solo convertí el lienzo normal en un lienzo fuera de pantalla en dos líneas.

 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;

Agradecería cualquier idea sobre este asunto.