高級(jí)web網(wǎng)頁(yè)人臉識(shí)別tracking.js

what？你沒(méi)有看錯(cuò)，強(qiáng)大的JavaScript也可以實(shí)現(xiàn)人臉識(shí)別功能。小編精心整理了一個(gè)人臉識(shí)別的JavaScript庫(kù)（tracking.js），通過(guò)這篇文章，你可以了解到如何在網(wǎng)頁(yè)中實(shí)現(xiàn)一個(gè)人臉識(shí)別功能。
tracking.js

Tracking.js 是一個(gè)獨(dú)立的JavaScript庫(kù)，用于跟蹤從相機(jī)實(shí)時(shí)收到的數(shù)據(jù)。跟蹤的數(shù)據(jù)既可以是顏色，也可以是人，也就是說(shuō)我們可以通過(guò)檢測(cè)到某特定顏色，或者檢測(cè)一個(gè)人體/臉的出現(xiàn)與移動(dòng)，來(lái)觸發(fā)JavaScript 事件。它是非常易于使用的API，具有數(shù)個(gè)方法和事件（足夠使用了）。

還有一個(gè)我覺(jué)得不錯(cuò)的功能就是，截取攝像頭的圖像，對(duì)于一些網(wǎng)站用這個(gè)功能來(lái)設(shè)置用戶頭像也是個(gè)很炫的功能。
簡(jiǎn)單實(shí)例

引入核心類:

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

    1

引入顏色模型類:

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

    1

實(shí)例化類啟用電腦的攝像頭:

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

    1

實(shí)例化跟蹤通過(guò)顏色洋紅和顯示X,Y和Z位置的檢測(cè)區(qū)域在控制臺(tái):

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之后，使用時(shí)需要window.tracking

事件

onFound : 每次檢測(cè)到目標(biāo)時(shí)就會(huì)觸發(fā)該事件

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

 

onNotFound : 每次沒(méi)有檢測(cè)到目標(biāo)時(shí)就會(huì)觸發(fā)該事件.

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

  

    rect.x, rect.y, rect.width, rect.height這四個(gè)參數(shù)表示左上角的坐標(biāo)和框出來(lái)人臉的大小。

示例案例
圖片人臉識(shí)別
效果圖

實(shí)現(xiàn)思路

通過(guò)tracking.js獲取圖片中人臉的信息，然后根據(jù)這些信息繪制相對(duì)應(yīng)的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');
//實(shí)例化tracker對(duì)象
var tracker = new tracking.ObjectTracker(['face']);
tracker.setStepSize(1.7);

//tracker對(duì)象和標(biāo)簽關(guān)聯(lián)
tracking.track('#img', tracker);

//添加事件
tracker.on('track', function(event) {
    //給每個(gè)人臉繪制對(duì)應(yīng)的框
    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';
};

 

視頻人臉識(shí)別
效果圖

實(shí)現(xiàn)思路

首先在video標(biāo)簽的上面覆蓋一個(gè)canvas，通過(guò)tracking.js獲取圖片中人臉的坐標(biāo)信息，然后通過(guò)這些坐標(biāo)信息，在canvas中進(jìn)行相應(yīng)的繪制。
核心代碼

.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);
    });
});

  

    原碼收錄在作者的公眾號(hào)里


歡迎關(guān)注微信公眾號(hào):猴哥說(shuō)前端