Live Camera Feed to Web Page

[Jeff Sundin]

I have a customer who is planning to install a live camera in a remote location that updates about every fifteen seconds. He wants to feed that image into a window on a page of his site. Can someone point me in the direction of what I'll need to learn?

[kgun]

That is close to an online (broadband) real time Tv over Ip:

Perhaps you can talk to the experts here: AVForums Home

Related thread: Google TV

DSL · Cable · VOIP · Security · Satellite · Fiber · News · Tips · Reviews · Community · Tools - dslreports.com

[wige]

I used to work for a consumer electronics company as a technician, specifically working on IP camera systems. Generally speaking, it is very easy to integrate. There are a few different ways to accomplish this. Generally speaking you would not want to present the user with access to the live feed. This will increase your bandwidth, slow down the rest of the network, and present a potential security risk to the network itself.

The cameras I worked with had a built in FTP client and a timer. You could set up the timer to take a still image every so many seconds or minutes and transfer the image to a web server via FTP. This will probably give you the exact results you are looking for. Then the only thing you need is basic Javascript to change the image every 15 seconds if you don't want the user to have to refresh the page manually.

[Alan-Hart]

This software (http://www.pysoft.com/ActiveWebCamMainpage.htm) can do the ftp upload for you then you just need some javascript to display and update the image every xx seconds

This JavaScript will load new images from a 640 × 480 webcam as fast as your connection (or the server's) can supply them, without caching problems. It requires the "document.images" object, though could easily be updated for more modern DOMs by using document.getElementWithId().

<script type="text/javascript" language="JavaScript">
newImage = new Image();
function LoadNewImage()
{
var unique = new Date();
document.images.webcam.src = newImage.src;
newImage.src = "http://path/to/webcam.jpeg?time=" + unique.getTime();
}
function InitialImage()
{
var unique = new Date();
newImage.onload = LoadNewImage;
newImage.src = "http://path/to/webcam.jpeg?time=" + unique.getTime(); document.images.webcam.onload="";
}
</script>
<img src="http://path/to/webcam.jpeg" name="webcam" onload="InitialImage()" width="640" height="480">

[eCycle Group]

Hi everyone. We are new to this site and we are considering posting a live video feed into our processing facilities. We recycle printer cartridges and cell phones . Our web url is Recycle Cartridges and Used Cell Phones. (that slogan just popped up when I entered our url - another mystery).

Any advice would be great. Is this common to post a feed that is focused on processing?

[Dubbya]

I'm with Wige and Mr. Hart.

We did virtually the same thing several years back.

Our client runs construction sites all across the prairies and wanted their investors and potential clients to be able to monitor projects from anywhere.

We used a local PC on the job site which was hooked up to an outdoor webcam to shoot still images every 30 seconds. The camera software would then log on to the net, ftp the still shots (via dialup connection) to the web server, log off and compile the still shots into stop motion videos at the end of each week. All automatically.

The clients were thrilled and so where their investors. Eezie-Peezie to set up, inexpensive to operate and it works like a charm as long as there's an internet connection and a power supply.

Sorry, can't recall the name of the software but there are a few brands around that all do pretty much the same thing. Follow Alan-Hart's link, that'll get ya started in the right direction.

[eCycle Group]

Thanks Dubbya!

[uberanimal]

wont that eat up bandwidth like a mother?

[Dubbya]

wont that eat up bandwidth like a mother?

Nope... only connects to the network once a minute, just long enough to upload a 320x240 .jpg file

The video is not meant for the general public and are seldom ever linked to other than in the pages they're displayed in.

[kgun]

Originally Posted by wige

I used to work for a consumer electronics company as a technician, specifically working on IP camera systems. Generally speaking, it is very easy to integrate. There are a few different ways to accomplish this. Generally speaking you would not want to present the user with access to the live feed. This will increase your bandwidth, slow down the rest of the network, and present a potential security risk to the network itself.

The cameras I worked with had a built in FTP client and a timer. You could set up the timer to take a still image every so many seconds or minutes and transfer the image to a web server via FTP. This will probably give you the exact results you are looking for. Then the only thing you need is basic Javascript to change the image every 15 seconds if you don't want the user to have to refresh the page manually.

My bolding.

Googling that term gives a lot of potential solutions.

[kgun]

Originally Posted by Alan-Hart

This JavaScript will load new images from a 640 × 480 webcam as fast as your connection (or the server's) can supply them, without caching problems. It requires the "document.images" object, though could easily be updated for more modern DOMs by using document.getElementWithId(). You mean document.getElementById().

<script type="text/javascript" language="JavaScript">
newImage = new Image();
function LoadNewImage()
{
var unique = new Date();
document.images.webcam.src = newImage.src;
newImage.src = "http://path/to/webcam.jpeg?time=" + unique.getTime();
}
function InitialImage()
{
var unique = new Date();
newImage.onload = LoadNewImage;
newImage.src = "http://path/to/webcam.jpeg?time=" + unique.getTime(); document.images.webcam.onload="";
}
</script>
<img src="http://path/to/webcam.jpeg" name="webcam" onload="InitialImage()" width="640" height="480">

May be that script is good enough, but is it crossbrowser compatible?

Good starting point.

[wige]

In our case the cameras I worked with had a built in web server and FTP solution, so that everything could be automated from the device itself. This cut down on the need for additional resources at the site where the camera was installed. All you need at that location is a firewall to limit direct access to the camera. On your web server you would create the client-side coding.

This functionality is available on IP cameras from D-Link, Linksys, and Panasonic, and probably others.