Tengo un servidor socket-io que envía a mi frontend una imagen (codificada en base64) cada 20 ms. El problema que tengo ahora es que la interfaz no puede mantener una velocidad tan alta.

Por el momento uso una imagen y cambio su atributo src:

 // this piece of code is called every 20ms socket.on("frame2client", (data) => { receivedCalls += 1; setDelay(`${((timer / receivedCalls) * 1000).toFixed(3)} ms`); if (!data) { return; } serverVideo.style.width = CONSTRAINTS.video.width; serverVideo.style.height = CONSTRAINTS.video.height; serverVideo.src = data; });

Funciona cada vez que cambio los fps a 10 (= renderiza cada 100 ms) pero no es lo suficientemente rápido como para parecer fluido. Además, depende del tamaño de la imagen: si trato de configurarlo en 500x500 en lugar de 250x250, 10 fps ya no funciona y tengo que configurarlo en 5 fps.

EDITAR: La forma en que funciona es que obtengo la cámara web del usuario, capturo un cuadro, lo envío a mi servidor usando sockets, el servidor procesa la imagen a través de OpenCV y la devuelve al cliente. El servidor devuelve el marco base64 creado con el marco openCV.

Gracias