I make a project and I need to update the image (transmitted from the client in base64 format) without refreshing the page. At the moment there is such a (shit) code, but when the image is updated, flickering occurs (you can see how it loads ... paradise for epileptic). How to do all this good without flickering? PS Python (nginx + flask) is used as a backend. PPS Yes, now it costs 1 second, but I would like to get to 0.1.

<script type='text/javascript'> const Http = new XMLHttpRequest(); const method_name = 'getframe'; const url='http://stream.std-567.ist.mospolytech.ru/'; function update(){ Http.onerror = function(){ //alert("something went wrong"); } Http.open('POST', url + method_name); Http.send(); function _base64ToArrayBuffer(base64) { var binary_string = window.atob(base64); var len = binary_string.length; var bytes = new Uint8Array( len ); for (var i = 0; i < len; i++){ bytes[i] = binary_string.charCodeAt(i); } return bytes.buffer; } Http.onload = function(){ Http.onreadystatechange=(e)=> { //console.log(); screenpanel.src ="data:image/png;base64," + Http.responseText; } } } setInterval(update,1000); </script>
  • and what you are doing is a goal that can be different. I went in and it is not clear what you want to do at all - Sasuke
  • you have all the console in error per second more than 100 errors - Sasuke
  • Why not use Fetch API? Much more convenient - Pavel
  • screenpanel is that img if before that src is not correct will think because of this error - Sasuke
  • In general, streaming application. We receive a screenshot of the screen in base64 from the client and on the server display this picture. This script is pulled, so that the image is updated only (with an interval of a second now), and not the whole page. - Pavel Kutsubin

1 answer 1

Try using 2 pictures. A plan like this:

  1. Place two <img> elements on top of each other with different z-index ;
  2. After the base64-image is received, write it to the bottom <img> element;
  3. Swap pictures with z-index . (It may be necessary to have a short delay here using setTimeout )
  4. Download the following base64-picture. Then return to paragraph 2.

PS But I would still advise you to dig in the direction of the canvas or video .