How to refresh a webcam snapshot periodically in a webpage

Question

How to refresh a webcam snapshot periodically in a webpage

30 views Asked by Jo Pare At 29 March 2024 at 21:45

I am trying to refresh a screenshot from my webcam in a webpage continously. Not the whole page.

This is my current code, which only shows a screenshot without refreshing it:

<!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>

Original Q&A

There are 1 answers

**IT goldman** · Answer 1 · 2024-03-30T00:22:38+00:00

Here's how to add (or replace) a random query string variable in order to force reload of image.

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>

TechQA.

How to refresh a webcam snapshot periodically in a webpage

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in SCREENSHOT

Related Questions in WEBCAM

Popular Questions

Popular Tags

Trending Questions