MediaPipe Face Landmarkerとは？顔認識の新しいスタンダード
Webアプリで顔認識機能を実装したいと思ったことはありませんか？カメラアプリのフィルター機能、表情に応じたインタラクション、バーチャルアバターの制御など、顔のランドマーク検出は様々な場面で活用されています。
MediaPipe Face Landmarkerは、Googleが提供する顔のランドマーク検出ソリューションです。478個の3次元ランドマークポイントをリアルタイムで検出し、表情を表すブレンドシェイプスコアや変換行列まで出力できます。JavaScriptで手軽に利用でき、ブラウザ上で高速に動作するのが特徴です。
MediaPipe Face Landmarkerで実現できること
MediaPipe Face Landmarkerを使うことで、以下のような機能を実装できます：
- 顔のランドマーク検出 – 目、鼻、口、輪郭など478個のポイントを高精度に検出
- 表情認識 – 52種類のブレンドシェイプで笑顔や驚きなどの表情を数値化
- 顔の向きトラッキング – 変換行列により3D空間での顔の位置と角度を取得
- リアルタイム処理 – 動画ストリームやWebカメラ映像をフレーム単位で処理
- 複数顔対応 – 画面内の複数の顔を同時に検出・追跡
開発環境のセットアップ手順
必要なパッケージのインストール
まず、MediaPipeのVision タスク用パッケージをインストールします。npmを使って簡単に導入できます：
npm install @mediapipe/tasks-visionCDN経由で利用する場合は、HTMLファイルのheadタグに以下を追加します：
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
crossorigin="anonymous"></script>
</head>学習済みモデルの準備
Face Landmarkerには事前学習済みのモデルファイルが必要です。公式サイトからモデルをダウンロードし、プロジェクトディレクトリに配置します。通常は以下のような構成にします：
project-root/
├── app/
│ └── shared/
│ └── models/
│ └── face_landmarker.task # ダウンロードしたモデルFace Landmarkerの基本的な実装方法
タスクインスタンスの作成
まず、FilesetResolverを使ってWASMファイルを読み込み、Face Landmarkerのインスタンスを作成します：
import { FilesetResolver, FaceLandmarker } from '@mediapipe/tasks-vision';
// WASMファイルの読み込み
const vision = await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
// Face Landmarkerインスタンスの作成
const faceLandmarker = await FaceLandmarker.createFromOptions(vision, {
baseOptions: {
modelAssetPath: "/models/face_landmarker.task"
},
runningMode: "IMAGE", // または "VIDEO"
numFaces: 1, // 検出する顔の最大数
minFaceDetectionConfidence: 0.5,
minFacePresenceConfidence: 0.5,
outputFaceBlendshapes: true, // 表情データを取得
outputFacialTransformationMatrixes: true // 変換行列を取得
});画像から顔を検出する
静止画像から顔のランドマークを検出する場合は、detect()メソッドを使用します：
// HTML画像要素を取得
const imageElement = document.getElementById("inputImage");
// 顔検出の実行
const result = faceLandmarker.detect(imageElement);
// 結果の取得
if (result.faceLandmarks.length > 0) {
const landmarks = result.faceLandmarks[0]; // 最初の顔のランドマーク
console.log(`検出されたランドマーク数: ${landmarks.length}`);
// 各ランドマークは x, y, z 座標を持つ
console.log(`鼻の位置:`, landmarks[1]); // 例：鼻先のポイント
}動画やWebカメラからリアルタイム検出する
動画ストリームから継続的に顔を検出する場合は、runningModeを”VIDEO”に設定し、detectForVideo()メソッドを使用します：
// Webカメラへのアクセス
const video = document.getElementById("webcam");
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
video.srcObject = stream;
// フレームごとの処理関数
let lastVideoTime = -1;
function detectFrame() {
const currentTime = video.currentTime;
// 新しいフレームの場合のみ処理
if (currentTime !== lastVideoTime) {
lastVideoTime = currentTime;
// タイムスタンプ付きで検出実行
const result = faceLandmarker.detectForVideo(video, performance.now());
// 検出結果の処理
processResults(result);
}
// 次のフレームを処理
requestAnimationFrame(detectFrame);
}
// 検出開始
video.addEventListener('loadeddata', detectFrame);まとめ
MediaPipe Face Landmarkerは、ブラウザ上でリアルタイムに顔のランドマーク検出を実現できる強力なツールです。この記事で紹介したポイントを振り返ります。
- 478個のランドマークを検出し、3D顔メッシュやブレンドシェイプを取得できる
- セットアップは簡単で、NPMまたはCDN経由でインポートするだけ
- IMAGE / VIDEOの2モードに対応し、静止画でもリアルタイム映像でも使える
- ブレンドシェイプを活用すれば、表情検出や仮想アバターの表情反映が可能
- パフォーマンスを意識する場合はWeb Workersでメインスレッドのブロックを回避する
顔フィルターや表情認識など、Face Landmarkerを使ったアプリケーションはアイデア次第で幅広く展開できます。まずは公式のサンプルコードを動かしてみるところから始めてみてください。
