File "app.html"

Full Path: /home/analogde/www/Four/js-motion-detection-master/app.html
File size: 3.4 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>JavaScript Motion Detection</title>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="styles/main.css"/>
    <link id="favicon" rel="icon" type="image/ico" sizes="16x16" href="images/favicon.ico">
    <link id="favicon2x" rel="icon" type="image/png" sizes="32x32" href="images/icon.png">
</head>
<body>

<div id="container">

    <div id="header">
        <div class="allow">Click "Allow" above to control stuff just by waving your hands.</div>
        <div class="instructions">Wave your hands, it's fun.</div>
        <div class="browsersWithVideo">This demo lets you control stuff using motion detection in your browser. Install
            <a href="https://www.google.com/landing/chrome/beta/" target="_blank">Chrome Beta</a> to play.
        </div>
    </div>

    <div id="content">

        <video id="webcam" autoplay width="640" height="480"></video>

        <video id="video-demo" controls="controls" poster="videos/jsdetection.jpg" width="640" height="480"
               onclick="if(/Android/.test(navigator.userAgent))this.play();">
            <source src="videos/jsdetection.mp4" type="video/mp4"/>
            <source src="videos/jsdetection.ogg" type="video/ogg"/>
            <source src="videos/jsdetection.webm" type="video/webm"/>
            Your browser doesn't support the HTML5 video tag.
        </video>

        <canvas id="canvas-source" width="640" height="480"></canvas>
        <canvas id="canvas-highlights" width="640" height="480"></canvas>
        <canvas id="canvas-blended" width="640" height="480"></canvas>

        <div id="hotSpots">
            <div id="one"></div>
            <div id="another"></div>
            <a href="http://google.com" class="link" style="right: 6%; bottom: 7%;">Google</a>
            <a href="http://youtube.com" class="link" style="right: 6%; top: 5%; width: 14%"><img
                    src="http://s.ytimg.com/yt/img/logos/youtube_logo_standard_againstwhite-vflKoO81_.png" width="100%"></a>
        </div>
    </div>

    <div class="loading">Loading assets...</div>

    <div class="backFromVideo"><a href="#">Back<a/></div>

    <div class="introduction">
        <p>This demo lets you control stuff using motion detection in your browser.</p>

        <p>Please allow access to your camera and microphone above.</p>
    </div>

    <div class="browsers">
        <p>This demo lets you control stuff using motion detection in your browser.</p>

        <p>Install <a href="https://www.google.com/landing/chrome/beta/" target="_blank">Chrome Beta</a> to play, or <a
                href="#" id="watchVideo">watch this video</a> to check it out first.</p>
    </div>

    <div id="footer">
        <div class="magic">Based on <a href="http://www.soundstep.com/blog/2012/03/22/javascript-motion-detection/"
                                       target="_blank">Magic Xylophone</a> by <a href="http://www.stinkdigital.com/"
                                                                                 target="_blank">Stink Digital</a>. Fork
            this <a href="https://github.com/RonnyO/js-motion-detection" target="_blank">on github</a></div>
    </div>

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/app.js"></script>
<script src="js/sample.js"></script>

</body>
</html>