Webアプリケーション

リアルタイム身体トラッキング機能

ブラウザカメラから33点の身体ランドマークを検出し、スクワット回数を自動カウント。
防犯用途への拡張提案も実施。

Duration

短期開発

Team

1名

Investment

10〜20万円

Engineered With JavaScriptMediaPipe Tasks VisionHTML/CSSGitHub Pages

01 // OVERVIEW

プロジェクト概要

ブラウザ上のカメラ映像からリアルタイムで身体の動きを検出し、動作分析・レップカウントを自動化するWeb機能。
フレームワーク不要のVanilla JS実装で、GitHub Pagesにデモをホスティング。
クライアントへの納品後、防犯カメラ用途への拡張案件にも発展。

02 // KEY FEATURES

accessibility_new

MediaPipe Pose Landmarkerによる33点の身体ランドマーク検出。スクワットカウンター機能を搭載し、運動回数を自動カウント。

face

468点の顔メッシュをリアルタイムで検出。表情分析や顔の向き推定に応用可能。

pan_tool

両手各21点のハンドトラッキング。指の動きや手のジェスチャーを高精度に検出。

all_inclusive

Pose・Face・Handsの全モードを同時実行。フロント/バックカメラの切り替えにも対応。

03 // TECHNICAL DEEP-DIVE

膝の角度をフレームごとに計算し、スムージング処理を適用。下降時100度・上昇時160度の閾値でスクワット1回を自動判定。誤検出を防ぐヒステリシス設計。

Vanilla JavaScript + MediaPipe CDNのみで構築。ビルドステップ不要で、HTMLファイルを開くだけで動作。GPU delegateによりリアルタイム性能を確保。

施設内の不審行動検出への転用相談を受け、YOLOv8-Poseとの組み合わせ、時系列分類の必要性を助言。検証ファーストのアプローチを提案。

04 // IMPACT & RESULTS

33点

身体ランドマーク

納品済

クライアント向け

発展

防犯案件に拡張

同じようなシステムを構築したいですか？まずはお気軽にご相談ください。