Html Question posted in
Some basic documentation can be found here.

Html – Need help to refresh periodically a webcam snapshot in a webpage – not the whole webpage

I have searched intensive for a solution of my problem but found noting helpful in my case. What i try to archive is 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 to refresh it. Any help is appreciated.

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

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks, works as expected. I didn't think to refresh the URL.


  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search