Refresh a Webcam Image

ericbacrh · June 15, 2007

I'm trying to find the best solution to this issue. I need to reload a static jpeg on a website as soon as the image finishes loading (basically I want to keep a constant stream of webcam images). One reason for this is I need it to be quick on a fast connection, but degrade for a user on a slow connection. I've been using the <img onload=""> attribute, but it seems it doesn't work too well in older versions of IE when I am sending XMLHTTP requests. I need this solution to work with IE 6, IE 7, Firefox, Opera, and Safari. Here's my current code:

<!--

var camsrc="cam. jpg";

function Refresh() {

tmp = new Date();

tmp = "?"+tmp. getTime();

document. images["cam"]. src = camsrc+tmp;

}

// -->

</script>

Any help would be great.

digip · June 15, 2007

If you refresh it as soon as it is loaded will it ever appear? I mean, it is going to constantly be refreshing the page. I would put a timer in there to count a few seconds then refresh it.

&lt;html&gt; 
&lt;script&gt; 
var image1; 
var imgBase="http://www.twistedpairrecords.com/digip/avatar.png?" 
var c = 0; 
function count() 
{ 
 image1.src=imgBase+(++c); 
} 
function init() 
{ 
 image1 = document.getElementById("image1"); 
 if( image1 ) 
 { 
  setInterval("count()",4000); // Set time in milliseconds 1000 = 1 second
 } 
} 
window.onload = init; 
&lt;/script&gt; 
&lt;body&gt; 

&lt;img id="image1" src="http://www.twistedpairrecords.com/digip/avatar.png"&gt;

&lt;/body&gt; 
&lt;/html&gt;

ericbacrh · June 15, 2007

Actually, how I'm doing it right now works pretty good in all browsers except IE 6. I put a small delay in (about 500ms), but I use the onload event to trigger it. The next image doesn't display until it's completely loaded, so there is always an image up on the screen. You can check out the site here if you want: www.controlourjunk.com/control.php

deleted · June 15, 2007

Works Alright, I want to try something like this.

digip · June 15, 2007

Well, the one I posted works in IE6 an dOpera. Just tested it before posting it.

digip · June 15, 2007

Thats a pretty slick setup with the controlling of the robots. :-D

ericbacrh · June 15, 2007

Thanks =). But the issue is it needs to be as close to realtime as possible. I also have people who are using it from satellite and high-ping connections, so I need it to scale. That's why I found the onload event to work so well. I get quite a bit of complaints that it doesn't work well with IE6, though. The webcam images load fine in IE6 until you click a control button, which sends an XMLHTTP request and somehow stops the flow of webcam images. Maybe I should just hope everyone switches to other browsers or upgrades to IE7/Vista. Why does it seem like Microsoft changes their standards every version of the browser? (I find it differs between versions of IE 6 even!)

digip · June 16, 2007

Thanks =). But the issue is it needs to be as close to realtime as possible. I also have people who are using it from satellite and high-ping connections, so I need it to scale. That's why I found the onload event to work so well. I get quite a bit of complaints that it doesn't work well with IE6, though. The webcam images load fine in IE6 until you click a control button, which sends an XMLHTTP request and somehow stops the flow of webcam images. Maybe I should just hope everyone switches to other browsers or upgrades to IE7/Vista. Why does it seem like Microsoft changes their standards every version of the browser? (I find it differs between versions of IE 6 even!)

Don't know if this will help you, but you can move the init command into the image's onLoad and shorten the refresh time. Here is the revised version demonstrating it.

&lt;html&gt; 
&lt;script&gt; 
var image1; 
var imgBase="http://www.twistedpairrecords.com/digip/avatar.png?" 
var c = 0; 
function count() 
{ 
 image1.src=imgBase+(++c); 
} 
function init() 
{ 
 image1 = document.getElementById("image1"); 
 if( image1 ) 
 { 
  setInterval("count()",2000); // Set time in milliseconds 1000 = 1 second
 } 
} 

&lt;/script&gt; 
&lt;body&gt; 

&lt;img id="image1" src="http://www.twistedpairrecords.com/digip/avatar.png" onLoad=" init();" &gt;

&lt;/body&gt; 
&lt;/html&gt;

Deveant · June 16, 2007

Just wondering, AJAX? would it allow for the Image to be updated with out the page refreshing?

digip · June 16, 2007

Just wondering, AJAX? would it allow for the Image to be updated with out the page refreshing?

You know, I was thinking that too, but wasn't sure how to script it. Any working examples?

ericbacrh · June 16, 2007

Yea, I'd like to try and get away from using the onload event, as I think that may be what is causing the issue in IE6. If anyone knows how to smoothly stream jpegs with Ajax, that would be a big help. Like I've said before, I need it to work on a variety of connections.

ericbacrh · June 16, 2007

Does anyone have a machine with IE6 on it by chance? I'm using all Linux/Mac. If someone could test the current site (www.controlourjunk.com/control.php) with IE6 and let me know how it goes, that would help a lot too. I believe the problem happens when you click buttons to control stuff and the webcam stops loading.

Edit: Just read up on browser share. Seems IE6 is down to about 38%, which is great. I've confirmed my site to work in Firefox, Safari, Opera, and IE7. Maybe I don't need a solution and IE6 browser share will fizzle out as people upgrade.

Deveant · June 16, 2007

Yea, I'd like to try and get away from using the onload event, as I think that may be what is causing the issue in IE6. If anyone knows how to smoothly stream jpegs with Ajax, that would be a big help. Like I've said before, I need it to work on a variety of connections.

:( sadly ive been wanting to take a look into AJAX for sometime now, but sadly havnt had the time to get into it.

digip · June 16, 2007

Here is an ajax webcam: http://mr-webcam.no-ip.co.uk/webcams/ajax-webcam2.html

Maybe view the source of his page and see how to mod it to your needs.

elmer · June 16, 2007

I'm not good with Javascript at all, but maybe someone here knows what this means. It's part of the source from the ajax webcam.

&lt;script LANGUAGE="JavaScript"&gt;
&lt;!--
function wait(delay,next){
if (next ==0) { next = 8; }
setTimeout('swapphotos(' + next + ')',delay);
}


function swapphotos(item){
  tempfile = 'http://our-evesham.no-ip.com:8111/image.jpg' + '?' + Math.random()*1000000;
  document['webshothidden'].src = tempfile;
  
  

}
// --&gt;
&lt;/script&gt;

digip · June 16, 2007

Yeah Elmer. I just posted a link to the page. Your missing the code that goes into the image part of the page though.

&lt;img border="0"  name="webshot" 
src="http://our-evesham.no-ip.com:8111/image.jpg" width="340" height="280"&gt;

the name="webshot" part tells it what image to refresh. He would have to add a few lines of code to update both images, not just the one, but I am sure he can figure that part out.

ericbacrh · June 16, 2007

That's kind of like what I'm already doing. The image changes without reloading anything else on the page. It looks like they used a time delay, and I'm not sure how that scales with different connections.

digip · June 16, 2007

There should be a way to add the init command to all the xml requests as well, so it refreshes the image when clicking the other links.

ericbacrh · June 16, 2007

There should be a way to add the init command to all the xml requests as well, so it refreshes the image when clicking the other links.

Hmm, I think that might just work. I need to find an IE machine to test it on, but doing it that way should force a reload of the image right after the xmlhttp request is sent to the server. It can't hurt, so I'll implement it.

Edit: Implemented. I see no change for other browsers, so hopefully it fixed the site on IE6. If anyone could confirm if it works, that would be great. Thanks.

digip · June 16, 2007

Looks like it is working, although I see an image place holder while the image updates after hitting on of the commands, like raise the elbow, etc..The image does update and show up though when done loading.

ericbacrh · June 16, 2007

What is the place holder? And does the webcam continue to stream after the next initial image loads? If so, it's fixed.

digip · June 16, 2007

What is the place holder? And does the webcam continue to stream after the next initial image loads? If so, it's fixed.

Normal image place holder until image loads. It works fine in IE6. A little slower than other browsers, like Opera works awesome, but IE6 works fine for me as well. I click the links to move the arm and it refreshes, then I see all the images play out like a video, watching it move around, so i'd say job well done.

ericbacrh · June 16, 2007

Okay, thanks a bunch for the help. Hopefully more people will upgrade from IE6 and find the advantage of using a better browser.

natural_orange · June 20, 2007

There is actually winxp powertoy called timershot that will take a jpeg at specified intervals and either save them as a date_title.jpeg or overwrite the existing one.

I had one of my front yard and used a meta-refresh and put it on my background so i could watch the driveway

digip · June 20, 2007

There is actually winxp powertoy called timershot that will take a jpeg at specified intervals and either save them as a date_title.jpeg or overwrite the existing one.
I had one of my front yard and used a meta-refresh and put it on my background so i could watch the driveway

If you check his page out, you will see that he is doing things a little different. WHen you click one of the camera controlling functions, it would normall stop the page from loading in Internet Explorer. The image would stop refreshing. He now has it so it also inits the image on camera commands, so either way, it will refresh the image, and no the whole page, which would not be good.

Sign In

Refresh a Webcam Image

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members