I have a socket-io server that sends to my frontend an image (base64 encoded) every 20ms. The problem I have right now is that the frontend can't keep up such a high speed.

At the moment I use an image and I change it's src attribute :

// 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;
});

It works whenever I change the fps to 10 (= re renders every 100ms) but it's not fast enough to look smooth. Also, it depends on the size of the image : if I try to set it to 500x500 instead of 250x250, 10 fps doesn't work anymore and I have to set it to 5 fps.

EDIT : The way it works is that I get the user's webcam, I capture a frame, I send it to my server using sockets, the server process the image though openCV and returns it to the client. The server returns the base64 frame created using the openCV frame.

Thanks