-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·53 lines (45 loc) · 2.15 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Javascript motion detection</title>
<link rel="stylesheet" href="styles/main.css"/>
</head>
<body>
<div id="description"></div>
<div id="message">Loading assets...</div>
<div id="info" style="display:none">
<p>You are watching a video demo, follow the instructions below to enable your webcam.</p>
<p>Please view this page using <a href="http://tools.google.com/dlpage/chromesxs" target="_blank">Google Chrome Canary</a> and enable the "Media Stream" flag in about:flags.</p>
<img src="images/mediastream.png"/>
</div>
<!--<device type="media"></device>-->
<video id="webcam" autoplay width="630" 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.ogv" type="video/ogg" />
<source src="videos/jsdetection.webm" type="video/webm" />
Your browser doesn't support the html 5 video tag.
</video>
<canvas id="canvas-source" width="630" height="480"></canvas>
<canvas id="canvas-blended" width="630" height="480"></canvas>
<div id="grid">
<div id="back"><img id="xyloback" src="images/xylo.png" style="opacity:0.7;" /></div>
<div id="front">
<img id="note0" src="images/pad1.png"/>
<img id="note1" src="images/pad2.png" style="margin-left:136px;"/>
<img id="note2" src="images/pad1.png" style="margin-left:270px;"/>
<img id="note3" src="images/pad2.png" style="margin-left:-237px;margin-top:167px;"/>
<img id="note4" src="images/pad3.png" style="margin-left:-102px;margin-top:170px;"/>
<img id="note5" src="images/pad2.png" style="margin-left:33px;margin-top:171px;"/>
<img id="note6" src="images/pad1.png" style="margin-left:-470px;margin-top:333px;"/>
<img id="note7" src="images/pad2.png" style="margin-left:-330px;margin-top:333px;"/>
<img id="note8" src="images/pad1.png" style="margin-left:422px;margin-top:333px;"/>
</div>
</div>
<script src="js/libs/jquery.js"></script>
<script src="js/jquery.Gest.js"></script>
<script type="text/javascript">
jQuery('#webcam').Gest();
</script>
</body>
</html>