Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

DIY Home Security Part 5 – View Cams in Windows Media Center

I mentioned viewing my cameras in Smartvue for iPxxx devices in a previous post. I actually posted some details on how to do this and determine the right syntax for your particular camera some time ago. This includes a link to the iCam web app that interactively helps you determine the syntax. Thought it was worth mentioning in this series on DIY Home Security. I also wrote about viewing my cameras from inside WMC.

The components I used for displaying the output of my cameras in the Windows Media Center interface are:

  1. an MCL file
  2. a PNG file for the Extras Tile
  3. an HTML file
  4. a background image file for the HTML file (I used a PNG file)

I’ve updated the MCL file and the PNG for the camera and authored an HTML file that I’ve copied to C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Accessories\Media Center\Media Center Programs. For the background color, I added a PNG file that I created. Now I can see the output of my four cameras on a single screen inside the Windows Media Center interface. You’ll find sample source code at the end of this post.

My Cameras on the main level Extras Menu is shown in the following screen shot:

wmc.cam1

And the view inside Windows Media Center is shown below:

 

wmc.cam2

Here is sample code for the HTML file that is placed inside the folder:

 

<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:"Segoe UI Semibold";
    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;
}
.auto-style1 {
    font-family: "Segoe UI Semibold";
}
</style>
</head>

<body style="color: #99CCFF; height: 826px; background-image: url(‘wmcbackgrnd.png’);">

<p class="style3">&nbsp;</p>

<table style="width: 800px">
    <tr>
        <td>
        <h2 class="auto-style1">Loft Cam</h2>
        </td>
        <td>
        <h2 class="auto-style1">Living Room Cam</h2>
        </td>
    </tr>
    <tr>
        <td>
        <img alt=""  src="http://yourhostname.dyndns.xxx:1234/image.jpg" width="360"></td>
        <td>
        <img alt=""  src="http://yourhostname.dyndns.xxx:5678/image/jpeg.cgi?size=3" width="360"></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>
        <h2 class="auto-style1">Hall Cam</h2>
        </td>
        <td>
        <h2 class="auto-style1">Dining Room Cam</h2>
        </td>
    </tr>
    <tr>
        <td>
        <img alt=""  src="http://yourhostname.dyndns.xxx:4321/image.jpg" width="360"></td>
        <td>
        <img alt=""  src="http://yourhostname.dyndns.xxx:8765/image/jpeg.cgi?size=3" width="360"></td>    </tr>
</table>

And here is sample code used for thee *.mcl file

 

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