Contexto

He estado trabajando en la creación de una función de fondos virtuales para entornos web y, como parte de eso, estoy tomando una transmisión de cámara web (MediaStreamTrack), procesando imágenes en WebGL y enviando los fotogramas de video procesados a un lienzo.

Problema

Tan pronto como llama a captureStream() en el lienzo (o cualquier lienzo que parezca), el uso de la CPU comienza a aumentar (en mi dispositivo Linux, del 20% al 60%).

He vuelto a crear una versión simplificada de este problema aquí, con una animación simple y una llamada a canvas.captureStream():

 const canvas = document.querySelector('#canvas-target'); const animation = new CanvasAnimation(canvas.getContext('2d')); animation.start(); // Starts an animation on canvas function captureStream(){ let stream = canvas.captureStream(); const video = document.querySelector('#stream-output'); // Create canvas stream, feed it to video video.srcObject = stream; // CPU starts to go up here video.play(); }

Consulte Codepen para ver el ejemplo completo: https://codepen.io/sb2702/pen/MWogaeo

Los principales factores que parecen afectar el uso de la CPU son la velocidad de fotogramas y la resolución, por lo tanto,

1. Supongo que el navegador solo está haciendo mucho trabajo bajo el capó para volver a codificar la transmisión de video en una transmisión de medios.

2. La respuesta "rápida" es simplemente restringir la velocidad de fotogramas y/o la resolución.

Mi pregunta principal es: ¿me estoy perdiendo algo más fundamental sobre canvas, captureStream, etc., y hay alguna forma mucho más eficiente de CPU de generar un MediaStreamTrack con salida de Canvas?