ウェブ向け顔検出ガイド

MediaPipe 顔検出タスクを使用すると、画像や動画内の顔を検出できます。次を使用: このタスクでは、フレーム内の顔と顔の特徴を検出します。このタスクでは、単一の画像または連続的な画像で機能する必要があります。このタスクでは、顔の位置と、以下が出力されます。顔の要点: 左目、右目、鼻先、口、左目のトラジション、あります

ここでは、ウェブと JavaScript で顔検出機能を使用する方法について説明します。このモジュールで取り上げる機能、モデル、構成のオプションについては、概要をご覧ください。

サンプルコード

顔検出器のサンプルコードは、顔検出機能の完全な実装を示しています。タスクを示しています。このコードは、このタスクをテストして、独自の顔検出アプリの構築を始めました。特定のリソースを表示、実行、顔検出器のサンプルコードを編集できます。

セットアップ

このセクションでは、開発環境を設定するための主な手順について説明します。顔検出機能を使用することができます。一般的な情報については、セットアップして、以下を含むウェブと JavaScript の開発環境をセットアップできます。プラットフォームバージョンの要件については、ウェブ用の設定ガイド

JavaScript パッケージ

顔検出器のコードは MediaPipe @mediapipe/tasks-vision から入手できます。 NPM パッケージ。Google Chat ではプラットフォームの手順に沿って、ライブラリを検索してダウンロードしてください。設定ガイド

必要なパッケージは NPM からインストールできます。次のコマンドを使用します。

npm install @mediapipe/tasks-vision

コンテンツ配信ネットワーク（CDN）経由でタスクコードをインポートする場合追加するには、次のコードを <head>タグを追加します。

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

モデル

MediaPipe Face Detector タスクには、これと互換性のあるトレーニング済みモデルが必要ですタスクを実行します。顔検出機能で利用可能なトレーニング済みモデルについて詳しくは、以下をご覧ください。タスクの概要のモデルセクションをご覧ください。

モデルを選択してダウンロードし、プロジェクトディレクトリに保存します。

<dev-project-root>/app/shared/models/

タスクを作成する

顔検出 createFrom...() のいずれかの機能を使用して以下の操作を行います。タスクを準備します。createFromModelPath() を使用するトレーニング済みモデルファイルの相対パスまたは絶対パスで関数を呼び出します。モデルがすでにメモリに読み込まれている場合は、 createFromModelBuffer() メソッドを使用します。

以下のコードサンプルは、createFromOptions() 関数を使用して以下を行う方法を示しています。タスクを設定します。createFromOptions 関数を使用すると、設定オプションが表示された顔検出。リソースの構成について構成オプションをご覧ください。

次のコードは、カスタム関数でタスクをビルドして構成する方法を示しています。オプション:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const facedetector = await FaceDetector.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

構成オプション

このタスクには、ウェブと JavaScript 用に次の構成オプションがあります。アプリケーション:

オプション名	説明	値の範囲	デフォルト値
`option_var_1_web_js`	タスクの実行モードを設定します。2 つのモデルモード: IMAGE: 単一画像入力のモード。 VIDEO: 音声データのデコードされたフレームのモード入力データのライブストリームで実行できます。	{`IMAGE, VIDEO`}	`IMAGE`
`minDetectionConfidence`	顔検出が成功とみなされるための最小信頼スコア。	`Float [0,1]`	`0.5`
`minSuppressionThreshold`	重複とみなされる顔検出の非最大抑制しきい値の最小値。	`Float [0,1]`	`0.3`

データの準備

顔検出機能は、ホストブラウザ。このタスクでは、次を含むデータ入力の前処理も処理されます。サイズ変更、回転、値の正規化です。動画内の顔を検出するには API を使用して、タイムスタンプを使用して一度に 1 つのフレームをすばやく処理できます。顔が動画内に出現するタイミングが判断されます。

タスクを実行する

顔検出機能は、detect()（実行モード image）を使用します。トリガーする detectForVideo() メソッド（実行モードは video）説明します。このタスクはデータを処理し、顔の検出を試行して、結果を報告します

顔検出器の detect() メソッドと detectForVideo() メソッドの呼び出しが実行されるユーザーインターフェーススレッドをブロックします。顔を検出した場合動画フレームでは、検出のたびにメインフレームが使用します。これを防ぐには、detect() を実行するウェブワーカーを実装します。と detectForVideo() メソッドを別のスレッドに配置します。

次のコードは、タスクモデルを使用して処理を実行する方法を示しています。

画像

const image = document.getElementById("image") as HTMLImageElement;
const faceDetectorResult = faceDetector.detect(image);

動画

await faceDetector.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const detections = faceDetector.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

顔検出タスクの実行のより詳細な実装については、コードサンプルをご覧ください。

結果の処理と表示

顔検出器は、顔検出機能ごとに顔検出機能の結果オブジェクトを生成するあります。結果のオブジェクトには、画像座標の顔と世界に存在する顔が含まれます指定します。

このタスクからの出力データの例を次に示します。

FaceDetectionResult:
  Detections:
    Detection #0:
      BoundingBox:
        origin_x: 126
        origin_y: 100
        width: 463
        height: 463
      Categories:
        Category #0:
          index: 0
          score: 0.9729152917861938
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.18298381567001343
          y: 0.2961040139198303
        NormalizedKeypoint #1:
          x: 0.3302789330482483
          y: 0.29289937019348145
        ... (6 keypoints for each face)
    Detection #1:
      BoundingBox:
        origin_x: 616
        origin_y: 193
        width: 430
        height: 430
      Categories:
        Category #0:
          index: 0
          score: 0.9251380562782288
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.6151331663131714
          y: 0.3713381886482239
        NormalizedKeypoint #1:
          x: 0.7460576295852661
          y: 0.38825345039367676
        ... (6 keypoints for each face)

次の図は、タスク出力を可視化したものです。

境界ボックスのない画像については、元の画像をご覧ください。

顔検出器のコード例は、顔検出機能結果については、コードサンプル