Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Webcam Photo not refreshing

Posted on 2011-03-09
8
Medium Priority
?
603 Views
Last Modified: 2012-05-11
We are trying to put a webcam on our website. My page www.downtownrapidcity.com/camera.html is set to refresh every 5 seconds which it does. But the photo doesn't change from the webcam. I have to manually click on Refresh on my browser window to get the image to change.

If you go to http://208.117.100.102/cgi-bin/viewer/video.jpg where it is pulling the photo, it updates with each refresh of the page.

How do I get the image to change with each auto refresh?
0
Comment
Question by:katlees
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
8 Comments
 
LVL 2

Assisted Solution

by:Roza
Roza earned 800 total points
ID: 35086352
I guess browser is cacheing your image instead of reloading it when page reloads.

Try adding

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

between HEAD tag.
0
 
LVL 16

Accepted Solution

by:
sjklein42 earned 1200 total points
ID: 35086725
My approach is to add a random tag to the image URL each time it is fetched to bypass caching.  Sometimes it is the webcam software itself that does the caching.

<SCRIPT LANGUAGE="JavaScript">

url='http://208.117.100.102/cgi-bin/viewer/video.jpg?v=';

var image1 = new Image();
function RefreshMyCamera()
{
    if ( ( image1.src != '' ) && (image1.complete) )
    {
        document.images['mycamera'].src = image1.src
    }
    imgno = Math.round(Math.random()*215815);
    image1.src = url + imgno;
    setTimeout('RefreshMyCamera()', 5000);  // inter-frame delay in msec
}
</script>

<img border='0' src='http://208.117.100.102/cgi-bin/viewer/video.jpg' name='mycamera'>

<SCRIPT LANGUAGE="JavaScript">
setTimeout('RefreshMyCamera()', 10);
</SCRIPT>

Open in new window

0
 
LVL 16

Expert Comment

by:sjklein42
ID: 35086822
You video server (camera) appears to be down.

Instead of an image it is returning this:

http://208.117.100.102/cgi-bin/viewer/video.jpg

HTTP/1.1 500 Internal Server Error
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 16

Expert Comment

by:sjklein42
ID: 35087287
The javascript approach has the added advantage that only the image is updated, so you can embed it in a static web page and not have to refresh the whole page.

Did we take down your camera server?
0
 

Author Comment

by:katlees
ID: 35087298
I don't know. Another company does the camera server I have put in a trouble ticket to them. Thanks... as soon as it is back up I can try these fixes.
0
 
LVL 16

Expert Comment

by:sjklein42
ID: 35087977
Improved version.  I have it pointing at my webcam for now.  You can change the URL (in two places) and try it with your camera when your server comes back online.

<SCRIPT LANGUAGE="JavaScript">

var url='http://sjklein.dyndns.org:11001/cam_1.jpg?';
var frq=1500;           // interval in msec

function PrefetchImage()
{
    var imgno = Math.round(Math.random()*215815);
    image1 = new Image();
    image1.src = url + imgno;
}

var imgno;
var image1;

PrefetchImage();

function RefreshMyCamera()
{
    if (image1.complete)
    {
        document.images['mycamera'].src = image1.src
        PrefetchImage();
    }

    setTimeout('RefreshMyCamera()',frq);
}
</script>

<img border='0' src='http://sjklein.dyndns.org:11001/cam_1.jpg' name='mycamera' width=95%>

<SCRIPT LANGUAGE="JavaScript">
setTimeout('RefreshMyCamera()', 10);
</SCRIPT>

Open in new window

0
 
LVL 16

Expert Comment

by:sjklein42
ID: 35090889
I'm afraid my code is taking down the camera server.
0
 

Author Closing Comment

by:katlees
ID: 35101354
Both responses worked but I liked the one where I could embed it right into the website! Thanks guys
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When we want to run, execute or repeat a statement multiple times, a loop is necessary. This article covers the two types of loops in Python: the while loop and the for loop.
If you are a mobile app developer and especially develop hybrid mobile apps then these 4 mistakes you must avoid for hybrid app development to be the more genuine app developer.
Six Sigma Control Plans
Starting up a Project

661 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question