顔ランドマーク検出ガイド（ウェブ用）

MediaPipe フェイスランドマーカータスクを使用すると、顔のランドマークと顔の表情を検出できます。使用できます。このタスクを使用して、人間の顔の表情を識別し、顔のフィルタやエフェクトを適用したり、仮想アバターを作成したりできます。このタスクで使用するもの単一の画像または連続的な画像でも処理できる必要があります。このタスクでは、顔の 3 次元のランドマーク、ブレンドシェイプが出力されます。スコア（顔の表情を表す係数）を使って、顔の微妙なリアルタイムでの表面処理、変換行列を使用して、エフェクトのレンダリングに必要な変換の数を表します。

ここでは、ウェブと 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 フェイスランドマーカータスクには、これと互換性のあるトレーニング済みモデルが必要ですタスクを実行します。顔認識ツールで使用可能なトレーニング済みモデルについて詳しくは、以下をご覧ください。タスクの概要のモデルセクションをご覧ください。

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

<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 faceLandmarker = await faceLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

構成オプション

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

オプション名	説明	値の範囲	デフォルト値
`running_mode`	タスクの実行モードを設定します。2 つのモデルモード: IMAGE: 単一画像入力のモード。 VIDEO: 音声データのデコードされたフレームのモード入力データのライブストリームで実行できます。	{`IMAGE, VIDEO`}	`IMAGE`
`numFaces`	`FaceLandmarker`。平滑化は次の場合にのみ適用されます。 `num_faces` は 1 に設定されています。	`Integer > 0`	`1`
`minFaceDetectionConfidence`	顔検出に必要な最小信頼スコア成功したとみなされます。	`Float [0.0,1.0]`	`0.5`
`minFacePresenceConfidence`	顔存在の最小信頼スコア顔のランドマーク検出のスコアが出力されます。	`Float [0.0,1.0]`	`0.5`
`minTrackingConfidence`	顔トラッキングの最小信頼スコア成功とみなされます。	`Float [0.0,1.0]`	`0.5`
`outputFaceBlendshapes`	顔認識地マーカーが顔ブレンドシェイプを出力するかどうか。顔ブレンドシェイプは、3D 顔モデルのレンダリングに使用されます。	`Boolean`	`False`
`outputFacialTransformationMatrixes`	FaceLandmarker が顔を出力するかどうか変換行列が作成されますFaceLandMarker で行列を使用して、顔のランドマークを正規の顔モデルから検出されたランドマークに効果を適用できます。	`Boolean`	`False`

データの準備

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

タスクを実行する

顔認識マーカーは、detect()（走行モード IMAGE）を使用します。トリガーする detectForVideo() メソッド（実行モードは VIDEO）説明します。このタスクでは、データを処理し、顔のランドマークを設定して、結果を報告します

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

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

画像

const image = document.getElementById("image") as HTMLImageElement;
const faceLandmarkerResult = faceLandmarker.detect(image);

動画

await faceLandmarker.setOptions({ runningMode: "VIDEO" });

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

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

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

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

結果の処理と表示

顔認識地マーカーは、検出ごとに結果オブジェクトを返します。あります。結果のオブジェクトには、検出された顔ごとに顔メッシュが含まれ、各顔ランドマークの座標です。必要に応じて、結果オブジェクトには顔の表情を表すブレンドシェイプと、変換行列を使用して、検出されたランドマークに顔効果を適用します。

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

FaceLandmarkerResult:
  face_landmarks:
    NormalizedLandmark #0:
      x: 0.5971359014511108
      y: 0.485361784696579
      z: -0.038440968841314316
    NormalizedLandmark #1:
      x: 0.3302789330482483
      y: 0.29289937019348145
      z: -0.09489090740680695
    ... (478 landmarks for each face)
  face_blendshapes:
    browDownLeft: 0.8296722769737244
    browDownRight: 0.8096957206726074
    browInnerUp: 0.00035583582939580083
    browOuterUpLeft: 0.00035752105759456754
    ... (52 blendshapes for each face)
  facial_transformation_matrixes:
    [9.99158978e-01, -1.23036895e-02, 3.91213447e-02, -3.70770246e-01]
    [1.66496094e-02,  9.93480563e-01, -1.12779640e-01, 2.27719707e+01]
    ...

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

顔認識マーカーのサンプルコードは、結果については、コードサンプル