Jump to content

Refresh a Webcam Image


ericbacrh
 Share

Recommended Posts

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:

<img src="cam. jpg" width="320" height="240" name="cam" alt="Webcam Image" onload="Refresh()">

<script language="JavaScript" type="text/javascript">

<!--

var camsrc="cam. jpg";

function Refresh() {

tmp = new Date();

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

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

}

// -->

</script>

Any help would be great.

Link to comment
Share on other sites

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;

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!)

Link to comment
Share on other sites

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;

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...