4年半くらい前に情報を見かけてデモを軽く試してみたり、4年弱くらい前に自分の試作に取り入れ始めたりして、その後、長らく活用している Googleさんの「MediaPipe」の話題です。

●MediaPipe ソリューションガイド | Google AI Edge | Google AI for Developers
　https://ai.google.dev/edge/mediapipe/solutions/guide?hl=ja

初めて試作に取り入れてみた時は、以下のようなお試しをしていたようでした。

その後、描画ライブラリ（特に p5.js）にも興味を持ちはじめて、p5.js と MediaPipe を組み合わせたものを中心に、あれこれ試作したりしています。
（MediaPipe とガジェットの組み合わせなど、MediaPipe と別の技術・デバイスの組み合わせ、というのをいろいろ試していたりします）

以下は、複数の試作の中の 1つです。
MediaPipe と他の技術を組み合わせて試作したものは、Web上で動画を公開してみたり、他に、モノ作り系・子ども向けの複数の体験展示イベントで活用したりしています。

MediaPipe について

使い始めた当初から今までに、MediaPipe について機能追加やモデルの追加があったりして、その後に大きな変更もあったりしました。

その流れや、ここ最近の情報をざっくり見てはいるものの、最近の情報をまとめて記載するということはやっていなかった気がします。

そこで、記事執筆時点での MediaPipe の情報で、自分がよく使う Web版の情報をざっくりとピックアップした記事を書いてみようと思います。

今回、大枠のところと、簡単に体験できるデモ版の話を取り上げます。

Web版で使える内容（大枠）

上で「大きな変更があった」と書いていた前後の内容を、まずは見てみようと思います。

そのあたりは、「MediaPipe ソリューションガイド」の一覧表を見てみるのが分かりやすいです。

利用可能なソリューションという部分の、以下の表を見てみると、Web版で提供されている機能が一覧で確認できます。

画像、音声、テキストを処理対象とした内容が並んでいます。

上記の表にあるリンクから個々の内容を見ることができます。
個々の内容を確認する方法について、それ以外に、以下の「MediaPipe Studio」を見る方法もあります。

●MediaPipe Studio | Google AI Edge | Google AI for Developers
　https://ai.google.dev/edge/mediapipe/solutions/studio?hl=ja

●MediaPipe Studio
　https://mediapipe-studio.webapps.google.com/home

こちらは、概要や画像付きで各項目の内容を見ていけるので、こちらを見てみるのもオススメです。

旧バージョンの内容

ちなみに、大きな変更があった前の話は、同じページの下のほうに記載があります。

従来から提供されていたもの（Web版以外も含め）について、サポートを終了したものと、上記の新しいバージョンにアップグレードされたものとがあります。

それと、古いバージョンのリポジトリへのリンクについては、GitHub のリポジトリの以下の部分に書かれていたいたりします。

Web版を簡単に体験する

それでは、体験してみる話へと進んでみます。

上記のMediaPipe Studio のページから、1つ選んで情報を見ていく流れを記載します。

個人的に一番よく使っている「Hand Landmark Detection」を取り上げて見ていこうと思います。

「See demo」と書いてあるので、これを選んで進みます。

すると、次のページでカメラへのアクセスの許可を求められるので、試す場合は許可をしてください。

右上にカメラの映像が表示されると思うので、カメラに片手か両手を出してみましょう。

そうすると、上記のように手の特定の箇所を検出し、リアルタイムに検出結果を描画してくれます。

映像が出る左側に、設定を変える部分がありますが、とりあえずはデフォルトのままで試す感じで良いと思います。

もし複数のカメラがある場合、右上のほうにある「Input」という部分のプルダウンを選択することで、カメラの切り替えを行うこともできます。

このように試すだけならブラウザ上で簡単に行えます。

コードの内容を見ている

それと、コードのサンプルを見たい場合は、以下の Web というリンクを選びます。

そうすると、「CodePen」のサイトが開くので、ここでコードとデモを確認することができます。

●MediaPipe HandLandmarker Task for web
　https://codepen.io/mediapipe-preview/pen/gOKBGPN

他のデモ

あと、今回と同じように簡単に試せるものとして、他に以下などがあります。

MediaPipe Studio のページ上の、該当するものを選ぶことで、上記と似た流れで体験できます（他にも、同じ流れで体験できるものがいくつかあります）。

良かったら、これらなども試してみてください。