I've done this using javascript and html layering in the past. The only problem is, the javascript "video" feed is actually a series of still images and has rather low frame rate... the best I've ever go, even over 1 gigabit connection, is 10 fps. I've successfully used this script with both webcams connected to webcamxp (from which the script is derived) and with my dlink netcams... It will work with ANY webcam/ipcam or other video source that will display a constantly updated jpg image via http.
Here's the code:
Code:
<script LANGUAGE="JavaScript">
<!--
errorimg1= 0;
function LoadImage1()
{
uniq1 = Math.random();
document.images.webcam1.src = "cam_1.jpg?uniq="+uniq1;
}
function ErrorImage1()
{
errorimg1++;
if (errorimg1>1){
document.images.webcam1.onload = "";
document.images.webcam1.src = "offline.jpg";
}else{
uniq1 = Math.random();
document.images.webcam1.src = "cam_1.jpg?uniq="+uniq1;
}
}
function DoIt1()
{
errorimg1=0;
window.setTimeout("LoadImage1();", 97);
}
document.write('<img src="loading.jpg" id="webcam1" name="webcam1" onload="DoIt1()" onerror="ErrorImage1()" width=640 height=480 border=0 style="border-color:#000000; border-style:solid;">');
//-->
</script>
- replace "cam_1.jpg" with the url/name of the updated jpg image that will become your "video"
- replace "loading.jpg" and "offline.jpg" with the url/name of the images you want displayed when the video is loading or offline.
- replace the width and height values with the dimensions you want the video displayed in, regardless of the source's dimensions.
Here's a screencap I took when I used this script with layers to overlay a control pad over a videofeed:
You can also do neet things like use iframes to have multiple feeds displayed at once (for example, clicking "all" in my screencap would bring up a 9-camera grid from which you could view all cameras at once, and select one by clicking on it or its number.
I created the layers using dreamweaver. I'm not sure if it's possible to create layers without a good WYSIWYG html editor, becuase the coding for it is not very intuitive (I have a hard-enough time creating nested frames in code as it is).
I created the "controls" using photoshop, cut 'em into pieces,and then saved it all as a web page.
