如何在网页中定期刷新网络摄像头快照

问题描述 投票:0回答:1

我正在尝试在网页中连续刷新网络摄像头的屏幕截图。不是整个页面。

这是我当前的代码,只显示截图,没有刷新:

<!DOCTYPE html>
<html>
<body>
<script language="JavaScript">
var myImageElement = document.getElementById('camshot');
myImageElement.src = 'api.jpg?rand=' + Math.random();

setInterval(function() {
    var myImageElement = document.getElementById('canshot');
    myImageElement.src = 'api.jpg?rand=' + Math.random();
}, 10000);
</script>

</body>
<img src="http://192.168.0.168/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=wuuPhkmUCeI9WG7C" id="camshot" >
</html>
javascript html screenshot webcam
1个回答
0
投票

以下是如何添加(或替换)随机查询字符串变量以强制重新加载图像。

var myImageElement = document.getElementById('camshot');

function setRnd(url) {
    var randomNum =Math.random()
    var urlObj = new URL(url);
    urlObj.searchParams.set('rnd', randomNum);
    return urlObj.href;
}

setInterval(function() {
  var src = myImageElement.src
  var new_src = setRnd(src)
  myImageElement.src = new_src

}, 5 * 1000)
<img src="https://picsum.photos/150" id="camshot" >
<p>Image will change every 5 seconds</p>

© www.soinside.com 2019 - 2024. All rights reserved.