javascript - html - 如何动态更改base64图像

Question

我尝试将实时视频流传输到服务器并在网页上显示。好吧，我成功地在 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;	
  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 仅执行一次。您要做的就是添加对 setimagesrc 函数的引用并使用全局变量，或者在 setInterval 中使用匿名函数来调用 setimagesrc 与参数。

示例1:

setInterval(setimagesrc, 50);

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

示例2:

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

我更喜欢第二种方式。