Step3 PC側（p5.js）：ブラウザ上で動画を再生しつつ色情報を取得し、MQTTでその色情報を送る

これまでのステップで、動画の色をプログラムで読み取ることができました。
ここでは、その色情報をMQTTを使ってM5などに送る準備をします。

ポイント

  1. 通信プロトコルは MQTT を使います。
    • mqtt.min.jsというライブラリをHTMLで読み込むことで、ブラウザ上でMQTT通信ができるようになります。

  2. JavaScriptでMQTcdTサーバーに接続し、取得したRGB値を「トピック」というアドレスに送信します。これにより、同じトピックを購読している機器（LEDなど）がその情報を受け取れるようになります。

ファイルの変更点

今回は、MQTT通信に必要なコードをindex.htmlとsketch.jsに追加します。

  • index.html:
    • MQTT通信用のライブラリを新しく読み込みます。
    • 画面に「接続状態（status）」を表示する部分を追加します。

  • sketch.js:
    • MQTTサーバーに接続する処理を追加します。
    • 動画から取得した色情報を、MQTTで送信するコードを追加します。
    • 送信する色情報を、画面上で確認するための四角形を表示します。

フォルダ構成

step03_video_color_mqtt
├── clip.mp4
├── index.html
└── sketch.js

コード

Index.html

  • MQTTクライアントライブラリを読み込むための<script>タグを追加し、MQTTの接続状態を表示するためのUI要素を追加しています。
コード（index.html） 
<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>シンプル版：動画の色情報 → MQTT送信</title>

  <script src="https://cdn.jsdelivr.net/npm/p5@1.10.0/lib/p5.min.js"></script>

  <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

  <style>
    body { margin: 0; font: 14px/1.4 system-ui; }
    #ui {
      position: fixed; left: 8px; top: 8px;
      background: #0008; color: #fff; padding: 8px; border-radius: 8px;
    }
  </style>
</head>
<body>
  <div id="ui">
    status: <span id="st">connecting...</span><br>
    RGB: <span id="rgb">-</span>
  </div>

  <script src="./sketch.js"></script>
</body>
</html>
  • <span id="st"> は、MQTTサーバーとの接続がうまくいっているかどうかを表示するための新しい場所です。プログラムが動くと、最初はconnecting...と表示され、接続が完了するとconnectedに変わります。

sketch.js

※注意：topic名は必ず変更してください！
const topic = “m5class/roomA/tsuchida/led”;

コード（sketch.js） 
// グローバル変数として、動画オブジェクトとMQTTクライアントを格納する変数を準備
let vid;
let client;

// HTML要素を格納する変数
let statusText;
let rgbText;

// MQTTサーバーの情報
const topic = "m5class/roomA/tsuchida/led";

// 動画を事前に読み込むための特別な関数
// この中で、HTMLファイルと同じフォルダにある "clip.mp4" を読み込みます
function preload(){
  vid = createVideo("clip.mp4");
}

// ページが読み込まれた後に一度だけ実行される初期設定の関数
function setup(){
  // 幅320ピクセル、高さ240ピクセルのキャンバス（お絵かきスペース）を作成
  createCanvas(320, 240);
  
  // 動画の表示サイズを幅320、高さ180ピクセルに設定
  vid.size(320, 180);
  
  // デフォルトで表示されるHTMLの<video>タグを非表示にする
  vid.hide();
  
  // 動画を繰り返し再生するように設定
  vid.loop();

  // HTMLのid="st"とid="rgb"を持つ要素を取得し、後で値を更新できるように準備
  statusText = document.getElementById("st");
  rgbText = document.getElementById("rgb");

  // === MQTT接続設定 ===
  
  // 1. test.mosquitto.org (デフォルト)
  // WebSockets (WSS) port: 8081
  client = mqtt.connect('wss://test.mosquitto.org:8081');

  // 2. broker.emqx.io (予備：使いたい場合は上をコメントアウトしてこちらを有効化)
  // client = mqtt.connect('wss://broker.emqx.io:8084/mqtt');

  // 3. HiveMQ Cloud (自分で設定)
  /*
  client = mqtt.connect('wss://XXXXXXXXXXXX/mqtt', {
    username: 'XXX',
    password: 'XXXX'
  });
  */
  // ==================

  // MQTT接続が成功したときのイベント
  client.on("connect", () => {
    console.log("MQTT connected!");
    statusText.innerHTML = "connected";
  });
}

// 毎フレーム（1秒間に約60回）繰り返し実行される描画の関数
function draw(){
  // キャンバスの背景色を暗いグレーで塗りつぶす
  background(20);
  
  // 動画の現在のフレームをキャンバスに描画
  image(vid, 0, 0);

  // キャンバスの中心にあるピクセル（点）の色情報を取得
  let c = get(width / 2, height / 2);

  // 取得したRGB値を画面に表示
  rgbText.innerHTML = `${c[0]}, ${c[1]}, ${c[2]}`;

// === 色プレビュー用の四角を描画 ===
  noStroke();                      // 枠線なし
  fill(c[0], c[1], c[2]);          // 塗り色を取得したRGBに設定
  rect(width - 60, height - 60, 50, 50); // 右下に 50x50 の四角を描画

  // MQTTサーバーに接続している場合、色情報を送信
  if (client.connected) {
    // RGB値をカンマ区切りの文字列に変換して送信
    const message = `${c[0]},${c[1]},${c[2]}`;
    client.publish(topic, message);
  }
}

コード解説

MQTT通信を確立し、色情報を送信するためのコードが追加されています。

1. グローバル変数の追加

MQTTクライアントオブジェクトと、接続状態を表示するためのHTML要素を格納する変数が追加されました。

let client; // MQTTクライアント
let statusText; // HTMLのstatus要素

MQTTサーバーの情報も定数として定義されています。

const topic = "m5class/roomA/tsuchida/led";

※ tsuchida部分は自分の名前に変更してください。

2. setup()関数の変更（接続処理）

setup()関数に、MQTTクライアントを初期化してサーバーに接続する処理を追加しました。

// 1. test.mosquitto.org (デフォルト)
client = mqtt.connect('wss://test.mosquitto.org:8081');
  • 接続先:
    • 今回は、誰でも無料で使える公開ブローカー test.mosquitto.org を使用します。
  • 設定:
    • 公開サーバーのためユーザー名やパスワードは不要で、シンプルに接続できます。
  • WSS (8081):
    • ブラウザ上で動かすため、通常のMQTTポート(1883)ではなく、WebSocket用のセキュアポート(8081)を指定する必要があります。

client.on("connect", ...) の部分は、接続が成功した瞬間に実行され、画面の表示を connecting... から connected に書き換えます。

3. draw()関数の変更

以下で「実際に取得した色」を右下で確認できます。

noStroke();
fill(c[0], c[1], c[2]);        // fill に取得した色を指定
rect(width - 60, height - 60, 50, 50);  // 幅50pxの四角形

MQTT接続が確立されている場合に色情報を送信する処理が追加されました。

if (client.connected) {
  // RGB値をカンマ区切りの文字列に変換して送信
  const message = `${c[0]},${c[1]},${c[2]}`;
  client.publish(topic, message);
}

client.connectedで接続状態を確認し、接続されていればclient.publish()を使って指定されたトピックに色情報の文字列を送信しています。

動作確認

ひとまず satus:connected が表示されていればOKです！

Pages: 1 2 3 4 5 6 7 8 9