Svelte 応用: MediaPipe で Web カメラ映像をジェスチャー認識する

<script lang="ts">
	/** Webcam による映像キャプチャを開始するためのフラグ */
	export let active: boolean = false;

	/** video 要素の bind 用 */
	export let videoElem: HTMLVideoElement | undefined;

	$: if (active) {
		startCapture();
	}

	function startCapture() {
		// Web カメラのストリームを取得して video 要素に紐付ける
		navigator.mediaDevices
			.getUserMedia({ video: true })
			.then((mediaStream: MediaStream) => {
				if (videoElem) {
					videoElem.srcObject = mediaStream;
					videoElem.play();
				}
			})
			.catch((err) => {
				console.error('Web カメラの取得に失敗しました:', err);
			});
	}
</script>

<video id="webcam" bind:this={videoElem} playsinline>
	<!-- Web カメラの入力映像を表示するのでキャプションは存在しない -->
	<track kind="captions" src="" default />
</video>

<style>
	#webcam {
		width: 640px;
		max-width: 100%;
		transform: scaleX(-1); /* 映像を左右反転 */
	}
</style>

const renderLoop = () => {
	const result = recognizer.recognizeForVideo(videoElem, Date.now());
	onFrame(result);
	requestAnimationFrame(renderLoop);
};

import {
	GestureRecognizer,
	FilesetResolver,
	type GestureRecognizerResult
} from '@mediapipe/tasks-vision';

/**
 * video 要素からの入力映像の解析を開始します。
 * フレームごとの認識結果はコールバック関数 `onFrame` に渡されます。
 */
export async function startRecognition(
	videoElem: HTMLVideoElement,
	onFrame: (result: GestureRecognizerResult) => void
): Promise<void> {
	const recognizer: GestureRecognizer = await createGestureRecognizer();

	// 入力映像のフレームごとの認識処理
	const renderLoop = () => {
		const result = recognizer.recognizeForVideo(videoElem, Date.now());
		onFrame(result);
		requestAnimationFrame(renderLoop);
	};

	// video 要素からのデータが取得できたらフレーム処理開始
	videoElem.addEventListener('loadeddata', renderLoop);
}

/**
 * MediaPipe のジェスチャー認識器を作成します。
 */
async function createGestureRecognizer(): Promise<GestureRecognizer> {
	const vision = await FilesetResolver.forVisionTasks(
		'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm'
	);
	return await GestureRecognizer.createFromOptions(vision, {
		baseOptions: {
			modelAssetPath:
				'https://storage.googleapis.com/mediapipe-models/gesture_recognizer/gesture_recognizer/float16/1/gesture_recognizer.task',
			delegate: 'GPU'
		},
		numHands: 2,
		runningMode: 'VIDEO'
	});
}

<script lang="ts">
	import type { GestureRecognizerResult } from '@mediapipe/tasks-vision';
	import WebcamVideo from '$lib/WebcamVideo.svelte';
	import { startRecognition } from '$lib/recognizer';

	let videoElem: HTMLVideoElement;
	let buttonElem: HTMLButtonElement;
	let isWebcamEnabled = false;

	$: if (isWebcamEnabled) {
		startRecognition(videoElem, processResult);
		buttonElem.disabled = true; // ボタンを無効化
		//buttonElem.style.display = 'none'; // ボタンを消す
	}

	// 以下は認識結果の表示用
	let categoryName1: string = '?'; // 1 つ目の手の形状（カテゴリ）
	let categoryName2: string = '?'; // 2 つ目の手の形状（カテゴリ）
	let score1 = 0.0; // 1 つ目のカテゴリのスコア
	let score2 = 0.0; // 2 つ目のカテゴリのスコア

	function processResult(result: GestureRecognizerResult) {
		const category1 = result.gestures.at(0)?.at(0);
		const category2 = result.gestures.at(1)?.at(0);
		categoryName1 = category1?.categoryName ?? '?';
		categoryName2 = category2?.categoryName ?? '?';
		score1 = category1?.score ?? 0.0;
		score2 = category2?.score ?? 0.0;
	}
</script>

<h1>MediaPipe Demo</h1>
<div>
	<WebcamVideo bind:videoElem active={isWebcamEnabled} />
</div>
<button bind:this={buttonElem} on:click={() => (isWebcamEnabled = true)}
	>Web カメラによる認識を開始</button
>
<ul>
	<li>手の形1: {categoryName1} (信頼度: {score1.toFixed(2)})</li>
	<li>手の形2: {categoryName2} (信頼度: {score2.toFixed(2)})</li>
</ul>