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:
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″> </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.com:XYZ/IMAGE.jpg” 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.com:XYZ/cgi-bin/video.jpg?size=3″ width=”704″></td> </tr> </table> </td> </tr> </table> <p class=”style3″> </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:ProgramDataMicrosoftWindowsStart MenuProgramsAccessoriesMedia CenterMedia Center Programs folder. Next I launched Windows Media Center,and opened Extras.
I finished by adding my new My Cameras extra as a top level Extras menu item.
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).