Need help with webcam script

**WarrenW** · Mar 28th, 2013, 03:41 PM

Hello,

I have an app that constantly uploads an image from the webcam. I am using the following script to view it which works great. Except I am getting "Loading..." a lot and no image during that time. I assume it is trying to load the image when it is being written? What can I do to keep the previous image there during the Loading time?

Or is there a better way to do this where it is fast and not showing the Loading?

Thanks!!

Code:

<HTML>
<HEAD>
<TITLE>Watch</TITLE>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"> 
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2020 11:12:01 GMT"> 
</HEAD>
<BODY LINK=BLUE ALINK=BLUE VLINK=BLUE>
<script language="javascript" type="text/javascript" >
function ChangeMedia(){
	var d = new Date();
	var t = d.getTime();
	document.getElementById('cmr').src = "pic.jpg?"+t;
}
var reloadcam = setInterval("ChangeMedia()",500);
</script>
<img src="pic.jpg" alt="Loading..." name="cmr" width="320" height="200" border="0" id="cmr" />
<BR>
<BR></BODY>
<HEAD>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"> 
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2020 11:12:01 GMT"> 
</HEAD>
</HTML>

**tr333** · Mar 30th, 2013, 08:12 AM

Wow! HTML from 1995!

At first glance, not entirely sure what might be the problem, but there are definitely a few things that can be fixed up.

Add a doctype! My example code uses HTML5 doctype.

Only one <head> section on the entire page. Browsers might barf at seeing more than one of them.

If you want to set anchor link colours, do it in CSS; but then I don't see any anchor tags on the page so this can be ignored.

Likewise for the image, best to style it with CSS instead of tag attributes.

Name attribute should not be used on the image tag. The name attribute only applies to form elements and has been deprecated in HTML5 in favour of the id attribute.

Meta tags for caching are much less useful on the page itself (but still good, if you can't set it from the webserver directly). You would hope that the camera (or wherever the images are coming from) is setting appropriate caching headers on the actual jpeg image resources, as the images are downloaded and stored in browser cache separately to the .html page.

Your script will only execute every 0.5 seconds. This would cause the initial 0.5 seconds after page load to show the "Loading..." if pic.jpg requires the querystring time parameter to return an actual image.

A quick sample, note the modified image url

http://jsfiddle.net/KbFns/1/

**tr333** · Mar 30th, 2013, 08:15 AM

The sample as straight HTML:

HTML Code:

<!doctype html>
<html>
<head>
    <title>Watch</title>
    <style>
        /* apply styles to all images on page */
        img {
            width:320px;
            heigh:200px;
            border:0;
        }
    </style>
    <script>
        function changeMedia() {
            var d = new Date();
            var t = d.getTime();
            document.getElementById('cmr').src = "pic.jpg?" + t;
            setTimeout(changeMedia, 500); // set to run again in 500ms
        };
 
        window.onload = changeMedia; // run once immediately on page load
 
    </script>
</head>
<body>
    <img src="pic.jpg" id="cmr" alt="Camera image" />
</body>
</html>

**WarrenW** · Apr 1st, 2013, 08:24 AM

Thanks for the reply. Yes it is probably old code but it works. I need to show a webcam image that works on all browsers including android and apple devices. Do you have any other suggestions on how to show the image more smoothly?

Thanks,

Warren

**tr333** · Apr 1st, 2013, 05:54 PM

Without a webcam to test on, it's impossible to say. And then there's going to be differing definitions of "smoothly"...

**WarrenW** · Apr 2nd, 2013, 08:38 AM

I was just curious because you said the html code was old. So I wasn't sure if you were referring to the script itself or everything else. I plays smooth enough for me and I'm not getting the reload so much anymore.

Thanks

Thread: Need help with webcam script

Thread Tools

Display

Need help with webcam script

Re: Need help with webcam script

Re: Need help with webcam script

Re: Need help with webcam script

Re: Need help with webcam script

Re: Need help with webcam script

Posting Permissions