forked from ReallyGood/js-motion-detection
-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.html
90 lines (73 loc) · 4.08 KB
/
app.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!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 class="slider" id="slider">
<div class="holder">
<div class="slide" id="slide-0"><span class="temp">0</span></div>
<div class="slide" id="slide-1"><span class="temp">1</span></div>
<div class="slide" id="slide-2"><span class="temp">2</span></div>
<div class="slide" id="slide-3"><span class="temp">3</span></div>
<div class="slide" id="slide-4"><span class="temp">4</span></div>
<div class="slide" id="slide-5"><span class="temp">5</span></div>
<div class="slide" id="slide-6"><span class="temp">6</span></div>
<div class="slide" id="slide-7"><span class="temp">7</span></div>
<div class="slide" id="slide-8"><span class="temp">8</span></div>
<div class="slide" id="slide-9"><span class="temp">9</span></div>
</div>
</div>
<div id="zero"></div>
<div id="one"></div>
<div id="two"></div>
</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>