Forum Moderators: phranque

Message Too Old, No Replies

webcam broadcasting

         

webdudek

6:56 am on May 16, 2006 (gmt 0)

10+ Year Member



I want to add a webcam feed to my website and I'm not sure how to do it.
I thought about buying linksys wifi webcam but I'm not sure how to connect it to my web site,
Should I install anything on my server to proxy the feed?
Anyone has experience in this area?

pmkpmk

7:18 am on May 16, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



We are using an Axis webcam for many years now. Axis makes it pretty easy since they have embedded Linux in their cams with Web, FTP etc. - but the basic principle applies to all webcams.

I would not advise to connect the webcam directly to the web, i.e. grant worldwide access to the webcams own server. If too many visitors access the device, performance will suffer. What I am using right now is sort of a selfmade proxy:

  1. The webcam saves a still image via FTP at a given interval. The Axis cams can go as low as 1 second. If you only have a USB cam or a cam without any processor inside, you will find freeware/shareware tools which take an image and save it via FTP. Important: the filename must not be incremented - it should always be the same filename!
  2. The webpage itself loads the image as a static, still image! Yes, as a static image!
  3. A little piece of JavaScript code inside the pages head periodically refreshes the image. The interval should of course match the upload interval.

This works pretty good for me.

Here's the JavaScript for the

<head>
section of the site:


<script type="text/javascript" language="javascript">
<!--
function reloadImg(tImg, tTimeout) {
if(!document.images[tImg]) tImg = tImg.name;
uniq = new Date();
newImage = document.images[tImg].src;
if(newImage.indexOf ("?")!= -1) {
uniq = "&uniqid="+uniq.getTime();
index = newImage.indexOf("&uniqid=", 0);
}
else {
uniq = "?uniqid="+uniq.getTime();
index = newImage.indexOf("?uniqid=", 0);
}
if(index > 0) {
newImage = newImage.substr(0, index);
}
document.images[tImg].src = newImage+uniq;
setTimeout('reloadImg('+tImg+','+tTimeout+')', tTimeout * 1000);
}
// -->
</script>

And this is how it gets started inside the

<body>
tag:

<body onload="reloadImg('webcam1',3); reloadImg('webcam2',15);">

And then of course the image(s) need to have NAME-tags:

<img NAME="webcam2" src="http://www.example.com/webcam2.jpg" width="320" height="240">

Hope that helps!

webdudek

3:03 pm on May 16, 2006 (gmt 0)

10+ Year Member



thanks pmk,
This is a very interesting way to solve this problem, I'll give it a try, although I'm not sure that 1 frame per sec will be good enough for me, I thought about real video streaming.
I understand that if I want people to see my camera, I need to capture the video on my server, and broadcast it over there.
Is there a server side software that can do it?

bill

5:19 am on May 17, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I ran a streaming webcam for a bit and used a commercial software to handle all this for me. I had options to run server-side push or client-side pull for streaming. The client-side pull method relied on a Java applet on the webpage that streamed video from the server. That seemed to work better than the push method which relied on a JavaScript similar to the one pmkpmk provided above.

webdudek

6:53 am on May 17, 2006 (gmt 0)

10+ Year Member



can you please sticky mail me the name of that software?