Sunday, October 11, 2009

Homemade Avermedia Quad Viewer

I've been working on more web pages for our user interface (much cheaper than constantly buying hardware!) I thought I'd share some code on a simple quad viewer I coded up. I previously had single camera views on our floorplan GUI so this was really easy to add. Since our floorplan is web based, it will work on all platforms, which is great since the Avermedia software only works on Windows.

The Avermedia software has special URLs where you can view compact images of each camera. With a little JavaScript, you can have them refreshed at periodic intervals. First off, you start off with an HTML shell that defines the cameras - let's call it cam.html:

<html>
<head>
<SCRIPT SRC="cam.js" language="JavaScript"></SCRIPT>
</head>
<body onLoad="refreshCam();">
<img src=images/blank.png id=livecam0 style="position: absolute; left: 263px; top: 15px;">
<img src=images/blank.png id=livecam1 style="position: absolute; left: 620px; top: 15px;">
<img src=images/blank.png id=livecam2 style="position: absolute; left: 263px; top: 255px;">
<img src=images/blank.png id=livecam3 style="position: absolute; left: 620px; top: 255px;">
</body>
</html>

A few key things are the reference to the JavaScript file, cam.js and the call to refreshCam() when the HTML loads. Each img tag defines a camera view for each of the 4 cameras (you would put more if you have an NV5000 with more cameras).

The JavaScript file, cam.js, is below:

var camNum=0;
function refreshCam() {
t=0.2;
if (camNum==0) {
document.getElementById('livecam0').src="http://10.10.10.10:5550/mobile/channel01.jpg";
} else if (camNum==1) {
document.getElementById('livecam1').src="http://10.10.10.10:5550/mobile/channel02.jpg";
} else if (camNum==2) {
document.getElementById('livecam2').src="http://10.10.10.10:5550/mobile/channel03.jpg";
} else {
document.getElementById('livecam3').src="http://10.10.10.10:5550/mobile/channel04.jpg";
}
camNum=(camNum+1)%4;
refreshCamId=setTimeout("refreshCam()", t*1000);
}

Every time refreshCam is run, one of the camera views is refreshed depending on the camNum variable. The URL given is the special Avermedia URL - and each image in the HTML is associated with a camera's URL. Every iteration, camNum is incremented and the sum has a modulo 4 operation done on it - resulting in a value that changes from 0 to 3. The setTimeout function causes refreshCam() to be run every 0.2*1000 milliseconds. That's pretty much it. You can use any camera server you want - just substitute the URLs in the JavaScript.

No comments:

Post a Comment