基於圖形檢測API(shape detection API)的人臉檢測

原文：https://paul.kinlan.me/face-detection/

 

在 Google 開發者峯會中，谷歌成員 Miguel Casas-Sanchez 跟我說：「嘿 Paul，我給你看一個 demo」。看完以後我必須對它進行研究。

 

Shape Detection API（圖形檢測API）目前在 WICG 中尚處於孵化和實驗階段，這對於平臺來講是一個很好的漸進過程。

 

Shape Detection API 有意思的地方在於，它是基於用戶設備的一些基礎硬件功能上建立標準接口的，爲 web 平臺開啓了一組新功能。

 

在 web 中使用圖形檢測已有一段很長的時間。有不少的庫可以實現邊緣檢測，面部檢測，條形碼和二維碼檢測（我甚至編寫過一個具備該功能的 web app）。

 

Shape Detection API 目前集成在 Chrome Canary（M57）中，可以檢測面部、條形碼（和二維碼），因爲 API 還處於實驗階段，你必須開啓 chrome://flags/#enable-experimental-web-platform-features。

 

該 API 使用至關簡單，最簡單的面部檢測是使用圖像調用該 API，獲取面部列表。

 

var faceDetector = new FaceDetector();
faceDetector.detect(image)
  .then(faces => faces.forEach(face => console.log(face)))
   .catch(e => {
    console.error("Boo, Face Detection failed: " + e);
  });

 

這裏須要一個圖像對象（能夠是CanvasImageSource，Blob，ImageData 或者一個 <img> 元素），將它傳遞給系統底層 API，系統將會返回一組 DetectedFace 對象，該對象其實是包含圖像上每個面部區域的 DetectedObject。

 

Miguel 寫了一個完整的 demo（是我偷來放在 JSBin 的），加載一個圖像，傳遞給檢測 API ，而後在圖像上繪製出每個 DetectedFace 的面部矩形區域。（注意：目前僅適用於 Android 的 Chrome，桌面端的很快就可以支持該 API）。

 

var image = document.getElementById('image');
var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');
var scale = 1;

image.onload = function() {
  ctx.drawImage(image,
              0, 0, image.width, image.height,
              0, 0, canvas.width, canvas.height);

  scale = canvas.width / image.width;
};

function detect() {
  if (window.FaceDetector == undefined) {
    console.error('Face Detection not supported');
    return;
  }

  var faceDetector = new FaceDetector();
  faceDetector.detect(image)
    .then(faces => {
      // Draw the faces on the <canvas>.
      var ctx = canvas.getContext('2d');
      ctx.lineWidth = 2;
      ctx.strokeStyle = 'red';
      for(let face of faces) {
        ctx.rect(Math.floor(face.x * scale),
                 Math.floor(face.y * scale),
                 Math.floor(face.width * scale),
                 Math.floor(face.height * scale));
        ctx.stroke();
      }
    })
    .catch((e) => {
      console.error("Boo, Face Detection failed: " + e);
    });
}

 

這有什麼用呢？

 

啓用更多的面部檢測 API 有許多不一樣的使用狀況，例如你可以：

 

　　檢測面部時可以有更好的體驗——咱們使用該 API 有很大的靈活性，它容許咱們在 Service 或者 Web Worker 中進行處理。

 

　　局部圖片剪裁——找到圖片中的臉後可以自動剪裁圖片。

 

　　可以快速標記——快速的找到場景中全部的人臉，建立一個用戶界面，使您可以快速標記他們。

 

　　優化面部識別——一旦你有了人臉圖像，你就可以將這些區域傳遞給面部識別工具。

 

目前這些都能在瀏覽器上實現嗎？是的，但你須要有漸進性的方案。

 

漸進性方案

 

很顯然這是一個純 JS API，須要訪問底層硬件的 API，但可以「輕鬆的」（呵呵）漸進式的創建應用，確保使用低版本 Chrome 的用戶依然可以訪問。

 

個人想法是遵循相關規範達到漸進加強：服務器 -> JS（+ 也許是 Web ASM）-> Web API，但我會更深刻的研究，由於我看到了許多的挑戰。

 

服務器

 

咱們能夠建立一個簡單的包含 <input type='file'> 的表單，將圖像上傳到服務器，能夠在服務端完成圖像檢測，而後將結果返回給客戶端。

 

JS

 

若是咱們使用了 JS，咱們可以在瀏覽器上的頁面上下文中使用任意一個客戶端庫完成面部檢測。

 

Web Assembly：

 

這種方式進行圖像識別，甚至是以高性能的方式進行目標檢測，是使人難以置信的（至少在我看來）。「原平生臺」早已有許多的庫（如 Open CV），主要是用 C 寫的，可以應用到瀏覽器上，利用豐富的生態系統，也可以達到相同的性能。

 

若是有人實現了多邊形檢測 API ，這將是很是有用的功能。

 

Web API

 

如今它能夠使用底層系統 API 時，咱們就可以在全部的平臺上普及。

 

我以爲這是一個頗有趣的 API，它的確爲平臺開啓了不少的可能性，特別是對我，使用底層系統相對於使用純 javascript ，極大的提升了在 web 上的目標檢測性能，這是我期待條形碼檢測 API 的緣由，它將加強二維碼掃描器 Web 應用性能的同事，下降其複雜性。