web網頁人臉識別tracking.js

what？你沒有看錯，強大的JavaScript也可以實現人臉識別功能。小編精心整理了一個人臉識別的JavaScript庫（tracking.js），通過這篇文章，你可以了解到如何在網頁中實現一個人臉識別功能。

tracking.js

Tracking.js 是一個獨立的JavaScript庫，用於跟蹤從相機實時收到的數據。跟蹤的數據既可以是顏色，也可以是人，也就是說我們可以通過檢測到某特定顏色，或者檢測一個人體/臉的出現與移動，來觸發JavaScript 事件。它是非常易於使用的API，具有數個方法和事件（足夠使用了）。

還有一個我覺得不錯的功能就是，截取攝像頭的圖像，對於一些網站用這個功能來設置用戶頭像也是個很炫的功能。

簡單實例

引入核心類:

<script src="js/tracking-min.js"></script>

引入顏色模型類:

<script src="tracker/color.js">

實例化類啟用電腦的攝像頭:

var videoCamera = new tracking.VideoCamera().render();

實例化跟蹤通過顏色洋紅和顯示X,Y和Z位置的檢測區域在控制台:

videoCamera.track({
    type: 'color',
    color: 'magenta',
    onFound: function(track) {
      console.log(track.x, track.y, track.z);
    },
    onNotFound: function() {}
});

在vue中使用

// 引入trackingjs所需文件
import tracking from '@/assets/js/tracking-min.js'
import '@/assets/js/face-min.js'

const tracker = new window.tracking.ObjectTracker('face');

注：tracking類import之后，使用時需要window.tracking

事件

onFound : 每次檢測到目標時就會觸發該事件

new tracking.VideoCamera().track({
    onFound: function(track) {
        // do something
    }
});

onNotFound : 每次沒有檢測到目標時就會觸發該事件.

new tracking.VideoCamera().track({
    onNotFound: function(track) {
        // do something
    }
});

rect.x, rect.y, rect.width, rect.height這四個參數表示左上角的坐標和框出來人臉的大小。

示例案例

圖片人臉識別

效果圖

實現思路

通過tracking.js獲取圖片中人臉的信息，然后根據這些信息繪制相對應的div框即可。

核心代碼

<style>
  .rect {
    border: 2px solid #a64ceb;
    left: -1000px;
    position: absolute;
    top: -1000px;
    /* background-color: #a64ceb; */
    border:1px solid #a64ceb;
  }

  #img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -173px 0 0 -300px;
  }
  </style>

<div class="demo-frame">
    <div class="demo-container">
      <img id="img" src="img/faces.jpg" />
    </div>
  </div>

var img = document.getElementById('img');
//實例化tracker對象
var tracker = new tracking.ObjectTracker(['face']);
tracker.setStepSize(1.7);

//tracker對象和標簽關聯
tracking.track('#img', tracker);

//添加事件
tracker.on('track', function(event) {
    //給每個人臉繪制對應的框
    event.data.forEach(function(rect) {
      window.plot(rect.x, rect.y, rect.width, rect.height+20);
    });
});

window.plot = function(x, y, w, h) {
    var rect = document.createElement('div');
    document.querySelector('.demo-container').appendChild(rect);
    rect.classList.add('rect');
    rect.style.width = w + 'px';
    rect.style.height = h + 'px';
    rect.style.left = (img.offsetLeft + x) + 'px';
    rect.style.top = (img.offsetTop + y) + 'px';
};

視頻人臉識別

效果圖

實現思路

首先在video標簽的上面覆蓋一個canvas，通過tracking.js獲取圖片中人臉的坐標信息，然后通過這些坐標信息，在canvas中進行相應的繪制。

核心代碼

.demo-container {
    background-color: black;
}

video,
canvas {
    position: absolute;
}

<div class="demo-frame">
    <div class="demo-container">
        <video id="video" width="800" height="530" preload autoplay loop muted controls>
            <source src="./img/video.mp4" type="video/mp4">
        </video>
        <canvas id="canvas" width="800" height="500"></canvas>
    </div>
</div>

var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var tracker = new tracking.ObjectTracker('face');
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);

tracking.track('#video', tracker);

tracker.on('track', function (event) {
    context.clearRect(0, 0, canvas.width, canvas.height);

    event.data.forEach(function (rect) {
        context.strokeStyle = '#a64ceb';
        context.strokeRect(rect.x, rect.y, rect.width, rect.height);
        context.font = '11px Helvetica';
        context.fillStyle = "#fff";
        context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
        context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
    });
});

源碼收錄在公眾號【小猴子的web成長之路】，關注公眾號回復關鍵字【人臉識別】即可獲取

由於篇幅原因，這里就簡單的介紹這兩種使用方式。源碼中更有刷臉登錄、顏色識別及人臉打標簽的demo源碼，感興趣的小伙伴自行獲取。