Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
File Manager
/
Four
/
js-motion-detection-master
:
app.html
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
<!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>