html

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);

我更喜欢第二种方式

html - 如何动态改变base64图片

html - How to dynamic change base64 image

javascript

base64