🎬 はじめに
今回紹介するのは、動画内の手の形状をMediaPipeで検出して、3Dで可視化するStreamlitアプリです。手の形状の計測は三次元動作解析装置でもなかなか難しいですが、禁煙ではMediaPipeのような有益なアプリを使うことで比較的簡単に実装することが可能です。
研究・教育・インタフェース開発など、多くの分野で活用できるのではないかと考えています。ただ、出てきたデータをどう解析するかという点については未知数です（数字データをcsvで出力できるよううにアプリは作成しています。）。
MediaPipeには今までの記事（http://ktr-project.net/?p=46）でも使っていた全身モデルと手に特化したモデルがあります。今回は後者のモデルについて使い倒していきましょう。
このアプリでできること
- ✅ アップロードした動画の任意のフレームから手のランドマーク（x, y, z）を取得
- ✅ Matplotlibで3Dの手の形状をプロット（X=左右, Y=上下, Z=奥行）
- ✅ 座標情報をCSVでダウンロード可能
誰でもブラウザから試せるようにStreamlitでアプリ化しており、特別な環境なしで簡単に実行できます。ただし、投入する動画データのサイズにはご留意してもらえると幸いです（Streamlitのクラウド環境のメモリの問題）
想定するユースケース
| 分野 | 活用例 |
|---|---|
| 研究 | 指や手の可動域、動作評価の可視化・定量化 |
| 教育コンテンツ | 解剖学や手指の運動学習用の教材 |
| ジェスチャー解析 | HCI・VR/ARデバイス向けの開発支援 |
| 動画分析研究 | モーションキャプチャの代替ツール |
使い方はこれだというのはまだあまり私自身もイメージできてはいませんが、使い方はいろいろあるのではないかと考えています。
🛠 使用技術と構成
- Python 3.9+
- MediaPipe Hands
- OpenCV / Matplotlib / Pandas
- Streamlit
動画は任意のフレームをスライダーで選択し、その時点の手の姿勢を3D表示します。MediaPipeの推定結果に対して、
- X軸：左右
- Y軸：上下（補正あり）
- Z軸：奥行（反転補正）
としてプロットを行うことで、動画と同じ視覚的印象で立体構造が確認可能です。
📸 画面イメージ
動画の中で、手として認識されていれば、該当の側の手の骨格座標が下記のように出力されます。これは座っているときの右手の画像になります。
手をきれいに撮影することが、きれいに骨格推定を行う上で必須になるため、机上で手を大きく映すように撮影するのがコツだと思います。
📦 アプリの使い方
.mp4,.mov,.avi形式の動画ファイルをアップロード- フレームをスライダーで選ぶ
- Process this frame ボタンを押す
- 3D表示 & CSV座標ダウンロード(出力される座標はこちら：https://mediapipe.readthedocs.io/en/latest/solutions/hands.html)
CSVには、21点の3次元座標（x, y, z）が含まれます。これらは相対座標系なので、絶対座標ではないという点はご留意ください。
💡 補足ポイント
- MediaPipeの
handednessは左右反転することがあるため、補正を加えて実際の右手・左手に一致させています - さらに、Y/Z軸の反転も行い、直感的に理解できる空間表示を実現しています
- あくまで静止フレームの抽出に絞ることで、動作が軽く、エラーも少ないです。
- しかしながら、このアプリが該当の画像を【手】として認識する必要があるため投入する動画の前提としては、きれいに手を映しておく必要があります。
🌐 デモアプリ（Streamlit Cloud）
🔗 アプリのURLはこちら：https://handtrackmediapipe-ob6gsxurdoadyya62bs9zq.streamlit.app/
📁 GitHubとコード
ソースコードはこちらにて公開中：
🔗 https://github.com/43taro108/hand_track_mediapipe
🔚 おわりに
MediaPipeの精度とStreamlitの手軽さを組み合わせることで、研究にも趣味にも活かせる手指可視化ツールが完成しました。使い道はユーザー次第なので、いろいろと使ってみて試してみてほしいです。良い使い方などがありましたら、Xなどでも教えていただきたく存じます。可能であれば解析プログラムとして実装したいと思います。
環境構築は特に必要なく誰でも直感的に使えるインタフェースを目指したので、興味がある方はぜひ試してみてください！
コメント