8.3 カスタムビデオストリーミングウェブサーバー

カスタムビデオストリーミングウェブサーバープロジェクトは、ウェブページをゼロから作成し、ビデオストリームを再生するためのカスタマイズ方法を学ぶ機会を提供します。さらに、LEDの明るさを制御するためのONとOFFのようなインタラクティブなボタンを取り入れることができます。

このプロジェクトを構築することで、ウェブ開発、HTML、CSS、JavaScriptの実践経験を得ることができます。リアルタイムでビデオストリームを表示できるレスポンシブなウェブページを作成する方法を学びます。さらに、インタラクティブなボタンを統合してLEDの状態を制御し、ダイナミックなユーザーエクスペリエンスを提供する方法を発見します。

必要な部品

このプロジェクトでは、以下のコンポーネントが必要です。

一式を購入するのが確かに便利です。リンクはこちらです：

名前

このキットのアイテム

リンク

ESP32 Starter Kit

320+

ESP32 Starter Kit

以下のリンクから個別に購入することもできます。

コンポーネントの紹介

購入リンク

ESP32 WROOM 32E

BUY

ESP32カメラ拡張ボード

-

ブレッドボード

BUY

ジャンパーワイヤ

BUY

抵抗器

BUY

LED

BUY

どのように実行しますか？

  1. まずカメラを接続します。

  2. 回路を組み立てます。

    ../../_images/iot_3_html_led_bb.png

  3. 次に、USBケーブルを使ってESP32-WROOM-32Eをコンピュータに接続します。

    ../../_images/plugin_esp32.png

  4. コードを開きます。

    • esp32-starter-kit-main\c\codes\iot_3_html_cam_led ディレクトリにある iot_3_html_cam_led.ino ファイルを開くか、Arduino IDEにコードをコピーします。

    • ボード（ESP32 Dev Module）と適切なポートを選択した後、 アップロード ボタンをクリックします。

    • "Unknown COMxx"が常に表示されますか？

  5. 次の行を見つけて、あなたの <SSID> と <PASSWORD> で修正してください。

    // Replace the next variables with your SSID/Password combination
const char* ssid = "<SSID>";
const char* password = "<PASSWORD>";

  6. 正しいボード（ESP32 Dev Module）とポートを選択した後、 アップロード ボタンをクリックします。

  7. シリアルモニタで成功したWiFi接続のメッセージと割り当てられたIPアドレスが表示されます。

    WiFi connected
Camera Stream Ready! Go to: http://192.168.18.77

  8. WebブラウザでIPアドレスを入力します。下記のウェブページが表示され、カスタマイズされたONとOFFボタンを使用してLEDを制御できます。

    ../../_images/sp230510_180503.png

  9. バッテリーを拡張ボードに挿入し、USBケーブルを取り外します。これで、Wi-Fi範囲内であればどこにでもデバイスを設置できます。

    ../../_images/plugin_battery.png