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

我尝试将实时视频流传输到服务器并显示在网页上。好吧，我在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>

谢谢你的耐心！

最佳答案

setInterval函数的第一个参数计算一个表达式。您所做的就是调用setimagesrc函数，该函数将在设置的时间间隔内执行。这将导致setimagesrc仅执行一次。您要做的就是添加对setimagesrc函数的引用并使用全局变量，或者在setInterval中使用匿名函数，该函数将使用参数调用setimagesrc。

范例1：

setInterval(setimagesrc, 50);

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

范例2：

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

我喜欢第二种方式。

关于javascript - html-如何动态更改base64图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37964611/