MediaPipe Tasks API × p5.js

カメラ入力実験・最小サンプル 2種類

iMacのカメラで試せる教材です。サンプルコードは各ページで表示・コピーでき、単体HTMLとしても使えます。

01 Hand Landmarker

手の21点を表示

カメラ映像に手の特徴点を重ねます。指先の座標を利用するための基本形です。

デモとソースコードを見る
02 Gesture Recognizer

ジェスチャー認識

グー・パー・サムズアップなどのジェスチャー名と確信度を表示します。

デモとソースコードを見る

実行方法

  1. Cloudflare PagesにZIPをアップロード
  2. HTTPSでアクセスしてカメラを許可
  3. 外部CDNとGoogleのモデル配信先へのネット接続が必要

「サンプルHTMLを開く」は実際の最小コードを単独で実行するページです。授業での改造・コピーはそちらのコードを使用してください。