Face Tracking App

ブラウザ上で動作するフェイストラッキングWebアプリです。カメラ映像にGIFアニメーションオーバーレイや背景差し替えをリアルタイムで適用できます。

機能

• フェイストラッキング — MediaPipe Face Landmarker による468点のランドマーク検出
• GIFオーバーレイ — 顔の位置・回転に追従してGIF画像を重ねる
• 背景差し替え — Selfie Segmentation で人物を切り抜き、背景をGIF/画像に置換
• デバッグ表示 — 顔・ボディ・ハンドの特徴点とボーンをリアルタイム描画
• 映像出力 — ポップアウトウィンドウ（OBSウィンドウキャプチャ対応）
• 録画 — Canvas映像をWebMファイルとして保存

デモ

GitHub Pages: https://<username>.github.io/face-tracking-app/

環境構築

前提条件

• Node.js v18 以上
• Python 3.x（ローカルサーバー用）
• Webカメラ

1. リポジトリをクローン

git clone https://github.com/Sunmax0731/face-tracking-app.git
cd face-tracking-app

2. 依存パッケージのインストール

npm install

3. MediaPipe モデルファイルの取得

モデルファイルはファイルサイズが大きいため、リポジトリには含まれていない場合があります。 models/ ディレクトリに以下のファイルが存在しない場合は手動でダウンロードしてください。

mkdir -p models

# Face Landmarker (約3.6MB)
curl -L -o models/face_landmarker.task \
  "https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task"

# Selfie Segmenter (約244KB)
curl -L -o models/selfie_segmenter.tflite \
  "https://storage.googleapis.com/mediapipe-models/image_segmenter/selfie_segmenter/float16/latest/selfie_segmenter.tflite"

# Pose Landmarker (約5.6MB)
curl -L -o models/pose_landmarker_lite.task \
  "https://storage.googleapis.com/mediapipe-models/pose_landmarker/pose_landmarker_lite/float16/latest/pose_landmarker_lite.task"

# Hand Landmarker (約7.5MB)
curl -L -o models/hand_landmarker.task \
  "https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/latest/hand_landmarker.task"

4. MediaPipe WASM ランタイムの取得

wasm/ ディレクトリに以下のファイルが存在しない場合はダウンロードしてください。

mkdir -p wasm

# WASM バイナリ (各約9MB)
curl -L -o wasm/vision_wasm_internal.wasm \
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.14/wasm/vision_wasm_internal.wasm"

curl -L -o wasm/vision_wasm_nosimd_internal.wasm \
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.14/wasm/vision_wasm_nosimd_internal.wasm"

# WASM JS ローダー
curl -L -o wasm/vision_wasm_internal.js \
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.14/wasm/vision_wasm_internal.js"

curl -L -o wasm/vision_wasm_nosimd_internal.js \
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.14/wasm/vision_wasm_nosimd_internal.js"

5. ビルド

npm run build

6. ローカルサーバーで起動

python serve.py

ブラウザで http://localhost:8080 を開いてください。

使い方

1. カメラ起動 — サイドバーの「カメラ起動 & 初期化」ボタンを押す
2. GIFオーバーレイ — 「Face Overlay」のドロップゾーンにGIFをドラッグ＆ドロップし「有効」をON
3. 背景差し替え — 「Background」のドロップゾーンに画像をドラッグ＆ドロップし「有効」をON
4. デバッグ表示 — 「Debug」カードで顔/ボディ/ハンドの特徴点表示を切り替え

OBS 仮想カメラ連携

1. 「映像を別ウィンドウで開く」をクリック
2. OBS で「ソース」→「ウィンドウキャプチャ」を追加
3. ウィンドウ一覧から「Face Tracking Output」を選択
4. OBS メニューの「仮想カメラ開始」をクリック
5. Zoom / Discord 等のカメラ設定で「OBS Virtual Camera」を選択

技術スタック

項目	技術
フェイストラッキング	MediaPipe Face Landmarker
ボディトラッキング	MediaPipe Pose Landmarker
ハンドトラッキング	MediaPipe Hand Landmarker
人物セグメンテーション	MediaPipe Selfie Segmenter
GIFデコード	ImageDecoder API (WebCodecs)
ビルド	esbuild + TypeScript
ローカルサーバー	Python http.server

ライセンス

MIT