Connecting Multiple IP Cameras to Windows Media Center

After publishing a piece on how to connect an Internet enabled camera to WMC, iPhones and iPads yesterday, I received a couple of emails basically saying, “great, but I want to monitor more than one camera in a master view like stand alone IP surveillance software”.

I thought about this for a bit and then tested to see if an HTML page could be hosted locally, placed in the C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Accessories\Media Center\Media Center Programs folder with the appropriate MCL and PNG file. The answer was yes, and this now opens the door to more customizations.

Further, I thought that the still images needed to be refreshed. Not much value in watching an image on the screen that just sits there. I fired up Microsoft Expression Web and created a page and added in a META REFRESH tag to reload every xx seconds (I used 30 seconds as the interval). While tables should not be used for layout on a page designed to be viewed in a real web browser (a deprecated means of coding), a nested table structure proved perfect for display inside Windows Media Center. I specified the Segoe UI font and ended up with something that looked pretty decent and worked.  Here is the view inside Windows Media Center:

 

mycameras

Here is the HTML code. You will need to replace the hostname, port, image path as I documented in the post linked above. The mycameras.html file I created contains the following:

<head>
<meta content="en-us" http-equiv="Content-Language">
<meta http-equiv="refresh" content="30">

<style type="text/css">
a {
    color: #DDEEFF;
}
a:visited {
    color: #DDEEFF;
}
a:active {
    color: #DDEEFF;
}
a:hover {
    color: #FFFFFF;
}
.style3 {
    font-family: Arial;
    font-size: x-large;
    font-weight: bold;
}
.style4 {
    font-family: "Segoe UI Semibold";
    font-size: x-large;
    border-width: 0;
    text-align: center;
}
.style5 {
    border: 10px solid #FFFFFF;
}
.style6 {
    font-family: "Segoe UI Semibold";
    font-size: x-large;
    text-align: center;
}
</style>
</head>

<body style="color: #99CCFF; ">

<p class="style3">&nbsp;</p>
<table>
    <tr>
        <td>
<table>
    <tr>
        <td class="style4">Parking Lot Cam</td>
    </tr>
    <tr>
        <td class="style5">
        <img alt="" height="480" src="http://hostname.dyndns.org:XYZ/IMAGE.jpg&quot; width="640"></td>
    </tr>
</table>
        </td>
        <td>
<table>
    <tr>
        <td class="style6">Home Office Cam</td>
    </tr>
    <tr>
        <td class="style5">
        <img alt="" height="480" src="http://hostname.dyndns.org:XYZ/cgi-bin/video.jpg?size=3&quot; width="704"></td>
    </tr>
</table>

&nbsp;</td>
    </tr>
</table>
<p class="style3">&nbsp;</p>

The MCL file (mycameras.mcl) is as follows:

<application url="mycameras.html"
name="My Cameras"
bgcolor="RGB(255,255,255)"
startimage=".\mycameras.png"
thumbnailImage=".\mycameras.png"
sharedviewport="false">
</application>

After removing the files I created and used yesterday, I placed the html file, the MCL file, and the new PNG file in the C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Accessories\Media Center\Media Center Programs folder. Next I launched Windows Media Center,and  opened Extras.

 

mycameras.extra

I finished by adding my new My Cameras extra as a top level Extras menu item.

 

mycameras.main

Now, if I add more cameras, I can just edit the existing HTML. I’m sure I’ll have to change (reduce) the size of the displayed image to get more on a single page, but I now have a personal IP Camera viewport inside Windows Media Center. (And naturally, I’ve added the second camera to my iPhone and iPad Smartvue configuration).

Advertisements
This entry was posted in Uncategorized and tagged , , , , . Bookmark the permalink.