リアルタイム検出ループの仕組み

`requestAnimationFrame`を使用して、ブラウザのリフレッシュレートに同期した検出処理を実装しています。約60 FPS（1秒間に60フレーム）で動作します。
let detectionLoopId = null; // 検出ループのID
// 検出ループの開始
async function detectFaces() {
    try {
        // 顔検出の実行
        const faces = await detector.estimateFaces(video);
        // キャンバスをクリア
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // 検出人数を更新
        updateFaceCount(faces.length);
        if (faces.length > 0) {
            // 顔の描画処理...
        }
        // 次のフレームをスケジュール
        detectionLoopId = requestAnimationFrame(detectFaces);
    } catch (error) {
        console.error('顔検出中にエラーが発生:', error);
    }
}
// 検出ループを開始
detectFaces();
検出ループ: 0回実行中
フレーム1: 顔検出 → 描画 → 次のフレームへ
フレーム2: 顔検出 → 描画 → 次のフレームへ
フレーム3: 顔検出 → 描画 → 次のフレームへ
↓ このループが約60回/秒で繰り返されます ↓
ループの流れ:
1. detectFaces()が呼ばれる
2. detector.estimateFaces(video)で顔を検出
3. キャンバスをクリアして結果を描画
4. requestAnimationFrame(detectFaces)で次のフレームをスケジュール
5. ブラウザのリフレッシュレートに合わせて自動的に繰り返し
重要なポイント: カメラを切り替える際は、cancelAnimationFrame(detectionLoopId)で既存のループをキャンセルする必要があります。複数のループが同時に実行されると、パフォーマンスが大幅に低下します。