Saturday, October 30, 2010

Ho to get the Genius IpCam Secure300R working with any browser

A few days ago I bought the Genius IpCam Secure300R ip camera (do not confuse with Secure300 – it’s two different products). It was about twice chipper than other cams with the same features (I need camera with night view), but it turns out that it is very user unfriendly. The worst thing is that the camera’s web interface works only in IE under the Windows XP SP2 (not higher).

Fortunately, I found the way to get it working with any browser. The camera publishes an image in JPEG format at the special link (http://<camera-IP>/cgi-bin/getimage?java=2). So I wrote an html page (with JavaScript) that shows that image and refreshes it as frequently as it can.

I’ve tested it in FireFox 3.6.8, IE 8.0.7600.16385, Google Chrome 7.0.517.41, Opera 10.63. Unfortunately it doesn’t works in IE 7.0 under Windows XP (because it is unable to show the image from the address mentioned above – may be because of incorrect format of an image – I’ve seen somewhere the image doesn’t fully conforms to JPEG specification).

Here is a code of “custom web-interface” to Genius IpCam Secure300R. Save it to html file, replace baseUrl value by the address (and optionally port) of your camera (for example, http://192.168.1.58 or http://192.168.1.58:80) and enjoy!

<HTML>

<BODY onload="LoadLoginFrame()">

<P>
<img src="" id="webcam" />
</P>

<!-- workaround for IE 8 bug with onload event of a dymanically generated iframe -->
<span id="iframe_wrap"></span>

<script type="text/javascript">
<!--
// !!! REPLACE by your camera ip adress
var baseUrl = "http://your.camera.ip.address:port"

function LoadLoginFrame()
{

document.getElementById("iframe_wrap").innerHTML =
"<iframe id='loginFrame'" +
" src='" + baseUrl + "'" +
" style='display:none'" +
" onload='CredentialsEntered()'" +
"></iframe>";
}

function CredentialsEntered()
{
document.getElementById("iframe_wrap").innerHTML = "";

document.images.webcam.onload = LoadImage;
LoadImage();
document.images.webcam.onerror = OnImageError;

LoadIRFrame();
}

var i = 2;
function LoadImage()
{
document.images.webcam.src = baseUrl + "/cgi-bin/getimage?java=" + (i++);
}

function LoadIRFrame()
{
var frame = document.createElement("iframe");
frame.id = 'ir_frame';
frame.src = baseUrl + "/webcam_logoIROff.htm";
frame.setAttribute('width', 1047);
frame.setAttribute('scrolling', "no");
document.body.insertBefore(frame, document.body.firstChild);
}

function OnImageError()
{
document.images.webcam.style.display = "none";
alert("Couldn't get a picture!");
}
//-->
</script>

</BODY>
</HTML>