-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
142 lines (123 loc) · 4.87 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
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Face tracker</title>
<meta charset="utf-8">
<link href="./styles/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="./styles/clm_video.css" rel="stylesheet" type="text/css">
<!-- js for best match chart -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!-- db code -->
<script src="https://cdn.firebase.com/js/client/2.0.6/firebase.js"></script>
<script src="js/db.js"></script>
</head>
<body>
<script src="./js/utils.js"></script>
<script src="./js/numeric-1.2.6.min.js"></script>
<script src="./js/mosse.js"></script>
<script src="./js/jsfeat-min.js"></script>
<script src="./js/frontalface.js"></script>
<script src="./js/jsfeat_detect.js"></script>
<script src="./js/left_eye_filter.js"></script>
<script src="./js/right_eye_filter.js"></script>
<script src="./js/nose_filter.js"></script>
<script src="./models/model_pca_20_svm.js"></script>
<script src="./js/clm.js"></script>
<script src="./js/svmfilter_webgl.js"></script>
<script src="./js/svmfilter_fft.js"></script>
<script src="./js/mossefilter.js"></script>
<script src="./js/Stats.js"></script>
<div id="content">
<div id="left">
<h1>Lipreading</h1>
<div id="container">
<video id="videoel" width="400" height="300" preload="auto" loop>
</video>
<canvas id="overlay" width="400" height="300"></canvas>
</div>
<!-- start/calibration buttons -->
<input class="btn" type="button" value="wait, loading video" disabled="disabled" onclick="setThreshold()" id="startbutton">
<input class="btn" type="button" value="calibrate?" disabled="disabled" onclick="toggleCalibrationMode()" id="calibrationbutton">
<!-- best match chart -->
<div id="loading" style="display:none">
<img src="media/load.gif" alt="loading" style="width:20px; height:20px; float:left; margin:0 5px 0 0;" />
<p><b>Finding best word...</b></p>
</div>
<div id="chart" style="display:none; width:400px; height:300px;"></div>
<!-- instructions -->
<div id="text">
<p>This is an example of visual speech recognition specific to a user-trained dictionary. We compare mouth shapes using the k-nearest neighbors algorithm. Deformable face alignment using constrained local models is adapted from the javascript library <a href="https://github.com/auduno/clmtrackr"><b>clmtrackr</b></a>.</p>
<p>Note: this example works best in Google Chrome, with a computer that supports WebGL and floating point textures. It should however work in any modern browser.</p>
<div id="gum" class="gum">
<p>To try it out:</p>
<ol>
<li>allow the page to use your webcamera</li>
<li>make sure that the model is fitted to your closed lips. click 'my mouth is closed'</li>
<li>say a word, and accept popup 'Test with this query?'</li>
</ol>
</div> <!-- end "gum" -->
<div id="nogum" class="nogum">
<p>There was some problem trying to capture your webcamera, please use a recent version of Chrome or Firefox. Using a fallback video instead. To try it out:</p>
<ol>
<li>click start</li>
<li>see the model fitted to the face</li>
</ol>
</div> <!-- end "nogum" -->
</div> <!-- end of "text" -->
</div> <!-- end left -->
<div id="right">
<!-- dictionary: list of available words -->
<h2>click to view the
<a href="dictionary.html" target="_blank">Dictionary</a>
</h2>
<h2>Timers</h2>
<p>spokenTimer:
<span id="spokenTimer"></span>
</p>
<p>closedTimer:
<span id="closedTimer"></span>
</p>
<p> messages:
<span id="message"></span>
</p>
<h2>Best matched word</h2>
<p id="bestMatch"></p>
<h2>Paths</h2>
<p id="paths"></p>
<h2> Mouth Distance </h2>
<p id="mouthDist"></p>
<h2>Tracked Lip Points</h2>
<p id="positions"></p>
</div> <!-- end of "right" -->
</div> <!-- end of "content" -->
<script src="./js/draw-lips.js"></script>
<script src="./js/clm_video.js"></script>
<script src="./js/matching.js"></script>
<script src="./js/toggleCalibrationMode.js"></script>
<script>
document.title="Lip Reading";
</script>
<script>
var calibrationButton = document.getElementById('calibrationbutton');
if(window.location.hash === "#calibrate") {
console.log('showing calibrate button');
} else {
calibrationButton.style.visibility = "hidden";
calibrationButton.disabled = true;
calibrationButton.hidden = true;
}
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-58452403-1', {
'cookieDomain': 'none'
});
ga('send', 'pageview');
</script>
</body>
</html>