examples/brief_camera.html

<!doctype html>
<html>
<head>

  <title>tracking.js - bounding box 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>
  #boundingBox {
    display: none;
    position: absolute;
    background: white;
    border: 1px dashed;
    opacity: .5;
    z-index: 1;
  }
  #video {
    position: absolute;
    top: -1000px;
    cursor: crosshair;
  }
  body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  </style>
</head>
<body>

  <div class="demo-title">
    <p><a href="http://trackingjs.com" target="_parent">tracking.js</a> － Click and drag to select the area to be tracked</p>
  </div>

  <div id="boundingBox"></div>

  <div class="demo-frame">
    <div class="demo-container">
      <video id="video" width="393" height="295" preload autoplay loop muted controls></video>
      <canvas id="canvas" width="800" height="530"></canvas>
  </div>
</div>

  <script>
    (function() {
      // BoundingBoxTracker ======================================================
      var BoundingBoxTracker = function() {
        BoundingBoxTracker.base(this, 'constructor');
      };
      tracking.inherits(BoundingBoxTracker, tracking.Tracker);

      BoundingBoxTracker.prototype.templateDescriptors_ = null;
      BoundingBoxTracker.prototype.templateKeypoints_ = null;
      BoundingBoxTracker.prototype.fastThreshold = 60;
      BoundingBoxTracker.prototype.blur = 3;

      BoundingBoxTracker.prototype.setTemplate = function(pixels, width, height) {
        var blur = tracking.Image.blur(pixels, width, height, 3);
        var grayscale = tracking.Image.grayscale(blur, width, height);
        this.templateKeypoints_ = tracking.Fast.findCorners(grayscale, width, height);
        this.templateDescriptors_ = tracking.Brief.getDescriptors(grayscale, width, this.templateKeypoints_);
      };

      BoundingBoxTracker.prototype.track = function(pixels, width, height) {
        var blur = tracking.Image.blur(pixels, width, height, this.blur);
        var grayscale = tracking.Image.grayscale(blur, width, height);
        var keypoints = tracking.Fast.findCorners(grayscale, width, height, this.fastThreshold);
        var descriptors = tracking.Brief.getDescriptors(grayscale, width, keypoints);
        this.emit('track', {
          data: tracking.Brief.reciprocalMatch(this.templateKeypoints_, this.templateDescriptors_, keypoints, descriptors)
        });
      };

      // Track ===================================================================
      var boundingBox = document.getElementById('boundingBox');
      var boxLeft = 403;
      var video = document.getElementById('video');
      var canvas = document.getElementById('canvas');
      var canvasRect = canvas.getBoundingClientRect();
      var context = canvas.getContext('2d');
      var templateImageData;
      var capturing = false;
      var videoHeight = 295;
      var videoWidth = 393;

      var tracker = new BoundingBoxTracker();

      tracker.on('track', function(event) {
        stats.end();

        if (capturing) {
          return;
        }
        // Sorts best matches by confidence.
        event.data.sort(function(a, b) {
          return b.confidence - a.confidence;
        });
        // Re-draws template on canvas.
        context.putImageData(templateImageData, boxLeft, 0);

        // Plots lines connecting matches.
        for (var i = 0; i < Math.min(10, event.data.length); i++) {
          var template = event.data[i].keypoint1;
          var frame = event.data[i].keypoint2;
          context.beginPath();
          context.strokeStyle = 'magenta';
          context.moveTo(frame[0], frame[1]);
          context.lineTo(boxLeft + template[0], template[1]);
          context.stroke();
        }
      });

      var trackerTask = tracking.track(video, tracker, { camera: true });
      // Waits for the user to accept the camera.
      trackerTask.stop();

      // Sync video ============================================================
      function requestFrame() {
        window.requestAnimationFrame(function() {
          context.clearRect(0, 0, canvas.width, canvas.height);
          if (video.readyState === video.HAVE_ENOUGH_DATA) {
            try {
              context.drawImage(video, 0, 0, videoWidth, videoHeight);
            } catch (err) {}
          }
          requestFrame();
        });
      }
      requestFrame();

      // Bounding box drag =====================================================
      var initialPoint;
      var left;
      var top;
      var width;
      var height;
      canvas.addEventListener('mousedown', function(event) {
        initialPoint = [event.pageX, event.pageY];
        capturing = true;
      });
      canvas.addEventListener('mousemove', function(event) {
        if (capturing) {
          left = Math.min(initialPoint[0], event.pageX);
          top = Math.min(initialPoint[1], event.pageY);
          width = Math.max(initialPoint[0], event.pageX) - left;
          height = Math.max(initialPoint[1], event.pageY) - top;
          boundingBox.style.display = 'block';
          boundingBox.style.left = left + 'px';
          boundingBox.style.top = top + 'px';
          boundingBox.style.width = width + 'px';
          boundingBox.style.height = height + 'px';
        }
      });
      document.addEventListener('mouseup', function() {
        boundingBox.style.display = 'none';
        setTackerTemplate(left, top, width, height);
        capturing = false;
      });
      function setTackerTemplate(left, top, width, height) {
        templateImageData = context.getImageData(left - canvasRect.left, top - canvasRect.top, width, height);
        canvas.width = boxLeft + width;
        context.putImageData(templateImageData, boxLeft, 0);
        trackerTask.stop();
        tracker.setTemplate(templateImageData.data, width, height);
        trackerTask.run();
      }

      // GUI Controllers
      var gui = new dat.GUI();
      gui.add(tracker, 'fastThreshold', 20, 100).step(5);
      gui.add(tracker, 'blur', 1.1, 5.0).step(0.1);
    }());
  </script>

</body>
</html>