Actualmente estoy trabajando en un sitio web de transmisión de video con WebSockets, transmitiendo datos desde la cámara web usando Open CV Python, enviándolos cuadro por cuadro a un conector web. el socket web del cliente lee los datos y muestra la imagen. Sin embargo, estoy experimentando un problema de parpadeo con las imágenes cuando todos los elementos del feed no están visibles; sin embargo, cuando todos los feeds están visibles, parece funcionar bien.

He adjuntado el código html (usando plantillas jinja) y también el javascript

¿Alguien podría ayudarme a averiguar por qué sucede esto y cómo puedo superarlo?

Aquí están los dos videos de YouTube para mostrar el problema:

Sin parpadeo - YT (Todos los elementos de la cámara con ID 0-5 son visibles)

Con parpadeo - YT (solo los elementos de la cámara con ID 0-3 son visibles, 4-5 no son visibles)

-Javascript

 const sock2 = new WebSocket('ws://' + location.host + '/camera'); sock2.addEventListener('message', ev=>{ for(i=0;i<6;i++){ var webcam_element = document.getElementById(`camera_${i}`); webcam_element.src = "data:image/jpg;base64,"+ev.data; } });

-HTML

 {% for i in range(6) %} <div> <img class="feed" id="camera_{{ i }}"> <div class="feed_title_div"> <h5 class="font_def feed_title">Room</h5> </div> </div> {% endfor %}