{"id":442,"date":"2012-02-12T11:21:36","date_gmt":"2012-02-12T16:21:36","guid":{"rendered":"https:\/\/digitalmediaphile.com\/?p=442"},"modified":"2012-02-12T11:32:42","modified_gmt":"2012-02-12T16:32:42","slug":"diy-home-security-part-5-view-cams-in-windows-media-center","status":"publish","type":"post","link":"https:\/\/digitalmediaphile.com\/index.php\/2012\/02\/12\/diy-home-security-part-5-view-cams-in-windows-media-center\/","title":{"rendered":"DIY Home Security Part 5 – View Cams in Windows Media Center"},"content":{"rendered":"

I mentioned viewing my cameras in Smartvue for iPxxx devices in a previous post. I actually posted some details<\/a> 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<\/a> 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. <\/p>\n

The components I used for displaying the output of my cameras in the Windows Media Center interface are:<\/p>\n

    \n
  1. an MCL file <\/li>\n
  2. a PNG file for the Extras Tile <\/li>\n
  3. an HTML file <\/li>\n
  4. a background image file for the HTML file (I used a PNG file) <\/li>\n<\/ol>\n

    I\u2019ve updated the MCL file and the PNG for the camera and authored an HTML file that I\u2019ve copied to C:\\ProgramData\\Microsoft\\Windows\\Start Menu\\Programs\\Accessories\\Media Center\\Media Center Programs<\/font>. 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\u2019ll find sample source code at the end of this post.<\/p>\n

    My Cameras on the main level Extras Menu is shown in the following screen shot:<\/p>\n

    \"wmc.cam1\"<\/p>\n

    <\/p>\n

    And the view inside Windows Media Center is shown below:<\/p>\n

     <\/p>\n

    \"wmc.cam2\"<\/p>\n

    Here is sample code for the HTML file that is placed inside the folder:<\/p>\n

    \n

     <\/p>\n

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

    <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><\/p>\n

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

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

    <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"<\/a> width="360"><\/td>
            <td>
            <img alt=""  src="    http:\/\/yourhostname.dyndns.xxx:5678\/image\/jpeg.cgi?size=3"<\/a> 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"<\/a> width="360"><\/td>
            <td>
            <img alt=""  src="    http:\/\/yourhostname.dyndns.xxx:8765\/image\/jpeg.cgi?size=3"<\/a> width="360"><\/td>    <\/tr>
    <\/table><\/p>\n<\/blockquote>\n

    And here is sample code used for thee *.mcl file<\/p>\n

     <\/p>\n

    \n

    <application url="mycameras.html"
    name="My Cameras"
    bgcolor="RGB(255,255,255)"
    startimage=".\\surveillance.png"
    thumbnailImage=".\\surveillance.png"
    sharedviewport="false">
    <\/application><\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"

    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 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[47,89,19,25,44],"tags":[308],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"jetpack_publicize_connections":[],"featured_image_urls":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":""},"post_excerpt_stackable":"

    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: an MCL file a PNG file for the…<\/p>\n","category_list":"Connected Home<\/a>, Home Security<\/a>, Media Center<\/a>, Networking<\/a>, Windows Media Center<\/a>","author_info":{"name":"barbbowman","url":"https:\/\/digitalmediaphile.com\/index.php\/author\/barbbowman\/"},"comments_num":"0 comments","jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pvFKI-78","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/digitalmediaphile.com\/index.php\/wp-json\/wp\/v2\/posts\/442"}],"collection":[{"href":"https:\/\/digitalmediaphile.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/digitalmediaphile.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/digitalmediaphile.com\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalmediaphile.com\/index.php\/wp-json\/wp\/v2\/comments?post=442"}],"version-history":[{"count":0,"href":"https:\/\/digitalmediaphile.com\/index.php\/wp-json\/wp\/v2\/posts\/442\/revisions"}],"wp:attachment":[{"href":"https:\/\/digitalmediaphile.com\/index.php\/wp-json\/wp\/v2\/media?parent=442"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digitalmediaphile.com\/index.php\/wp-json\/wp\/v2\/categories?post=442"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digitalmediaphile.com\/index.php\/wp-json\/wp\/v2\/tags?post=442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}