Solved

Webcam Photo not refreshing

Posted on 2011-03-09

2 solutions

602 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?

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

Join The Community

8 Comments

LVL 2

Assisted Solution

by:Roza

Roza earned 200 total points

ID: 350863522011-03-09

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.

LVL 16

Accepted Solution

by:sjklein42

sjklein42 earned 300 total points

ID: 350867252011-03-09

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

LVL 16

Expert Comment

by:sjklein42

ID: 350868222011-03-09

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

LVL 16

Expert Comment

by:sjklein42

ID: 350872872011-03-09

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?

Author Comment

by:katlees

ID: 350872982011-03-09

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.

LVL 16

Expert Comment

by:sjklein42

ID: 350879772011-03-09

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

LVL 16

Expert Comment

by:sjklein42

ID: 350908892011-03-09

I'm afraid my code is taking down the camera server.

Author Closing Comment

by:katlees

ID: 351013542011-03-10

Both responses worked but I liked the one where I could embed it right into the website! Thanks guys

Featured Post

Question has a verified solution.

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

Installing Smart Indenter in Office 2013-2016

Article by: MacroShadow

Since upgrading to Office 2013 or higher installing the Smart Indenter addin will fail. This article will explain how to install it so it will work regardless of the Office version installed.

Code Responsibly

Article by: Brandon

What do responsible coders do? They don't take detrimental shortcuts. They do take reasonable security precautions, create important automation, implement sufficient logging, fix things they break, and care about users.