我正在尝试在网页中连续刷新网络摄像头的屏幕截图。不是整个页面。
这是我当前的代码,只显示截图,没有刷新:
<!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>
以下是如何添加(或替换)随机查询字符串变量以强制重新加载图像。
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>