Home/ Questions/Q 8478451
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T18:45:00+00:00

I am trying to load the latest image from a CCTV server for each

  • 0

I am trying to load the latest image from a CCTV server for each of our cameras on our network.

I have the following code, which works correctly and refreshes the image constantly. However, on the final version of the page there will be around 10 camera images on the page. I was wondering if the code I have now could be altered to refresh all images – not just specific ones.

At first I thought I could just use the same identifier for each image, but then I realised that the source of each image differs.

<html>
<head>
 <title>CCTV Test</title>
 <script type="text/javascript" language="JavaScript">
    newImage = new Image();

    function LoadNewImage()
    {
        var unique = new Date();
        document.images.ward.src = newImage.src;
        newImage.src = "http://192.168.1.64/image/WARD?time=" + unique.getTime();
    }

    function InitialImage()
    {
        var unique = new Date();
        newImage.onload = LoadNewImage;
        newImage.src = "http://192.168.1.64/image/WARD?time=" + unique.getTime();
        document.images.ward.onload="";
    }
 </script>
</head>
<body>
<img src="http://192.168.1.64/image/WARD" name="ward" onload="InitialImage()">
</body>
</html>

Any pointers would be appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Something along the lines of this:

    <!DOCTYPE html>
<html>
<head>
  <title>CCTV Test</title>
</head>
<body>
  <img src="http://192.168.1.64/image/WARD?time=...">
  <img src="http://192.168.1.64/image/WARD?time=...">
  etc.
  <script>
  setInterval(function() {
      var images = document.images;
      for (var i=0; i<images.length; i++) {
          images[i].src = images[i].src.replace(/\btime=[^&]*/, 'time=' + new Date().getTime());
      }
  }, 10000); // 10000 milliseconds = 10 seconds
  </script>
</body>
</html>

    This will refresh all images every 10 seconds.

    A different approach is to store the locations of the images in an array.

    • 0