1<!DOCTYPE html>
2
3<html lang="en">
4
5 <head>
6 <meta charset="UTF-8">
7 <title>Tracking Color Blobs in Webcam Feed Using Tracking.js</title>
8 <link rel="stylesheet" href="styles.css">
9 <script src="tracking-min.js"></script>
10 <script src="script.js"></script>
11 </head>
12
13 <body>
14
15 <div class="display">
16 <video id="webcam" width="640" height="480" autoplay></video>
17 <canvas id="canvas" width="640" height="480"></canvas>
18 </div>
19
20 <div class="ui">
21
22 <div class="controls">
23
24 <p>Click on the webcam feed to pick a color, then adjust tolerance.</p>
25
26 <div>
27 <label for="tolerance">Tolerance:</label>
28 <input id="tolerance" type="range" value="10" max="255" min="0" step="1">
29 </div>
30
31 </div>
32
33 <div id="color"></div>
34
35 </div>
36
37 </body>
38
39</html>
40