• 概要
• PC[動画(p5.js)→色情報(RGB)]→MQTT→M5→LED
  • Step1 PC側（p5.js）：ブラウザ上で動画を再生する
  • Step2 PC側（p5.js）：ブラウザ上で動画を再生しつつ色情報を取得する
  • Step3 PC側（p5.js）：ブラウザ上で動画を再生しつつ色情報を取得し、MQTTでその色情報を送る
  • Step4 M5側：受信してLEDを点灯させる
• PC[動画(p5.js)→色情報(RGB)]-UDP→M5→LED ← 今ココ
  • TCP (MQTT) と UDP の違い
  • Step5 PC側
    • Step5-1 PC側：中継サーバーの準備 (Node.js)
    • Step5-2 PC側：p5.js (sketch.js)
  • Step6 M5側：UDP受信 (step06_led_udp.ino)
• 課題

PC[動画(p5.js)→色情報(RGB)]-UDP→M5→LED

これまでは MQTT という通信方式を使ってきました。MQTTは「確実に届ける」ことや「インターネット越しに遠くと通信する」ことが得意ですが、手順が多いため、コンマ数秒の遅延（ラグ）が発生することがあります。 音楽と光を完全に同期させるような、「超高速・リアルタイム」 な通信が必要な場合、UDP というプロトコルがよく使われます。（Zigbeeなども）

TCP (MQTT) と UDP の違い

※Gemini生成

• TCP (MQTTなど):
  • 「荷物は届きましたか？」「はい、届きました」と確認しながら送る。
  • 確実だが、少し遅い。
• UDP:
  • 「投げっぱなし」で確認しない。
  • たまに荷物が落ちることもあるが、圧倒的に速い。
  • LED制御のように「1フレーム前の情報より、今の情報が大事」な場面に最適。

※参照URL

※ gemini生成

ブラウザの壁と「中継役」

ChromeなどのWebブラウザは、セキュリティの都合上、直接UDP通信を行うことができません。
そこで、今回はPCの中で「中継役（ブリッジ）」となる小さなプログラム（Node.js）を動かします。

1. p5.js は、中継役に WebSocket（ブラウザが得意な高速通信）で色情報を送る。
2. 中継役は、受け取った情報を UDP に変換して、Wi-Fi内の全員（M5）にばら撒く（ブロードキャスト）。

この構成を作ることで、プロ仕様の照明制御に近いレスポンスを実現できます。

一度ここまで学んできた通信方法をまとめます。

フォルダ構成

フォルダ構成は以下のようになります。

step05_video_color_udp_sync
├── bridge.js  (新規：中継サーバー)
├── clip.mp4
├── index.html
├── node_modules
├── package-lock.json
├── package.json
└── sketch.js (修正：MQTTの代わりにWebSocketで送信)