-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathindex.html
357 lines (322 loc) · 20.9 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<!--<link rel="icon" href="../../favicon.ico">-->
<title>SearchGazer: Webcam Eye Tracking for Remote Studies of Web Search</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/highlight/styles/default.css">
<script src="css/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<style type="text/css">
body {
position: relative;
min-height: 2000px;
padding-top: 50px;
}
.padright {
padding-top: 0px;
margin-bottom: 22px;
}
.pad {
padding-top: 10px;
margin-bottom: 20px;
}
.jumbotron p {
font-size: 16px;
}
p > code.hljs { display: inline; }
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target="#navbar">
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">SearchGazer</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav nav-tabs" role="tablist">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#usage">Usage</a></li>
<li><a href="#support">Browser Support</a></li>
<li><a href="#engine">Search Engine Support</a></li>
<li><a href="#download">Download</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="#publication">Publication</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse
-->
</div>
</nav>
<div id="home" class="container pad" style="padding-top: 0px">
<a href="https://github.com/brownhci/searchgazer"><img style="position: absolute; top: 30; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a> <!-- Main
component for a primary marketing message or call
to action -->
<div class="jumbotron">
<h1 class="text-center" style="margin-bottom:20px"> SearchGazer </h1>
<h2 class="text-center" style="margin-bottom:0px"> Webcam Eye Tracking for Remote Studies of Web Search</h2>
</div>
<hr class="featurette-divider">
<div id="description" class="container pad">
<p class="text-justify">
SearchGazer is an eye tracking library that uses common webcams to infer the eye-gaze locations of visitors on a search engine in real time. In addition, SearchGazer predicts in real-time which area of interest within a search engine result page is being examined by a visitor at any moment. SearchGazer extends <a href="webgazer.cs.brown.edu">WebGazer</a> and its eye tracking model that self-calibrates by watching web visitors interact with the web page and trains a mapping between the features of the eye and positions on the screen. SearchGazer is written entirely in JavaScript and with only a few lines of code can be integrated in any search engine that wishes to conduct remote eye tracking studies. SearchGazer runs entirely in the client browser, therefore no video data needs to be sent to a server. SearchGazer runs only if the user consents in giving access to their webcam.
</p>
</div>
<hr class="featurette-divider">
<div id="usage" class="container pad">
<h2 class="text-center">Usage</h2>
<div class="row">
<div class="col-lg-12">
For SearchGazer to perform eye tracking you need to add the searchgazer.js file as a script in your search engine:
<pre><code class="html hljs"> /* WebGazer.js library */
<script src="searchgazer.js" type="text/javascript" ></code></pre>
<p>
<i>Be aware that when you do local development and you might need to run locally a simple http server that supports the https protocol. </i>
</p>
<p>
Once the script is included, the <code class="javascript">webgazer</code> object is introduced into the global namespace. <code class="javascript">webgazer</code> has methods for controlling the operation of WebGazer.js allowing us to start and stop it, add callbacks, or change out modules. The two most important methods on <code class="javascript">webgazer</code> are <code class="javascript">webgazer.begin()</code> and <code class="javascript">webgazer.setGazeListener()</code>. <code class="javascript">webgazer.begin()</code> starts the data collection that enables the predictions, so it's important to call this early on. Once <code class="javascript">webgazer.begin()</code> has been called, WebGazer.js is ready to start giving predictions. <code class="javascript">webgazer.setGazeListener()</code> is a convenient way to access these predictions. This method invokes a callback you provide every few milliseconds to provide the current gaze location of a user. If you don't need constant access to this data stream, you may alternatively call <code class="javascript">webgazer.getCurrentPrediction()</code> which will give you a prediction at the moment when it is called.
</p>
<pre><code class="javascript hljs">
webgazer.setGazeListener(function(data, elapsedTime) {
if (data == null) {
return;
}
var xprediction = data.x; //these x coordinates are relative to the viewport
var yprediction = data.y; //these y coordinates are relative to the viewport
console.log(elapsedTime); //elapsed time is based on time since begin was called
}).begin();
</code></pre>
<p> Here is the alternate method of getting predictions where you can request a gaze prediction as needed. </p>
<pre><code class="javascript hljs">
var prediction = webgazer.getCurrentPrediction();
if (prediction) {
var x = prediction.x;
var y = prediction.y;
}
</code></pre>
</div>
</div>
<h3 class="text">Advanced Usage</h3>
<p>There are several features that WebGazer.js enables beyond the example shown so far.<p>
<div class="row">
<div class="col-lg-12">
<h4>Saving Data Between Sessions</h4>
<p>WebGazer.js can save and restore the training data between browser sessions by storing data to localstorage. This occurs automatically when <code class="javascript">end()</code> is called. If you want each user session to be independent make sure that you do not call the <code class="javascript">end()</code> function. </p>
<pre><code class="javascript hljs">webgazer.end()</code></pre>
</div>
</div>
<div>
<h4>Changing in Use Regression and Tracker Modules</h4>
<p>At the heart of WebGazer.js are the tracker and regression modules. The tracker module controls how eyes are detected and the regression module determines how the regression model is learned and how predictions are made based on the eye patches extracted from the tracker module. These modules can be swapped in and out at any time. We hope that this will make it easy to extend and adapt WebGazer.js and welcome any developers that want to contribute.</p>
<p>WebGazer.js requires the bounding box that includes the pixels from the webcam video feed that correspond to the detected eyes of the user. Currently we include three external libraries that implement different Computer Vision algorithms to detect the face and eyes.</p>
<div class="row">
<div class="col-lg-12">
<pre><code class="javascript hljs">webgazer.setTracker("clmtrackr"); //set a tracker module</code></pre>
<pre><code class="javascript hljs">webgazer.addTrackerModule("newTracker", NewTrackerConstructor); //add a new tracker module</code></pre>
<p>Here are all the external tracker modules that come by default with WebGazer.js. Let us know if you want to introduce your own facial feature detection library. </p>
<ul>
<li><a href="https://github.com/auduno/clmtrackr">clmtrackr</a></li>
<li><a href="https://github.com/mtschirs/js-objectdetect">js_objectdetect</a></li>
<li><a href="https://trackingjs.com/">tracking.js</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<pre><code class="javascript hljs">webgazer.setRegression("ridge"); //set a regression module</code></pre>
<pre><code class="javascript hljs">webgazer.addRegressionModule("newReg", NewRegConstructor); //add a new regression module</code></pre>
<p>Here are all the regression modules that come by default with WebGazer.js. Let us know if you would like introduce different modules - just keep in mind that they should be able to produce predictions very fast.</p>
<ul>
<li>ridge - a simple ridge regression model mapping pixels from the detected eyes to locations on the screen.</li>
<li>weightedRidge - a weight ridge regression model with newest user interactions contribution more to the model.</li>
<li>threadedRidge - a faster implementation of ridge regression that uses threads.</li>
<li>linear - a basic simple linear regression that maps </li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h4>Pause and Resume</h4>
<p>It may be necessary to pause the data collection and predictions of WebGazer.js for performance reasons.</p>
<pre><code class="javascript hljs">
webgazer.pause(); //WebGazer.js is now paused, no data will be collected and the gaze callback will not be executed
webgazer.resume(); //data collection resumes, gaze callback will be called again
</code></pre>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h4>Util and Params</h4>
<p>We provide some useful functions and objects in <code class="javascript">webgazer.util</code>. The webgazer.params object also contains some useful parameters to tweak to control video fidelity (trades off speed and accuracy) and sample rate for mouse movements.</p>
<pre><code class="javascript hljs">
webgazer.util.bound(prediction);
prediction.x; //now always in the bounds of the viewport
prediction.y; //now always in the bounds of the viewport
</code></pre>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h4>Detecting Areas Of Interesting in Search Engine</h4>
When a searcher issues a query, SearchGazer can detect which areas of interest (organic results, related searches, ads, etc.) the searcher is examining in real time. SearchGazer currently supports detection of DOM elements for Bing and Google. Simply call the functions <code class="javascript">findDomElementBing(x,y)</code> and <code class="javascript">findDomElementGoogle(x,y)</code> respectively, which given a pair of coordinates within the search engine page will return the corresponding DOM element.
</div>
</div>
</div>
<hr class="featurette-divider">
<div id="support" class="container pad">
<h2 class="text-center">Browser Support</h2>
<p class="text-left" pad>
SearchGazer uses the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia">getUserMedia/Stream API</a> to get access to the webcam. These browsers are currently supported, as seen <a href="http://caniuse.com/#feat=stream">here</a>.
</p>
<div class="row">
<div class="col-lg-3">
<center>
<img src="media/chrome.png" alt="Google Chrome" width="100" height="100" >
</center>
<h4 class="text-center">Google Chrome 47+</h4>
</div>
<div class="col-lg-3">
<center>
<img src="media/edge.png" alt="Microsoft Edge" width="100" height="100">
</center>
<h4 class="text-center">Microsoft Edge 13+</h4>
</div>
<div class="col-lg-3">
<center>
<img src="media/firefox.png" alt="Mozilla Firefox" width="100" height="100">
</center>
<h4 class="text-center">Mozilla Firefox 44+</h4>
</div>
<div class="col-lg-3">
<center>
<img src="media/opera.png" alt="Opera" width="100" height="100">
</center>
<h4 class="text-center">Opera 36+</h4>
</div>
</div>
</div>
<hr class="featurette-divider">
<div id="engine" class="container pad">
<h2 class="text-center">Search Engine Support</h2>
<p class="text-left" pad>
SearchGazer can identify which areas of interests are being examined in real time for the following search engines:</p>
<div class="row">
<div class="col-lg-6">
<center>
<img src="media/bing.png" alt="Bing" height="100">
</center>
<h4 class="text-center">Bing</h4>
</div>
<div class="col-lg-6">
<center>
<img src="media/google.png" alt="Google" height="100" >
</center>
<h4 class="text-center">Google</h4>
</div>
</div>
</div>
<hr class="featurette-divider">
<div id="download" class="container pad">
<h2 class="text-center">Download Instructions</h2>
<div class="row">
<p class="text-left" pad>
Download searchgazer.js and add it as a script in your HTML page. For instructions on how to initialize the eye tracking and area of interest detection check the <a href="#usage">Usage</a> section.
<div class="col-lg-4">
<h3 class="pad">SearchGazer</h3>
<form method="get" action="searchgazer.js">
<button class="btn btn-primary btn-lg" type="submit"><span class="glyphicon glyphicon-cloud-download" aria-hidden="true"></span> Download SearchGazer</button>
</form>
</div>
</div>
</div>
<hr class="featurette-divider">
<div id="examples" class="container pad">
<h2 class="text-center pad">Examples</h2>
<div class="row">
<div class="col-lg-6">
<center>
<img src="media/bing_serp.png" alt="Bing Demo" height="280">
</center>
<h4 class="text-center">Bing</h4>
</div>
<div class="col-lg-6">
<center>
<img src="media/google_serp.png" alt="Google Demo" height="280">
</center>
<h4 class="text-center">Google</h4>
</div>
<div class="col-lg-12">
<h4 class="pad">SearchGazer on Bing or Google</h4>
<p>See how SearchGazer works on Bing and Google. The only thing you need to do is make sure your face is captured correctly and on the next page click the center of a black circle that will appear in different locations within your screen. Once you have successfully clicked the target for 9 times you can choose to see SearchGazer's predictions in action on a Bing or Google demo. The areas of interest that correspond to the location of the predicted gaze will be logged in the console.
<form method="get" action="https://webgazer.cs.brown.edu/search/examples/face_detection.htm?">
<button class="btn btn-primary" type="submit">Try Live!</button>
</form>
</p>
</div>
</div>
</div>
<hr class="featurette-divider">
<div id="publication" class="container pad">
<h2 class="text-center">Publication</h2>
<p>If you use SearchGazer please cite the following paper:</p>
<code>
@inproceedings{papoutsaki2017searchgazer,<br>
author = {Alexandra Papoutsaki and James Laskey and Jeff Huang},<br>
title = {SearchGazer: Webcam Eye Tracking for Remote Studies of Web Search},<br>
booktitle = {Proceedings of the ACM SIGIR Conference on Human Information Interaction \& Retrieval (CHIIR)},<br>
year = {2017},<br>
organization={ACM}<br>
}
</code>
</div>
<hr class="featurette-divider">
<div id="contact" class="container pad">
<h2 class="text-center pad">Who We Are</h2>
<div class="row">
<!-- bootstrap has 12 columns, so each person gets part of that 12 cols -->
<div class="col-lg-4">
<img class="img-circle center-block" src="media/alexpap.jpg" alt="Alexandra Papoutsaki" height="140">
<h4 class="text-center"><a href="http://www.cs.pomona.edu/~apapoutsaki/">Alexandra Papoutsaki</a></h4>
<p>Assistant Professor of Computer Science at Pomona College.</p>
</div>
<div class="col-lg-4">
<img class="img-circle center-block" src="media/jim.jpg" alt="James Laskey" height="140">
<h4 class="text-center">James Laskey</h4>
<p>Software Engineer at Google. Graduated from Brown in 2016.</p>
</div>
<div class="col-lg-4">
<img class="img-circle center-block" src="media/jeff.jpg" alt="Jeff Huang" height="140">
<h4 class="text-center"><a href="http://jeffhuang.com">Jeff Huang</a></h4>
<p>Assistant Professor of Computer Science at Brown University.</p>
</div>
</div>
</div>
<hr class="featurette-divider">
<div id="license" class="container pad">
<h2 class="text-center">License</h2>
<p class="text-center">Copyright (C) 2018 <a href="http://hci.cs.brown.edu">Brown HCI Group</a><br>
Licensed under <a href="http://www.gnu.org/licenses/gpl-3.0.en.html">GPLv3</a>.
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>