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

Transcript

1. 続・Webの技術でできる様々なこと 〜ブラウザで機械学習やデバイス制御など〜 2022年10月23日 (日) HTML5 8th Anniversary @オンライン 豊田陽介（ ） @youtoy
2. 自己紹介 豊田陽介（ ） @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動いろいろ ・ Microsoft MVP（2021/10 から） プライベートでの活動 ・ガジェット大好き ・今年、本2冊出したり、メーカーフェア出展3回 好きなことなど 3月発売 （共著） 7月発売 （単著）
3. スライドは公開済みなので 発表中は文字などの記載を 追わなくても大丈夫です
4. 今回の主な内容は
5. 昨年の話の一部を深掘り＋α 昨年の話に出していた内容のキーワード 画像の機械学習 音の機械学習 VTuber的なこと 物理演算エンジン WebXR IoT系 ガジェット系 昨年の資料の URL
6. 昨年の内容は 聞いてなくてもOKです
7. 先日のイベントの内容と一部は重複 重複してない部分をいろいろ盛り込みつつ その時の資料
8. ライブデモ多めで 紹介していきます
9. 本編へ
10. 学習済み機械学習モデル を使った画像認識 ＋ 描画ライブラリ
11. いきなりですが デモをご覧ください
12. ライブデモ！ 機械学習による手の認識 ＋ パーティクルの描画
13. 【動画】ブラウザで手・指の位置検出＋p5.jsによる描画 両手の指先に炎が 灯っていく
14. 【動画】ブラウザで手・指の位置検出＋p5.jsによる描画 光学迷彩・透明マント のような表現 その2
15. 「MediaPipe」のJavaScript版のHands MediaPipe Hands 画像から手のキーポイント の位置（複数）を認識 ※ 指を立てたかどうかの判定は 　 位置座標などから自前で計算
16. TensorFlow.jsベースのため ブラウザ上で動作
17. カメラ付きPCがあれば 手軽にデモを作れる／試せる
18. 手軽に試せる JavaScript版の 公式デモも紹介
19. ここから試せます！ Hands
20. ライブで オプションの一部も 説明などしつつ
21. 【ライブデモ】MediaPipe Hands https://mediapipe.dev/demo/hands
22. 実際に試していきます https://google.github.io/mediapipe/getting_started/javascript
23. MediaPipe JavaScript版で扱えるもの 手を対象としたもの以外の一部を紹介 MediaPipe Face Mesh MediaPipe Holistic
24. ここから試せます！ https://google.github.io/mediapipe/getting_started/javascript Face Mesh Holistic
25. 【ライブデモ】 https://mediapipe.dev/demo/face_mesh https://mediapipe.dev/demo/holistic
26. また先ほどのページへ https://google.github.io/mediapipe/getting_started/javascript
27. 自分が作ったもののデモ！ MediaPipe Holistic による顔・上半身の認識
28. 【動画】顔のキーポイント検出・姿勢推定とアニメーション 目・口・体の動きと ネコ画像が連動
29. 描画周りも説明してみる
30. デモしたものの描画部分：p5.js メディアアート系などで有名な Processing の JavaScript版 •home | p5.js 　https://p5js.org/
31. •p5.js Web Editor 　https://editor.p5js.org/ •OpenProcessing 　https://openprocessing.org/ オンラインで開発 できる環境も
32. 炎のような 見た目を作った部分
33. パーティクル・システムについて ゲーム物理、モーショングラフィックス、コンピュータ グラフィックなどで使われる技術のひとつで、たくさん の細かいスプライト画像、3Dモデル、またはその他のCG オブジェクトを使って、ある種の「ファジー」な現象を シミュレートするもの 出典： Wikipedia「パーティクル・システム」より
34. 公式デモを ライブで試す
35. p5.js公式：パーティクル・システム https://p5js.org/examples/simulate-particle-system.htm
36. 円が吹き出す仕組みに手を加えると... 透明度付き PNG画像に 置きかえ 煙が 吹き出す 色の 加算処理 （合成） 炎の ゆらめき？ 円が出てくる （基本のサンプル 　でよくある）
37. 煙のほう
38. シンプルな図形のパーティクルを画像に アルファチャネル付 の PNG画像を利用
39. 炎のような見た目
40. 色の加算：単純な重ね合わせではない描画 p5.js の「blendMode()」 ADD SCREEN 重ねた色は明るくなる 重ねた色は明るくなるが ADD より少し弱め 単純な 重畳 ADD SCREEN ※ Canvas の「globalCompositeOperation」 　 という API による
41. 炎の見た目単体を取り出すと マウスカーソルに追従させる仕組みでお試し
42. 画像からの機械学習と 描画ライブラリは セットで活用しやすい
43. デバイスを 連携させる話へ
44. 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
45. 有線・無線での通信
46. プロトタイピングに使った事例 （【コンセプト】遠隔にいるネコ同士が 　コミュニケーション）
47. ハッカソンで利用してみた事例の話 ネコのしっぽ っぽくした ジョイスティック （M5Stack ＋ 　　シリアル通信） ロボットトイ （toio ＋ BLE での通信） ネコのしっぽ をサーボモーター で動かす仕組み （micro:bit ＋ 　　シリアル通信）
48. 2022年9月のハッカソンでチーム開発 シリアル通信と BLE をそれぞれ利用
49. システム構成（機器と通信方法） PC （Chromo） toio BLE HTML + JavaScript M5Stack Core2 ＋ ジョイスティック micro:bit ＋ サーボモーター シリアル 通信 シリアル 通信
50. ブラウザ（Chrome系）があれば デバイスをいっぺんに扱える
51. 有線でのシリアル通信
52. シリアル通信（Web Serial API） 手っ取り早く試すなら
53. こちらのページが便利 https://googlechromelabs.github.io/serial-terminal/
54. Bluetoothによる無線通信
55. 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
56. Webの技術を使って ブラウザ上で様々な仕組みを 実装して楽しめます！
57. イベントの告知
58. 「ガジェット」に興味がある方へ！ 「ガジェット・enebular」に興味がある方 へ！ https://enebular.connpass.com/event/250779/ 10/27（木） オンライン開催 enebular developersコラボのイベント
59. 終わり！