Javascriptで試作した様々な仕組みの話（機械学習・物理・画像や音など） / Saitama.js vol.0

Transcript

1. Javascriptで試作した様々な仕組みの話 （機械学習・物理・画像や音など） 2021年10月14日 (木) Saitama.js vol.0 @オンライン 　　豊田 陽介 (

   @youtoy )

2. 豊田陽介（@youtoy） 自己紹介 普段は、某通信会社勤務 Microsoft MVP （2021年10月より ） ガジェット好き その他 IT系イベント主催、運営や登壇なども

   子ども向けの活動いろいろ（IT系以外も） プライベートでの活動 ビジュアルプログラミング・ IoTに関するコミュニティなど

3. 今日の話題

4. JavaScript を使い ブラウザ上でこれらを扱う

5. JavaScript 画像の機械学習 音の機械学習 VTuber的なこと 物理演算エンジン WebAR IoT系 ガジェット系

6. ここから、 技術の話と実例と

7. 【技術の部分の話1】 人を対象にした画像認識系

8. MediaPipe ・Googleさんが提供している機械学習を使った仕組み ・Python用やスマホ用、C++用などが提供されている ・MediaPipe の JavaScript版（TensorFlow.jsベース） 　・Face Mesh 　・Face Detection

   　・Hands 　・Holistic 　・Pose 　・Selfie Segmentation 　　など...

9. 認識できる対象の例（一部抜粋） Hands Face Mesh

10. 認識できる対象の例（一部抜粋） Holistic Selfie Segmentation

11. 【技術の部分の話2】 2D・3D描画

12. p5.js メディアアート系などで有名な Processing の JavaScript版 •home | p5.js 　https://p5js.org/

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

14. MediaPipe ＋ p5.js = ?

15. ブラウザ上の処理でVTuber的なこと MediaPipe Holistic（人の顔や 姿勢の認識） ＋ p5.js（画像表示系の処理）

16. ブラウザ上で両手の認識と3D描画 MediaPipe Hands（両手の認識） ＋ p5.js（WebGLベースの3D描画）

17. ブラウザ上での人物と背景の分離＋描画 MediaPipe Selfie Segmentation （人物と背景の分離） ＋ p5.js（2D・3D描画）

18. MediaPipe の 最近のアップデート

19. ブラウザ上で虹彩の位置まで検出できる！ MediaPipe Face Mesh （人の顔の検出） ＋ p5.js（2D描画）

20. 【技術の部分の話3】 音の機械学習モデル作成 ＋推論

21. Teachable Machine（画像・音声・ポーズ） Googleさんがオンラインで提供している仕組み ⇒ ブラウザ上の操作で学習ができて推論のお試しも

22. 【技術の部分の話4】 Bluetooth通信（BLE）

23. 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

24. 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

25. デバイス系のAPIについてはこんな話も •Appleがプライバシ上の理由から、NFC、Bluetooth、他14のWeb APIの実装を拒否 　https://www.infoq.com/jp/news/2020/07/apple-fingerprinting-privacy/ •Mozilla Specification Positions 　https://mozilla.github.io/standards-positions/ 自分に閉じて使うパターンではない場合、特に注意！ （ユーザが許可する操作なしに利用できないもの

    　ではあるものの...）

26. Teachable Machine ＋ Web Bluetooth API = ?

27. ブラウザで音の認識とBluetooth通信 Teachable Machine（音を対象） ＋ Web Bluetooth API

28. 共同主催しているコミュニティで出展して 終了後 モノ作り系イベント（Maker Faire Tokyo 2020）で展示 体験：子どもも大人も

29. 実例メイン

30. 【技術の部分の話5】 リアルタイム通信（MQTT）

31. 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

32. MQTT ＋ p5.js = ?

33. 2台のスマホの描画連動

34. 物理演算エンジン ＋ 画像認識 ＋ p5.js = ?

35. 物理演算エンジンエンジン＋手の認識

36. ARマーカー認識 ＋ p5.js = ?

37. ARマーカー認識＋2D描画

38. イベントの話 x 2 （connpass に掲載）

39. ビジュアルプログラミング x IoT 再来週 10/28（木）20:00 から（視聴は YouTube にて）

40. ビジュアルプログラミング全般 3週間後、 11/2（火）19:30 から（視聴は YouTube にて）

41. 終わり！