続・Webの技術でできる様々なこと〜ブラウザで機械学習やデバイス制御など〜 / HTML5 8th Anniversary

by you（@youtoy）

Slide 1

Slide 1 text

続・Webの技術でできる様々なこと〜ブラウザで機械学習やデバイス制御など〜 2022年10月23日 (日) HTML5 8th Anniversary @オンライン豊田陽介（） @youtoy

Slide 2

Slide 2 text

自己紹介豊田陽介（） @youtoy ・IT系イベント主催、登壇や運営なども・子ども向けの活動いろいろ・ Microsoft MVP（2021/10 から）プライベートでの活動・ガジェット大好き・今年、本2冊出したり、メーカーフェア出展3回好きなことなど 3月発売（共著） 7月発売（単著）

Slide 3

Slide 3 text

スライドは公開済みなので発表中は文字などの記載を追わなくても大丈夫です

Slide 4

Slide 4 text

今回の主な内容は

Slide 5

Slide 5 text

昨年の話の一部を深掘り＋α 昨年の話に出していた内容のキーワード画像の機械学習音の機械学習 VTuber的なこと物理演算エンジン WebXR IoT系ガジェット系昨年の資料の URL

Slide 6

Slide 6 text

昨年の内容は聞いてなくてもOKです

Slide 7

Slide 7 text

先日のイベントの内容と一部は重複重複してない部分をいろいろ盛り込みつつその時の資料

Slide 8

Slide 8 text

ライブデモ多めで紹介していきます

Slide 9

Slide 9 text

本編へ

Slide 10

Slide 10 text

学習済み機械学習モデルを使った画像認識＋描画ライブラリ

Slide 11

Slide 11 text

いきなりですがデモをご覧ください

Slide 12

Slide 12 text

ライブデモ！機械学習による手の認識＋パーティクルの描画

Slide 13

Slide 13 text

【動画】ブラウザで手・指の位置検出＋p5.jsによる描画両手の指先に炎が灯っていく

Slide 14

Slide 14 text

【動画】ブラウザで手・指の位置検出＋p5.jsによる描画光学迷彩・透明マントのような表現その2

Slide 15

Slide 15 text

「MediaPipe」のJavaScript版のHands MediaPipe Hands 画像から手のキーポイントの位置（複数）を認識 ※ 指を立てたかどうかの判定は　位置座標などから自前で計算

Slide 16

Slide 16 text

TensorFlow.jsベースのためブラウザ上で動作

Slide 17

Slide 17 text

カメラ付きPCがあれば手軽にデモを作れる／試せる

Slide 18

Slide 18 text

手軽に試せる JavaScript版の公式デモも紹介

Slide 19

Slide 19 text

ここから試せます！ Hands

Slide 20

Slide 20 text

ライブでオプションの一部も説明などしつつ

Slide 21

Slide 21 text

【ライブデモ】MediaPipe Hands https://mediapipe.dev/demo/hands

Slide 22

Slide 22 text

実際に試していきます https://google.github.io/mediapipe/getting_started/javascript

Slide 23

Slide 23 text

MediaPipe JavaScript版で扱えるもの手を対象としたもの以外の一部を紹介 MediaPipe Face Mesh MediaPipe Holistic

Slide 24

Slide 24 text

ここから試せます！ https://google.github.io/mediapipe/getting_started/javascript Face Mesh Holistic

Slide 25

Slide 25 text

【ライブデモ】 https://mediapipe.dev/demo/face_mesh https://mediapipe.dev/demo/holistic

Slide 26

Slide 26 text

また先ほどのページへ https://google.github.io/mediapipe/getting_started/javascript

Slide 27

Slide 27 text

自分が作ったもののデモ！ MediaPipe Holistic による顔・上半身の認識

Slide 28

Slide 28 text

【動画】顔のキーポイント検出・姿勢推定とアニメーション目・口・体の動きとネコ画像が連動

Slide 29

Slide 29 text

描画周りも説明してみる

Slide 30

Slide 30 text

デモしたものの描画部分：p5.js メディアアート系などで有名な Processing の JavaScript版 ●home | p5.js 　https://p5js.org/

Slide 31

Slide 31 text

●p5.js Web Editor 　https://editor.p5js.org/ ●OpenProcessing 　https://openprocessing.org/ オンラインで開発できる環境も

Slide 32

Slide 32 text

炎のような見た目を作った部分

Slide 33

Slide 33 text

パーティクル・システムについてゲーム物理、モーショングラフィックス、コンピュータグラフィックなどで使われる技術のひとつで、たくさんの細かいスプライト画像、3Dモデル、またはその他のCG オブジェクトを使って、ある種の「ファジー」な現象をシミュレートするもの出典： Wikipedia「パーティクル・システム」より

Slide 34

Slide 34 text

公式デモをライブで試す

Slide 35

Slide 35 text

p5.js公式：パーティクル・システム https://p5js.org/examples/simulate-particle-system.htm

Slide 36

Slide 36 text

円が吹き出す仕組みに手を加えると... 透明度付き PNG画像に置きかえ煙が吹き出す色の加算処理（合成）炎のゆらめき？円が出てくる（基本のサンプル　でよくある）

Slide 37

Slide 37 text

煙のほう

Slide 38

Slide 38 text

シンプルな図形のパーティクルを画像にアルファチャネル付の PNG画像を利用

Slide 39

Slide 39 text

炎のような見た目

Slide 40

Slide 40 text

色の加算：単純な重ね合わせではない描画 p5.js の「blendMode()」 ADD SCREEN 重ねた色は明るくなる重ねた色は明るくなるが ADD より少し弱め単純な重畳 ADD SCREEN ※ Canvas の「globalCompositeOperation」　という API による

Slide 41

Slide 41 text

炎の見た目単体を取り出すとマウスカーソルに追従させる仕組みでお試し

Slide 42

Slide 42 text

画像からの機械学習と描画ライブラリはセットで活用しやすい

Slide 43

Slide 43 text

デバイスを連携させる話へ

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

有線・無線での通信

Slide 46

Slide 46 text

プロトタイピングに使った事例（【コンセプト】遠隔にいるネコ同士が　コミュニケーション）

Slide 47

Slide 47 text

ハッカソンで利用してみた事例の話ネコのしっぽっぽくしたジョイスティック（M5Stack ＋　　シリアル通信）ロボットトイ（toio ＋ BLE での通信）ネコのしっぽをサーボモーターで動かす仕組み（micro:bit ＋　　シリアル通信）

Slide 48

Slide 48 text

2022年9月のハッカソンでチーム開発シリアル通信と BLE をそれぞれ利用

Slide 49

Slide 49 text

システム構成（機器と通信方法） PC （Chromo） toio BLE HTML + JavaScript M5Stack Core2 ＋ジョイスティック micro:bit ＋サーボモーターシリアル通信シリアル通信

Slide 50

Slide 50 text

ブラウザ（Chrome系）があればデバイスをいっぺんに扱える

Slide 51

Slide 51 text

有線でのシリアル通信

Slide 52

Slide 52 text

シリアル通信（Web Serial API）手っ取り早く試すなら

Slide 53

Slide 53 text

こちらのページが便利 https://googlechromelabs.github.io/serial-terminal/

Slide 54

Slide 54 text

Bluetoothによる無線通信

Slide 55

Slide 55 text

Web Bluetooth API での 3つの処理・Read、Write、Notification Read Write Notification センサーの値を任意のタイミングで読み取る LED・モーターなどの制御情報を送るデバイスから通知される値を読み取る定期的な送信や状態変化の際に送信される等 ●Web Bluetooth 　https://webbluetoothcg.github.io/web-bluetooth/ ●DataView - JavaScript | MDN　 https://developer.mozilla.org/ja /docs/Web/JavaScript/Referenc e/Global_Objects/DataView ●BufferSource - Web API | MDN 　 https://developer.mozilla.org/ja/docs/We b/API/BufferSource

Slide 56

Slide 56 text

Webの技術を使ってブラウザ上で様々な仕組みを実装して楽しめます！

Slide 57

Slide 57 text

イベントの告知

Slide 58

Slide 58 text

「ガジェット」に興味がある方へ！「ガジェット・enebular」に興味がある方へ！ https://enebular.connpass.com/event/250779/ 10/27（木）オンライン開催 enebular developersコラボのイベント

Slide 59

Slide 59 text

終わり！