Chromeの画像認識API

はじめに

この記事は社内LT向けの資料です。

---

Shape Detection API

Chrome 70で試験実装。フラグONで使える。
→ chrome://flags/#enable-experimental-web-platform-features を Enabled に変更

---

顔検出、バーコード認識、テキスト認識

• Accelerated Shape Detection in Images
  • FaceDetector ... Android, MacOS 10.13+, Windows 10
  • BarcodeDetector ... Android, MacOS 10.13+
• Accelerated Text Detection in Images
  • TextDetector ... Android, macOS 10.11+, Windows 10
  • Google Play Services, Apple’s CIDetector (bounding box only, no OCR) or Windows 10 OCR API.
  • detection in images of Latin-1 text as defined in [iso8859-1]

---

デモ

---

FaceDetector の使い方

※なぜかWindows 10, Macとも顔のパーツ(landmark)が検出できない

let faceDetector = new FaceDetector();
faceDetector.detect(src) // src = <img>, <video>, <canvas>
.then(faces => {
  if (faces.length > 0) {
    let face = faces[0]; // 1個以上見つかるケースもある。ここでは最初のものだけ

    // 矩形
    const top = face.boundingBox.y;
    const left = face.boundingBox.x;
    const width = face.boundingBox.width;
    const height = face.boundingBox.height;

    const landmarks = face.landmarks;
    // なぜか検出できていない
    // landmark = landmarks[0];
    // landmark.locations[0].x , landmark.locations[0].y
    // lanrmark.type; // mouth, eye, nose
  }
  else {
    // --- 顔が見つからない場合 ---
  }
})
.catch(e => {
  console.error("Face Detection failed: " + e);
});

---

BarcodeDetector の使い方

※Windows 10では使えない

let barcodeDetector = new BarcodeDetector();
barcodeDetector.detect(src) // src = <img>, <video>, <canvas>
.then(barcodes => {
  if (barcodes.length > 0) {
    let barcode = barcodes[0]; // 1個以上見つかることもある
    const top = barcode.boundingBox.y;
    const left = barcode.boundingBox.x;
    const width = barcode.boundingBox.width;
    const height = barcode.boundingBox.height;

    // --- format , string --
    const format = barcode.format;
    const str = barcode.rawValue;
  }
  else {
    // --- 見つからない場合 ---
  }
})
.catch(e => {
  console.error("Barcode Detection failed: " + e);
});

---

TextDetector の使い方

※なぜかWindows 10 では使えない。Macでは制約としてテキストの中身は取れない

let textDetector = new TextDetector();
textDetector.detect(src) // src = <img>, <video>, <canvas>
.then(textBlocks  => {
  if (textBlocks.length > 0) {
    let text = textBlocks[0];
    const top = text.boundingBox.y;
    const left = text.boundingBox.x;
    const width = text.boundingBox.width;
    const height = text.boundingBox.height;

    // --- string --
    const str = text.rawValue;
  }
  else {
    // --- 見つからない場合 ---
  }
})
.catch(e => {
  console.error("Text Detection failed: " + e);
});

---

まとめ

• 画像識別はクラウドAPIだけでなく、デバイスでもできるようにになってきている
• Chromeでは試験的実装が始まっている、いずれ標準になるかも
  • 中身はOpenCVを使っていると予想（未確認）

以上、ご質問は？