Viewing ZoneMinder CCTV within Windows Media Center

16 Mar

I run ZoneMinder as my CCTV server, which works really well. It sits on a Ubuntu PC and quite happily monitors everything that’s going on, I’ll do a full write up on ZoneMinder some othertime.

I can connect into the web interface and view all the cameras live, I can also view any events, and even Pan and tilt the cameras from with in the web interface. This is all great when im sitting at my PC, but not if I’m watching TV and I want to see what’s going on. There were a few options to achieve this. I’m currently running Harmony 2007 Automation software and that has a CCTV server option. In my opinion its not as advanced as ZoneMinder, but it does link in very nicely with Media Center. However, its £50, on top of your Harmony 2007 Home (£20)/Pro (£35) licence. (It’s free with Harmony 2007 installer, but that’s £120).

In the end I figured out a way to add an extra menu option the main Media Center interface. I then wrote a HTML page that would talk to the ZoneMinder PC and display 4 cameras in a 2 by 2 grid.
You need to create these 3 files:

ZoneMinder.htm

(Not the best html code in the world, I just needed something to work quickly. You just need view the streams for your various cameras from the ZoneMinder PC. I’ve put the bits that you need to change in bold. Just view your existing montage page source html and you’ll get the idea.)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta name=”generator” content=”HTML Tidy, see www.w3.org” />
<title>ZM – Montage</title>
<link rel=”icon” type=”image/ico” href=”graphics/favicon.ico” />
<link rel=”shortcut icon” href=”graphics/favicon.ico” />
<link rel=”stylesheet” href=”css/reset.css” type=”text/css” />
<link rel=”stylesheet” href=”skins/classic/css/skin.css” type=
“text/css” media=”screen” />
<link rel=”stylesheet” href=”skins/classic/views/css/montage.css”
type=”text/css” media=”screen” />
<script type=”text/javascript” src=
“tools/mootools/mootools-1.2.1-core-nc.js”>
</script>

<script type=”text/javascript” src=
“tools/mootools/mootools-1.2-more-nc.js”>
</script>

<script type=”text/javascript” src=”js/mootools.ext.js”>
</script>

<script type=”text/javascript”>
  var AJAX_TIMEOUT = 10000;

  var currentView = ‘montage’;
  var thisUrl = “http://10.1.1.40/zm/index.php”;
  var skinPath = “skins/classic”;

  var canEditSystem = true;
  var canViewSystem = true;

  var refreshParent = false;

  var focusWindow = true;
 
</script>

<script type=”text/javascript”>
//
// Import constants
//
var STATE_IDLE = 0;
var STATE_PREALARM = 1;
var STATE_ALARM = 2;
var STATE_ALERT = 3;
var STATE_TAPE = 4;

var stateStrings = new Array();
stateStrings[STATE_IDLE] = “Idle”;
stateStrings[STATE_PREALARM] = “Idle”;
stateStrings[STATE_ALARM] = “Alarm”;
stateStrings[STATE_ALERT] = “Alert”;
stateStrings[STATE_TAPE] = “Record”;

var CMD_QUERY = 99;

var SCALE_BASE = 100;

var COMPACT_MONTAGE = 1;
var SOUND_ON_ALARM = 0;
var POPUP_ON_ALARM = 0;

var statusRefreshTimeout = 10000;

var canStreamNative = true;

var monitorData = new Array();
monitorData[monitorData.length] = { ‘id’: 1, ‘connKey’: 186509, ‘width’: 320,’height’:240 };
monitorData[monitorData.length] = { ‘id’: 2, ‘connKey’: 913385, ‘width’: 320,’height’:240 };
monitorData[monitorData.length] = { ‘id’: 3, ‘connKey’: 368837, ‘width’: 320,’height’:240 };
monitorData[monitorData.length] = { ‘id’: 4, ‘connKey’: 812309, ‘width’: 320,’height’:240 };
monitorData[monitorData.length] = { ‘id’: 5, ‘connKey’: 611947, ‘width’: 320,’height’:240 };
 
</script>

<script type=”text/javascript” src=”skins/classic/js/skin.js”>
</script>

<script type=”text/javascript” src=
“skins/classic/views/js/montage.js”>
</script>
</head>
<body bgcolor=”#000000″ scroll=”no” marginheight=”0″ topmargin=”0″
vspace=”0″ marginwidth=”0″ leftmargin=”0″ hspace=”0″ style=
“margin:0; padding:0”>
<div id=”page”>
<div id=”content”>
<div id=”monitors”>
<center><font size=”6″ color=”#ffffff”>My CCTV<br />
</font>
<table border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td>
<div id=”monitorFrame0″ class=”monitorFrame”>
<div id=”monitor0″ class=”monitor idle”>
<div id=”imageFeed0″ class=”imageFeed” onclick=
“createPopup( ‘?view=watch&amp;mid=1’, ‘zmWatch1’, ‘watch’, 320, 240 );”>
<object id=”liveStream1″ width=”320″ height=”240″ classid=
“CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95” codebase=
“http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902”
 standby=”Loading Microsoft Windows Media Player components…”
type=”video/x-ms-asf”><param name=”FileName” value=
“http://x.x.x.x/cgi-bin/nph-zms?mode=mpeg&amp;monitor=1&amp;scale=100&amp;bitrate=25000&amp;maxfps=5&amp;format=asf&amp;connkey=186509&amp;rand=1263041197” />
<param name=”autoStart” value=”1″ />
<param name=”showControls” value=”0″ />
<embed type=”video/x-ms-asf” pluginspage=
“http://www.microsoft.com/Windows/MediaPlayer/” src=
“http://x.x.x.x/cgi-bin/nph-zms?mode=mpeg&amp;monitor=1&amp;scale=100&amp;bitrate=25000&amp;maxfps=5&amp;format=asf&amp;connkey=186509&amp;rand=1263041197”
 name=”” width=”320″ height=”240″ autostart=”1″ showcontrols=”0″
/>
</object></div>
</div>
</div>
</td>
<td>
<div id=”monitorFrame1″ class=”monitorFrame”>
<div id=”monitor1″ class=”monitor idle”>
<div id=”imageFeed1″ class=”imageFeed” onclick=
“createPopup( ‘?view=watch&amp;mid=2’, ‘zmWatch2’, ‘watch’, 320, 240 );”>
<object id=”liveStream2″ width=”320″ height=”240″ classid=
“CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95” codebase=
“http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902”
 standby=”Loading Microsoft Windows Media Player components…”
type=”video/x-ms-asf”><param name=”FileName” value=
“http://x.x.x.x/cgi-bin/nph-zms?mode=mpeg&amp;monitor=2&amp;scale=100&amp;bitrate=25000&amp;maxfps=5&amp;format=asf&amp;connkey=913385&amp;rand=1263041197” />
<param name=”autoStart” value=”1″ />
<param name=”showControls” value=”0″ />
<embed type=”video/x-ms-asf” pluginspage=
“http://www.microsoft.com/Windows/MediaPlayer/” src=
“http://x.x.x.x/cgi-bin/nph-zms?mode=mpeg&amp;monitor=2&amp;scale=100&amp;bitrate=25000&amp;maxfps=5&amp;format=asf&amp;connkey=913385&amp;rand=1263041197”
 name=”” width=”320″ height=”240″ autostart=”1″ showcontrols=”0″
/>
</object></div>
</div>
</div>
</td>
</tr>

<tr>
<td>
<div id=”monitorFrame2″ class=”monitorFrame”>
<div id=”monitor2″ class=”monitor idle”>
<div id=”imageFeed2″ class=”imageFeed” onclick=
“createPopup( ‘?view=watch&amp;mid=3’, ‘zmWatch3’, ‘watch’, 320, 240 );”>
<object id=”liveStream3″ width=”320″ height=”240″ classid=
“CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95” codebase=
“http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902”
 standby=”Loading Microsoft Windows Media Player components…”
type=”video/x-ms-asf”><param name=”FileName” value=
“http://x.x.x.x/cgi-bin/nph-zms?mode=mpeg&amp;monitor=3&amp;scale=100&amp;bitrate=25000&amp;maxfps=5&amp;format=asf&amp;connkey=368837&amp;rand=1263041197” />
<param name=”autoStart” value=”1″ />
<param name=”showControls” value=”0″ />
<embed type=”video/x-ms-asf” pluginspage=
“http://www.microsoft.com/Windows/MediaPlayer/” src=
“http://x.x.x.x/cgi-bin/nph-zms?mode=mpeg&amp;monitor=3&amp;scale=100&amp;bitrate=25000&amp;maxfps=5&amp;format=asf&amp;connkey=368837&amp;rand=1263041197”
 name=”” width=”320″ height=”240″ autostart=”1″ showcontrols=”0″
/>
</object></div>
</div>
</div>
</td>
<td>
<div id=”monitorFrame3″ class=”monitorFrame”>
<div id=”monitor3″ class=”monitor idle”>
<div id=”imageFeed3″ class=”imageFeed” onclick=
“createPopup( ‘?view=watch&amp;mid=4’, ‘zmWatch4’, ‘watch’, 320, 240 );”>
<object id=”liveStream4″ width=”320″ height=”240″ classid=
“CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95” codebase=
“http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902”
 standby=”Loading Microsoft Windows Media Player components…”
type=”video/x-ms-asf”><param name=”FileName” value=
“http://x.x.x.x/cgi-bin/nph-zms?mode=mpeg&amp;monitor=4&amp;scale=100&amp;bitrate=25000&amp;maxfps=5&amp;format=asf&amp;connkey=812309&amp;rand=1263041197” />
<param name=”autoStart” value=”1″ />
<param name=”showControls” value=”0″ />
<embed type=”video/x-ms-asf” pluginspage=
“http://www.microsoft.com/Windows/MediaPlayer/” src=
“http://x.x.x.x/cgi-bin/nph-zms?mode=mpeg&amp;monitor=4&amp;scale=100&amp;bitrate=25000&amp;maxfps=5&amp;format=asf&amp;connkey=812309&amp;rand=1263041197”
 name=”” width=”320″ height=”240″ autostart=”1″ showcontrols=”0″
/>
</object></div>
</div>
</div>
</td>
</tr>
</table>
</center>
</div>
</div>
</div>
</body>
</html>

ZoneMinder.jpg

ZoneMinder.mcl

<application url=”C:\Documents and Settings\All Users\Start Menu\Programs\Accessories\Media Center\Media Center Programs\ZoneMinder.htm”
name=”CCTV Montage”
bgcolor=”RGB(0,0,0)”
startimage=”zoneminder.jpg”
thumbnailImage=”zoneminder.jpg”
sharedviewport=”false”>
</application>

Then save all 3 of these files here to “C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Accessories\Media Center\Media Center Programs” and you’re away.

Open up Media Centre (either on the PC it self, of any of your extenders, and then navigate to Online Media and then Programme Library you should see the ZoneMinder icon appear. Click on it and it will display the CCTV grid.