Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブラウザ上でリアルタイム画像認識と認識結果に連動した描画(MediaPipeとp5.js) /...
Search
you(@youtoy)
PRO
September 03, 2021
Technology
0
850
ブラウザ上でリアルタイム画像認識と認識結果に連動した描画(MediaPipeとp5.js) / xTech ゆるっとLT (202109)
you(@youtoy)
PRO
September 03, 2021
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
35
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
85
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
180
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
2.5k
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
98
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
620
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
2.4k
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
5k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
1
2.7k
Other Decks in Technology
See All in Technology
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
Platform Engineeringで クラウドの「楽しくない」を解消しよう
jacopen
4
120
20250304_赤煉瓦倉庫_DeepSeek_Deep_Dive
hiouchiy
2
110
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
170
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
3.9k
Change Managerを活用して本番環境へのセキュアなGUIアクセスを統制する / Control Secure GUI Access to the Production Environment with Change Manager
yuj1osm
0
110
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
160
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
210
EDRの検知の仕組みと検知回避について
chayakonanaika
12
5.2k
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
200
JAWS DAYS 2025 アーキテクチャ道場 事前説明会 / JAWS DAYS 2025 briefing document
naospon
0
2.6k
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
210
Featured
See All Featured
BBQ
matthewcrist
87
9.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Facilitating Awesome Meetings
lara
53
6.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Transcript
ブラウザ上でリアルタイム画像認識と 認識結果に連動した描画(MediaPipeとp5.js) 2021年9月3日 (金) xTech ゆるっとLT: Fukuoka.php and AR_Fukuoka @オンライン
豊田 陽介 ( @youtoy )
豊田陽介(@youtoy) 自己紹介 普段は、某通信会社の研究所勤務 自宅にたくさん ビジュアルプログラミング、 IoT関連、その他の複数の コミュニティを主催 ガジェット好き その他 IT系イベント主催、登壇や運営なども
子ども向けの活動いろいろ(IT系以外も) プライベートでの活動
技術雑誌で連載中(機械学習関連) ・Googleさんの Teachable Machine に関する記事 ⇒ 全4回のうち 2回目まで月刊I/O に掲載済
いきなり余談から
最近作ってみたものの1つ ビジュアルプログラミング を使って刀(ダイソーで 200円)を光らせる
イベント中にさくっと試作したもの Scratch 3.0 のビデオ モーションセンサーを 使って花火を打ち上げ
以前、雑にピクトグラムになってみたやつ ビジュアルプログラミング を使って(Scratch 3.0+独自 拡張「PoseNet2Scratch」)
ガジェットを使うものとか インタラクティブな作品が好き
面白そうと思うものに 幅広く手を出してみたりする
ちょこちょこ動画をアップしています ここ 2ヶ月の間に作ってアップしたもの
ここ2ヶ月の動画に関連するキーワード p5.js、MediaPipe Holistic、Scratch 3.0、M5stamp Pico、MQTT、 micro:bit、MakeCode、Grove、LEDテープ、Alexa、toio、 アルファチャンネル付動画、色画用紙の工作あそび・しかけ付カード、 Arduino MKR Wifi
1010、MediaPipe Selfie Segmentation、 Handtrack.js、MediaPipe Pose、PoseNet2Scratch、Node-RED、 はじめてゲームプログラミング、MediaPipe Hands、M5Stack、UIFlow
その中で頻出している「MediaPipe」 p5.js、MediaPipe Holistic、Scratch 3.0、M5stamp Pico、MQTT、 micro:bit、MakeCode、Grove、LEDテープ、Alexa、toio、 アルファチャンネル付動画、色画用紙の工作あそび・しかけ付カード、 Arduino MKR Wifi
1010、MediaPipe Selfie Segmentation、 Handtrack.js、MediaPipe Pose、PoseNet2Scratch、Node-RED、 はじめてゲームプログラミング、MediaPipe Hands、M5Stack、UIFlow
今日の本題の1つ
「MediaPipe」とは? ・Googleさんが提供している機械学習を使った仕組み ・Python用やスマホ用、C++用などが提供されている ・MediaPipe の JavaScript版(TensorFlow.jsベース) ・Face Mesh ・Face Detection
・Hands ・Holistic ・Pose ・Selfie Segmentation など...
認識できる対象の例(一部抜粋) Hands Face Mesh
認識できる対象の例(一部抜粋) Holistic Selfie Segmentation
自分がよく使う機械学習系の技術 (Teachable Machine も好き)
JavaScript版は ブラウザ上で動作
実現できることの例
人と背景とを分離(Selfie Segmentation) 普通の PC内蔵カメラで 撮った画像で人と背景を 分離、その間に描画
背景分離の別パターン 人と背景との間への描画
両手のキーポイントを認識(Hands) 両手の位置と距離によって 立方体の描画位置と 大きさが変化
手のキーポイント認識の別パターン 動画の中に動画 + 指先の位置に...
手のキーポイント認識の別パターン2 指を曲げているか 伸ばしているかによって 画像表示を ON/OFF
顔・手・姿勢の認識(Holistic) 目・口の動きと体の 揺れをイラストに反映 (ほぼ顔の認識しか...)
デモ動画に共通すること
認識の処理と一緒に使っているのは...
今日の本題のもう1つ 描画(p5.js)
JavaScriptの描画ライブラリ「p5.js」 メディアアート系などで有名な Processing の JavaScript版 •home | p5.js https://p5js.org/
•p5.js Web Editor https://editor.p5js.org/ •OpenProcessing https://openprocessing.org/ オンラインで開発 できる環境も
2Dだけでなく3Dも 公式リファレンス
3D描画の例
余談2: ブラウザで動くので...
JavaScriptで外部デバイスとの通信 ブラウザ上で実行 Node.js ・Web Serial ・Web Bluetooth ・Fetch API ・axios等を利用
・WebSocket API ・MQTT.js等を利用 ・Node Serialport ・noble・bleno ・Fetch API ・axios等を利用 ・ws等を利用 ・MQTT.js等を利用 シリアル通信 BLE HTTPリクエスト WebSocket MQTT
JavaScriptで外部デバイスとの通信 ブラウザ上で実行 Node.js ・Web Serial ・Web Bluetooth ・Fetch API ・axios等を利用
・WebSocket API ・MQTT.js等を利用 ・Node Serialport ・noble・bleno ・Fetch API ・axios等を利用 ・ws等を利用 ・MQTT.js等を利用 シリアル通信 BLE HTTPリクエスト WebSocket MQTT
BLEと組み合わせると、例えば... カメラでとらえた人の動き (手の動き)とガジェット の動きを連動
ブラウザのデバイス系APIでの通信 ・ブラウザから BLE・シリアル通信で制御 ⇒ toio・M5Stack・micro:bit 等に対して使った例 手の動きに連動した 6台の toio の同時制御
M5Stack Core2 へ 文字送信・表示、 画面の色変更 micro:bit の加速度 (XYZ)のグラフ化
終わり!