I'm currently working on a video streaming website with WebSockets, streaming data from the webcam using open cv Python, sending them over frame by frame to a web socket. the client web socket reads the data and displays the image. I'm however experiencing a flickering issue with the images when all the feed elements are not visible, however when all feeds are visible it seems to work fine.

I've attached the html code (using jinja templates) and also the javascript

Could someone help me figure out why this is happening and how I can overcome it?

Here are the two YouTube videos to show the issue:

Without flicker - YT (All camera elements with ids 0-5 are visible)

With flicker - YT (Only camera elements with ids 0-3 are visible, 4-5 aren't visible)

-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 %}