注釈

こんにちは、SunFounderのRaspberry Pi & Arduino & ESP32愛好家コミュニティへようこそ！Facebook上でRaspberry Pi、Arduino、ESP32についてもっと深く掘り下げ、他の愛好家と交流しましょう。

参加する理由は？

  • エキスパートサポート：コミュニティやチームの助けを借りて、販売後の問題や技術的な課題を解決します。

  • 学び＆共有：ヒントやチュートリアルを交換してスキルを向上させましょう。

  • 独占的なプレビュー：新製品の発表や先行プレビューに早期アクセスしましょう。

  • 特別割引：最新製品の独占割引をお楽しみください。

  • 祭りのプロモーションとギフト：ギフトや祝日のプロモーションに参加しましょう。

👉 私たちと一緒に探索し、創造する準備はできていますか？[ここ]をクリックして今すぐ参加しましょう！

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

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

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

必要な部品

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

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

名前

このキットのアイテム

リンク

ESP32 Starter Kit

320+

ESP32 Starter Kit

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

コンポーネントの紹介

購入リンク

ESP32 WROOM 32E

BUY

ESP32カメラ拡張ボード

BUY

ブレッドボード

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