html - Base64イメージを動的に変更する方法

Question

ライブビデオストリームをサーバーに送信し、Webページに表示しようとしています。さて、私は正常に私のイメージをhtmlページに表示しますが、私のイメージはフリーズしています。ブラウザの[更新]ボタンを押すと、画像が変わります。それをビデオストリームのように見せる方法は？以下の私の抜粋です。あなたの忍耐のため

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; \t 
 
    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>

ありがとう！

Answer 1

の最初のパラメータsetIntervalは、式を評価します。あなたが行ったことは、setimagesrc関数が設定された間隔で実行されるということです。これにより、のsetimagesrcが1回だけ実行されます。ここで行う必要があるのは、setimagesrc関数への参照を追加し、グローバル変数を使用するか、setIntervalの無名関数を使用して、setimagesrcをパラメーターで呼び出すことです。

例1：

setInterval(setimagesrc, 50); 

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

例2：

setInterval(function(){setimagesrc(src_url)}, 50); 

Iが第二の方法を好みます。