title: html - How to dynamic change base64 image
body: <p>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:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.socket.io/socket.io-1.4.5.js"&gt;&lt;/script&gt;
  
  &lt;h1&gt;streaming&lt;/h1&gt;
  &lt;p&gt;
    &lt;img src="" id="image"&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for your patience!</p>