MediaPipe動画・カメラ入門：detectForVideoと停止処理を動かす

<!doctype html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="noindex"><title>MediaPipeで動画の顔検出を動かす | 猫の手ツール</title><style>:root{font-family:system-ui,sans-serif;color:#17243c;background:#eef2f8}*{box-sizing:border-box}body{margin:0}main{max-width:1080px;margin:auto;padding:28px 20px}h1{font-size:clamp(1.7rem,5vw,2.4rem)}p{line-height:1.8}button,input,select,textarea{font:inherit}button{background:#4338ca;color:white;border:0;border-radius:8px;padding:12px 18px;cursor:pointer}button:disabled{opacity:.55;cursor:wait}label{display:block;font-weight:650;margin:12px 0 6px}textarea{width:100%;min-height:100px;padding:12px;border:1px solid #aab7ce;border-radius:8px}select,input[type=file]{max-width:100%;padding:8px}section,.box{background:white;border:1px solid #dbe1eb;border-radius:14px;padding:18px;margin:18px 0}.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center}#status{border-left:4px solid #4338ca;padding:14px;background:white;min-height:54px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}canvas,video{max-width:100%;height:auto;display:block;border-radius:8px;background:#14243b}table{border-collapse:collapse;width:100%;font-size:.9rem}th,td{text-align:left;border-bottom:1px solid #dbe1eb;padding:10px}pre{background:#12203a;color:#e0e8ff;padding:16px;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:420px;overflow:auto}.scroll{overflow:auto}meter{width:160px;max-width:100%}a{color:#4338ca}small{color:#53637d}button:focus-visible,a:focus-visible{outline:3px solid #e99a23;outline-offset:3px}@media(max-width:640px){.grid{grid-template-columns:1fr}main{padding:18px 12px}section{padding:14px}}</style></head><body><main><p><a href="./README.txt">起動手順を開く</a></p><h1>MediaPipeで動画の顔検出を動かす</h1><p>AI生成の人物写真からブラウザ内でテスト動画を作成し、実際の動画要素に対して顔検出を実行します。カメラは専用ボタンを押した場合だけ使用します。</p><section><h2>実行する</h2><div class="controls"><button id="run-button">写真からテスト動画を作って検出</button><button id="camera-button">自分のカメラで試す</button><button id="stop-button" disabled>停止する</button></div><p><small>テスト動画は音声なし・約4秒です。カメラはHTTPSまたはlocalhostで、ブラウザの許可が必要です。</small></p></section><p id="status" role="status" aria-live="polite">準備できました。ボタンを押すとSDK・モデルを読み込みます。</p><div class="grid"><section><h2>入力動画</h2><video id="input-video" muted playsinline controls width="640" height="480"></video></section><section><h2>検出結果</h2><canvas id="result-canvas" width="640" height="480"></canvas></section></div><section><h2>フレームの記録</h2><p id="metrics">未実行</p></section><section><h2>実際の出力JSON・検証条件</h2><pre id="json-output">まだ実行していません。</pre></section><p><small>推論はブラウザ内で行います。SDK・モデル取得のためCDN / Googleの公開ストレージへ接続します。入力データを送信する処理はありません。記事の検証日：2026年10月12日。</small></p></main><script type="module" src="./app.js"></script></body></html>

const VERSION = '0.10.34';
const BASE = `https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@${VERSION}`;
const MODEL = 'https://storage.googleapis.com/mediapipe-models/face_detector/blaze_face_full_range/float16/1/blaze_face_full_range.tflite';
const run = document.querySelector('#run-button');
const camera = document.querySelector('#camera-button');
const stop = document.querySelector('#stop-button');
const status = document.querySelector('#status');
const video = document.querySelector('#input-video');
const canvas = document.querySelector('#result-canvas');
const context = canvas.getContext('2d');
const metrics = document.querySelector('#metrics');
const json = document.querySelector('#json-output');
let detector, delegate, sourceStream, recordingStream, recordingTimer, recorder, videoUrl;
let frameRequest = 0, lastVideoTime = -1, active = false, token = 0, frames = [];
let cameraOperation = null;

async function prepare() {
  if (detector) return;
  const { FaceDetector, FilesetResolver } = await import(`${BASE}/vision_bundle.mjs`);
  const files = await FilesetResolver.forVisionTasks(`${BASE}/wasm`);
  const create = choice => FaceDetector.createFromOptions(files, {
    baseOptions: { modelAssetPath: MODEL, delegate: choice }, runningMode: 'VIDEO', minDetectionConfidence: .5,
  });
  try { detector = await create('GPU'); delegate = 'GPU'; }
  catch { detector = await create('CPU'); delegate = 'CPU'; }
}

function setControls(running) { run.disabled = camera.disabled = running; stop.disabled = !running; }
function stopTracks(stream) { stream?.getTracks().forEach(track => track.stop()); }
function finish(message = '停止しました。最後の結果を表示しています。') {
  active = false; ++token;
  cameraOperation = null;
  cancelAnimationFrame(frameRequest); clearInterval(recordingTimer);
  if (recorder?.state === 'recording') recorder.stop();
  stopTracks(recordingStream); recordingStream = null;
  stopTracks(sourceStream); sourceStream = null;
  video.pause(); video.srcObject = null;
  setControls(false); status.textContent = message;
}

async function makeTestVideo(operation) {
  if (!window.MediaRecorder || !HTMLCanvasElement.prototype.captureStream) {
    throw new Error('このブラウザはCanvasからテスト動画を作るAPIに対応していません');
  }
  const image = new Image(); image.src = './person.jpg'; await image.decode();
  if (operation !== token) throw new Error('処理を停止しました');
  const source = document.createElement('canvas'); source.width = 640; source.height = 480;
  const ctx = source.getContext('2d');
  let frame = 0;
  const draw = () => {
    ctx.fillStyle = '#112240'; ctx.fillRect(0, 0, 640, 480);
    const scale = Math.min(590 / image.naturalWidth, 430 / image.naturalHeight);
    const w = image.naturalWidth * scale, h = image.naturalHeight * scale;
    ctx.drawImage(image, (640 - w) / 2 + Math.sin(frame++ / 8) * 18, (480 - h) / 2, w, h);
    ctx.fillStyle = 'white'; ctx.font = '18px sans-serif'; ctx.fillText('AI人物写真から作ったテスト動画 / 音声なし', 14, 466);
  };
  draw(); recordingStream = source.captureStream(20);
  const mimeType = ['video/webm;codecs=vp9', 'video/webm;codecs=vp8', 'video/mp4', 'video/webm']
    .find(type => MediaRecorder.isTypeSupported(type));
  recorder = new MediaRecorder(recordingStream, mimeType ? { mimeType } : undefined);
  const chunks = [];
  recorder.addEventListener('dataavailable', event => { if (event.data.size) chunks.push(event.data); });
  const blob = await new Promise((resolve, reject) => {
    recorder.addEventListener('stop', () => {
      clearInterval(recordingTimer); stopTracks(recordingStream); recordingStream = null;
      resolve(new Blob(chunks, { type: recorder.mimeType }));
    }, { once: true });
    recorder.addEventListener('error', event => reject(event.error || new Error('録画に失敗しました')), { once: true });
    recorder.start(); recordingTimer = setInterval(draw, 50);
    const currentRecorder = recorder;
    setTimeout(() => { if (currentRecorder.state === 'recording') currentRecorder.stop(); }, 4000);
  });
  if (operation !== token) throw new Error('処理を停止しました');
  return blob;
}

function inferFrame() {
  if (!active) return;
  // 同じ動画フレームは重ねて処理せず、約10回/秒に間引きます。
  const now = performance.now();
  const lastTimestamp = frames.at(-1)?.timestampMs ?? -Infinity;
  if (video.readyState >= 2 && video.currentTime !== lastVideoTime && now - lastTimestamp >= 100) {
    lastVideoTime = video.currentTime;
    canvas.width = video.videoWidth; canvas.height = video.videoHeight;
    const start = performance.now();
    let result;
    try { result = detector.detectForVideo(video, now); }
    catch (error) { console.error(error); finish(`動画の推論に失敗しました：${error.message}`); return; }
    const elapsedMs = performance.now() - start;
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
    context.strokeStyle = '#2af79c'; context.lineWidth = 3;
    for (const detection of result.detections) {
      const b = detection.boundingBox; if (b) context.strokeRect(b.originX, b.originY, b.width, b.height);
    }
    frames.push({ videoTimeSeconds: video.currentTime, timestampMs: now, elapsedMs,
      faceCount: result.detections.length });
    if (frames.length > 120) frames.shift();
    metrics.textContent = `${delegate} / 記録 ${frames.length} フレーム / 顔 ${result.detections.length} 件 / 最新 ${elapsedMs.toFixed(2)} ms`;
    json.textContent = JSON.stringify({ sdkVersion: VERSION, model: MODEL, delegate,
      videoSize: [video.videoWidth, video.videoHeight], userAgent: navigator.userAgent,
      recentFrames: frames, lastResult: result }, null, 2);
  }
  frameRequest = requestAnimationFrame(inferFrame);
}

async function start(useCamera) {
  finish(); const operation = ++token; setControls(true); frames = []; lastVideoTime = -1;
  cameraOperation = useCamera ? operation : null;
  try {
    status.textContent = 'SDK・WASM・モデルを準備しています。'; await prepare();
    if (operation !== token) return;
    if (useCamera && document.hidden) { finish('画面が非表示のためカメラを開始しません。'); return; }
    if (videoUrl) { URL.revokeObjectURL(videoUrl); videoUrl = null; }
    if (useCamera) {
      if (!navigator.mediaDevices?.getUserMedia) throw new Error('HTTPSまたはlocalhostで開いてください');
      status.textContent = 'カメラの許可を確認しています。音声は取得しません。';
      const stream = await navigator.mediaDevices.getUserMedia({ video: { width: { ideal: 640 }, height: { ideal: 480 }, facingMode: 'user' }, audio: false });
      // 許可画面を待つ間に停止・タブ切替された場合も、取得したカメラを残しません。
      if (operation !== token || document.hidden) {
        stopTracks(stream);
        if (operation === token) finish('画面が非表示になったためカメラを停止しました。');
        return;
      }
      sourceStream = stream; video.removeAttribute('src'); video.srcObject = stream;
    } else {
      status.textContent = '人物写真から約4秒のテスト動画を作っています（カメラは使いません）。';
      const blob = await makeTestVideo(operation); videoUrl = URL.createObjectURL(blob); video.src = videoUrl;
    }
    await video.play(); if (operation !== token) return;
    active = true; status.textContent = '動画を再生して、約10回/秒で顔検出しています。'; inferFrame();
  } catch (error) {
    console.error(error); if (operation === token) finish(`実行できませんでした：${error.message}`);
  }
}
run.addEventListener('click', () => start(false));
camera.addEventListener('click', () => start(true));
stop.addEventListener('click', () => finish());
video.addEventListener('ended', () => finish(`テスト動画を最後まで処理しました。記録 ${frames.length} フレーム。`));
document.addEventListener('visibilitychange', () => {
  if (document.hidden && (sourceStream || cameraOperation !== null)) {
    finish('画面が非表示になったためカメラの開始・使用を停止しました。');
  }
});
window.addEventListener('pagehide', () => { finish(); detector?.close(); detector = null; if (videoUrl) URL.revokeObjectURL(videoUrl); });