mercredi 29 juin 2016

html - How to dynamic change base64 image


I am try to transmit live video stream to server and show on web page. Well, I successfully show my image on the html page, but my image is freeze. The image will change only when I press refresh button on the browser. How to make it show like a video stream? Following is my snippet:

var socket = io();

socket.on('liveCam', function(url) {

  var old_url = '';
  var diff = strcmp(url , old_url);
  old_url = url;

  console.log('diff =', diff);
  var src_url = 'data:image/jpeg;base64,' + url;	
  setInterval(setimagesrc(src_url), 50);

});

function setimagesrc(uurl){
  $('#image').attr('src', uurl);
}

function strcmp ( str1, str2 ) {
  return str1 == str2 ? 1 : 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>

<h1>streaming</h1>
<p>
  <img src="" id="image">
</p>

Thanks for your patience!


Aucun commentaire:

Enregistrer un commentaire