tracking.js/examples/fast_camera.html at master · eduardolundgren/tracking.js · GitHub

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
<!doctype html>

<html>
<head>
  <title>tracking.js -  feature detector with camera</title>

  <meta charset="utf-8">
  <link rel="stylesheet" href="assets/demo.css">

  <script src="../build/tracking-min.js"></script>
  <script src="../node_modules/dat.gui/build/dat.gui.min.js"></script>
  <script src="assets/stats.min.js"></script>

  <style>
  #video {
    position: absolute;
    top: -1000px;
  }

  #canvas {
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -150px;
    position: absolute;
  }
  </style>
</head>
<body>
  <div class="demo-title">
    <p><a href="http://trackingjs.com" target="_parent">tracking.js</a> － display detected features</p>
  </div>

  <div class="demo-frame">
    <div class="demo-container">
      <video id="video" width="400" height="300" preload autoplay loop muted></video>
      <canvas id="canvas" width="400" height="300"></canvas>
    </div>
  </div>

  <script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    var FastTracker = function() {
      FastTracker.base(this, 'constructor');
    };
    tracking.inherits(FastTracker, tracking.Tracker);

    tracking.Fast.THRESHOLD = 2;
    FastTracker.prototype.threshold = tracking.Fast.THRESHOLD;

    FastTracker.prototype.track = function(pixels, width, height) {
      stats.begin();
      var gray = tracking.Image.grayscale(pixels, width, height);
      var corners = tracking.Fast.findCorners(gray, width, height);
      stats.end();

      this.emit('track', {
        data: corners
      });
    };

    var tracker = new FastTracker();

    tracker.on('track', function(event) {
      context.clearRect(0, 0, canvas.width, canvas.height);
      var corners = event.data;
      for (var i = 0; i < corners.length; i += 2) {
        context.fillStyle = '#f00';
        context.fillRect(corners[i], corners[i + 1], 2, 2);
      }
    });

    tracking.track('#video', tracker, { camera: true });

    // GUI Controllers
    var gui = new dat.GUI();

    gui.add(tracker, 'threshold', 1, 100).onChange(function(value) {
      tracking.Fast.THRESHOLD = value;
    });
  </script>
</body>
</html>