Question

我尝试将实时视频流传输到服务器并在网页上显示。好吧，我成功地在html页面上显示我的图像，但我的图像是冻结的。仅当我按下浏览器上的刷新按钮时，图像才会改变。如何让它像视频流一样显示？以下是我的摘录：

// Send error message to the server log if error connecting to the database    
date_default_timezone_set("Europe/London");
error_log("Incorrect login details have been entered by a user".PHP_EOL, 3, "logs/ErrorLogs.txt");

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

感谢您的耐心等待！

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图像

1 个答案: