[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 257
  • Last Modified:

Website auto update for webcam

Hi,

I use software on my system that uploads a webcam picture to a server every second whilst their is motion within its view, now when someone visits this website the current Java code I use updates their image every second, each update uses approx. 11kb of data, is there a way to modify the code below so that it only bothers to change whats on view in the browser if the file is different to the original one that was shown?

<html>
<head>
<script language="JavaScript">
<!--
function refreshIt() {
  if (!document.images) return;
  document.images['imgHistory01'].src = 'cam.jpg?' + Math.random();

  setTimeout('refreshIt()',1000); // refresh every 5 secs
}
//-->
</script>
</head>
<body onLoad="setTimeout('refreshIt()',1000)">
<img src="cam.jpg" name="imgHistory01">

</body>
</html>
0
MirageSF
Asked:
MirageSF
  • 5
  • 3
1 Solution
 
Pravin AsarPrincipal Systems EngineerCommented:
<html>
<head>
<script language="JavaScript">
<!--
function refreshIt() {
  if (!document.images) return;
  // Get Updated Images Name
  var newSrc = 'cam.jpg?' + Math.random();
  // Are these guys different
  if (!document.images['imgHistory01'].src.match(newSrc))  {
       document.images['imgHistory01'].src = newSrc;
  }
  setTimeout('refreshIt()',1000); // refresh every 5 secs
}
//-->
</script>
</head>
<body onLoad="setTimeout('refreshIt()',1000)">
<img src="cam.jpg" name="imgHistory01">

</body>
</html>
0
 
MirageSFAuthor Commented:
Hi,

Thanx for that, but it still seems to download image every second even if the image is static and hasnt changed?

Cheers
0
 
Pravin AsarPrincipal Systems EngineerCommented:
var newSrc = 'cam.jpg?' + Math.random();

if Math.random() returns different number (which I suspect it is happening..)

I have added a line of code window.status = .. watch that line. and see.


function refreshIt() {
  if (!document.images) return;
  // Get Updated Images Name
  var newSrc = 'cam.jpg?' + Math.random();

  // Watch the status line ...
  window.status = newSrc;

  // Are these guys different
  if (!document.images['imgHistory01'].src.match(newSrc))  {
       document.images['imgHistory01'].src = newSrc;
  }
  setTimeout('refreshIt()',1000); // refresh every 5 secs
}
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
MirageSFAuthor Commented:
Yup the number changes, that was to defeat caching, but is obviously causing problems with detetcing if the file has really changed?
0
 
Pravin AsarPrincipal Systems EngineerCommented:
Please explain

1. When a image is updated, it is saved on same name or different name ?
2. If so what is naming convention.
0
 
MirageSFAuthor Commented:
Hi,

When file is uploaded it will always be called cam.jpg, it is only updated when motion is detected by the webcam, so will therefore have a differernt time stamp.
0
 
Pravin AsarPrincipal Systems EngineerCommented:
With javascript for a htm document you could get lastModified time

e.g

alert (document.lastModified);

for an image there is no such property.

I will try to find out..




0
 
Pravin AsarPrincipal Systems EngineerCommented:
Well I found a work around method,

<SCRIPT>
var mWindow=null;
function getLastModified()
{
    if (mWindow){
         var d=mWindow.document.lastModified;
         mWindow.close();
         alert(d);
         
         }
    // else user closed window before it completed (user has a popup killer)
         
    document.focus(); // make sure focus is back to this
}
function CheckFileDate(mFile)
{
    mWindow=window.open(mFile,"testDate","width=100,height=100");
    setTimeout("getLastModified();",10);
}

// Get last Modified time at load time.
var lastModified= CheckFileDate ('cam.jpg');    


// Within refreshIt () you have to call this and compare
// e.g.
function refreshIt() {
  if (!document.images) return;
  // Get Updated Images Name
  // var newSrc = 'cam.jpg?' + Math.random();

  // Watch the status line ...
  window.status = newSrc;
  var curModified= CheckFileDate ('cam.jpg');
  // Are these guys different
   if (lastModified != curModifed) {
       document.images['imgHistory01'].src = cam.jpg;
  }
  setTimeout('refreshIt()',1000); // refresh every 5 secs
}

</SCRIPT>
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now