I have bought a number of cheap webcams to use to spy around the place at work. They function okay enough but the user interface is dire. So I'd like to integrate the images into our internal web pages. Simple, I thought - just copy the source from the camera and paste the apropriate bits into our pages. Well it doesn't work and I can't see why. For a start IE complains about "An ActiveX control on this page might be unsafe to interact with other parts of the page. Do you want to allow this interaction?" I click yes and then all I get is a blank picture.
Here's the original from the camera:
Code:
<HTML><HEAD><TITLE>IP Cam</TITLE>
</HEAD>
<BODY bgColor=#99CCFF>
<table border=0 bgcolor=#66CCFF cellspacing=0 width=1076 style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" height="80">
<tr>
<td bgcolor=#99CCFF align=center height=36 width="1074">
<b><center><font size="5" color="#FFFFFF" face="Times New Roman">Live Video</font></center></b>
</td>
</tr>
<tr>
<td bgcolor=#0066CC width="1074" height="24">
<center><font face="Times New Roman"><img border="0" src="../Comm/Menu.gif"><font class=org-news><b><font color="#FFFFFF">
</font></b><a href="startpage.htm" TARGET="_top">
<font color="#FFFFFF">IP Camera Demo</font></a></font></font></center>
</td>
</tr>
</table>
<FONT face=Arial>
<form name=CF method=post action=/ConfigIpcam onsubmit='return SubmitRequest();'>
<CENTER>
<HR>
<script language=JavaScript>
var va_width = '640';
var va_height = '480';
</script>
<SCRIPT language=JavaScript>
//if(va_width==320)
// window.resizeTo(900,620)
//else if(va_width==640)
// window.resizeTo(900,730)
if ((navigator.appName == "Microsoft Internet Explorer")&&(navigator.platform != "MacPPC")&&(navigator.platform != "Mac68k"))
{
document.write("<OBJECT ID=CamImage WIDTH=")
document.write(va_width)
document.write(" HEIGHT=")
document.write(va_height)
document.write(" CLASSID=CLSID:AA0FB75C-C50E-47B6-B7E0-3B9C3FAA8AC4 ")
document.write(" CODEBASE=\"/Comm/IPCamControl.cab#Version=1,0,0,0 \">")
document.write("<PARAM NAME=\"URL\" VALUE=\"/video.cgi\">")
document.write("<PARAM NAME=\"User\" VALUE=\"\">")
document.write("<PARAM NAME=\"Password\" VALUE=\"\">")
document.write("</OBJECT>")
}
else
{
document.write('<IMG SRC=/video.cgi WIDTH='+va_width+' HEIGHT='+va_height+'>')
}
</SCRIPT>
<HR>
</CENTER>
</font>
<p>
<center>
<font face="Times New Roman">
<input class=But type=submit value="Snapshot E-mail" style="background-color: #0066CC; color: #FFFFFF; border-style: ridge; border-color: #FFFFFF">
<input class=But type=reset value="ActiveX Help" onclick=window.open('Help.htm','_blank') style="background-color: #0066CC; color: #FFFFFF; border-style: ridge; border-color: #FFFFFF;">
<input class=But type=reset value="Add To Favorites" onclick=window.external.AddFavorite(window.location,'IPCamera') style="background-color: #0066CC; color: #FFFFFF; border-style: ridge; border-color: #FFFFFF;">
</font>
</center>
</form>
</BODY></HTML>
And here's my efforts:
Code:
<html>
<head>
<title>A Company - Foyer camera</title>
<script type="text/javascript" langauge="javascript" src="script.js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body BGCOLOR=#FFFFFF background="bkgd.gif" text="#FFFFFF" link="#CCCC66" vlink="#CCCC66" alink="#66CCFF" leftmargin="10" topmargin="12" marginwidth="10" marginheight="12">
<table class="alt0">
<tr>
<td class="alt1"><a href="index.htm">A Company</a></td>
<td class="alt4"><i>Foyer camera</i></td>
</tr>
<tr><td colspan=2><hr></td></tr>
<tr>
<td colspan=2>
<OBJECT ID=CamImage WIDTH="640" HEIGHT="480" CLASSID=CLSID:AA0FB75C-C50E-47B6-B7E0-3B9C3FAA8AC4 CODEBASE="IPCamControl.cab#Version=1,0,0,0">
<PARAM NAME="URL" VALUE="192.168.0.200/video.cgi">
<PARAM NAME="User" VALUE="">
<PARAM NAME="Password" VALUE="">
</OBJECT>
</td>
</tr>
<tr><td colspan=2><hr></td></tr>
</table>
</body>
</html>
Note that I've copied IPCamControl.cab from the camera to the same folder as my HTML code.
Join CF
You are here: 
