I'm developing an application that requires constant streaming of images over a webSocket connection at a minimum of 30 frames per second.
I've run into a bit of a performance issue and am looking to optimize the best I can.
I was wondering what the performance differences would be between using a constantly updating image (like so<img src="someDynamicallyUpdatingBase64Image" /> vs drawing the image to a canvass (canvs.drawImage(someDynamicallyUpdatingImage, 0, 0, 640, 480))
To add some context, the images being sent to the client are being taken by a camera located server-side (think of an IP-Camera setup). We are only able to poll the camera for one individual image at a time, but this process can be done very quickly. The issue is that the client has to receive a buffer of bytes, encode the bytes into a base64 string (we're currently using the <img src=xyz> method), and have the dom redraw the image. This process is fairly lengthy and has caused quite a large deal of latency.