初心者向け：ESP32CAMで作成するカメラカーの作成　～コードの理解と実装ガイド～

プログラミング初心者で、IoTやカメラの世界に興味がありますか？今日は、ESP32-Sチップとカメラを組み合わせた強力で多機能なモジュールであるESP32-CAMを使った魅力的なプロジェクトについて詳しく解説します。この記事は初心者向けに、複雑なコードを理解しやすい部分に分解していきます。さあ、ESP32-CAMを活用してみましょう！

アイコン名を入力

・プログラミングに詳しくないけど、理解できるかな？
・ESP32-CAMって何？どうやって機能するの？
・このコードを実際のプロジェクトでどう使うの？

こんな疑問に答えます。実際にESP32CAMを使用して、ROBOT CARを作成しますので、様々な知識を身につけることができます。

ブログの対象者

・IoTに興味のある初心者: テクノロジーに興味があり、特にインターネットオブシングス（IoT）に関するプロジェクトを始めたいと考えているが、どこから始めていいかわからない初心者。
・DIY愛好家: 自宅で個人的なDIYプロジェクトに取り組むことを楽しみ、新しいツールや技術に挑戦することに興味があるアマチュアや趣味の工作愛好家。
・学生および教育者: 学校の課題やプロジェクトで新しい技術を探求している学生や、生徒に現代のテクノロジーを教えたいと考えている教育者。

こんなものが作成できるようになります。

Contents

第1章：ESP32-CAMとその機能の紹介
第2章：環境設定
第3章：コードの理解 – 基本設定とWiFi接続
第4章：モータドライバを使用した車の制御
第5章：ウェブサーバーと制御コマンドの実装

🚀 0円で現役エンジニアから学べる【Techスクールオンライン】のお申込みをお勧めします。このオンラインスクールでは、現役のエンジニアから直接学ぶことができ、プログラミングの基礎から高度なスキルまでを習得できます。しかも、今なら 0円で受講できるチャンスです。エンジニア転職を考えている方やプログラミングに興味がある方、新しいスキルを習得したい方に特におすすめです。

第1章：ESP32-CAMとその機能の紹介

ESP32-CAMとは何か？

ESP32-CAMは、小型でコスト効率の高いカメラモジュールです。これはESP32チップとカメラを組み合わせたもので、WiFiとBluetoothの両方をサポートしており、さまざまなIoTプロジェクトに適しています。このモジュールの主な特徴は、その汎用性と低コストにあります。

ESP32-CAMの主な機能

ESP32-CSMの主要な機能は下記になります。特に、カメラ、WiFi, Bluetoothが搭載されており、小型であるため、非常に楽しいモジュールになっています。

カメラ機能: 写真やビデオの撮影が可能です。これはセキュリティカメラや個人プロジェクトで有用です。
WiFi接続: 無線LANに接続し、インターネットを通じてデータを送受信できます。
Bluetooth機能: 近距離での無線通信が可能です。
低消費電力: ESP32チップは低消費電力で動作するため、バッテリー駆動のプロジェクトに適しています。

ESP32-CAMの応用例

応用例には下記が挙げられます。今回はESP32CAMを使用したロボットカーを作成します。

スマートホームデバイス: 家のセキュリティを強化するために使われることが多いです。ドアベルカメラやモーションセンサーとして機能します。
DIYプロジェクト: 個人的なプロジェクトや学校の実験で多く使われます。例えば、ペットの監視システムや自動植物水やりシステムなどがあります。
ロボティクス: 小型ロボットに組み込むことで、環境のビジュアルデータを収集したり、リモート操作を行ったりすることができます。

初心者にとってのESP32-CAM

ESP32-CAMは、初心者がIoTの世界に足を踏み入れるための素晴らしいツールです。低コストでアクセスしやすいため、実験や学習に最適なプラットフォームを提供します。プログラミングや電子工学の基本的な知識があれば、このモジュールを使って多くの面白いプロジェクトを始めることができます。

この章では、ESP32-CAMの基本的な特性と可能性について理解し、これがどのように多様なアプリケーションに利用できるかを探ります。次の章では、このモジュールのセットアップとプログラミングの基礎について詳しく説明します。

必要なもの

必要なものは下記で購入できます。

リンク

第2章：環境設定

ESP32-CAMのセットアップの重要性

ESP32-CAMを使用する前に、正しいハードウェアとソフトウェアの環境を整えることが重要です。このセットアップは、プロジェクトの成功に直接影響を与えます。

こちらの内容は以前別のページで紹介しておりますので、詳細は別のページを参照ください。また、プログラムの内容は4章の最後に記載しております。

ハードウェアの準備

ESP32-CAMモジュール: これはプロジェクトの中心となる部分です。
USB-to-シリアルアダプター: ESP32-CAMにはUSBポートがないため、プログラムのアップロードにはこのアダプターが必要です。
安定した電源: ESP32-CAMは比較的消費電力が高いため、安定した電源供給が必要です。USBポートまたは外部電源を使用します。

ソフトウェア環境の設定

Arduino IDEのインストール: この無料の統合開発環境（IDE）は、ESP32-CAMにコードを書き込むために使用します。
ESP32ボードマネージャーの追加: Arduino IDEにESP32ボードマネージャーを追加することで、ESP32-CAMへのコードアップロードが可能になります。
ドライバーのインストール: USB-to-シリアルアダプターを使用するためには、適切なドライバーがPCにインストールされている必要があります。

初めての接続

ESP32-CAMへの接続: USB-to-シリアルアダプターを使って、ESP32-CAMをコンピュータに接続します。
プログラムのアップロード: Arduino IDEを使って、ESP32-CAMにテストプログラムをアップロードします。これにより、モジュールが正しく動作していることを確認できます。

詳細の内容は下記リンクを参考下さい。

第3章：コードの理解 – 基本設定とWiFi接続

この章では、ESP32-CAMを使用したプロジェクトのコアとなるプログラミングの基礎を解説します。特に、基本的な設定とWiFiへの接続方法に焦点を当てます。

基本的なコードの構造

ESP32-CAMプロジェクトのコードは通常、以下の主要なセクションで構成されます：

ライブラリのインポート: 必要な機能を提供するライブラリをコードに組み込みます。例えば、esp_camera.h（カメラ機能）、WiFi.h（無線LAN接続）などです。
グローバル変数の設定: WiFiのSSIDやパスワードなど、プログラム全体で使用される変数を定義します。
セットアップ関数（setup()）: プログラムが始まるときに一度だけ実行される初期設定を行います。
メインループ関数（loop()）: プログラムが動作している間、繰り返し実行される部分です。

WiFi接続の設定

WiFiへの接続は、以下のステップで行います：

ネットワーク情報の定義: const char* ssid = "your_network_name";のように、あなたのWiFiネットワークの名前（SSID）とパスワードを設定します。
WiFiへの接続: WiFi.begin(ssid, password);を使用して、指定されたネットワークに接続します。
接続の確認: WiFi.status()関数を使って、接続が成功したかどうかを確認します。

接続のトラブルシューティング

WiFi接続に失敗した場合、以下の点を確認してください：

SSIDとパスワード: 正しく入力されているかどうか確認します。
ネットワークの可用性: ESP32-CAMがネットワークの範囲内にあるか、またはそのネットワークが機能しているかを確認します。
プログラムのエラー: コード内のタイポや文法のエラーがないかチェックします。

コードのテスト

基本的なWiFi接続のプログラムを書いた後、それをESP32-CAMにアップロードしてテストします。正常に接続が確立されれば、シリアルモニタに接続状態が表示されるはずです。WiFi Connectedと表示されれば問題ありません。

回路はこのようにつなぎ、プログラムをアップロードします。プログラム書き込み後、必ずGND-IO0の線は外してください。

WiFi Connectedと表示されます。

第4章：モータドライバを使用した車の制御

この章では、ESP32-CAMを使ってモータドライバを制御し、車を動かす方法について詳しく説明します。特に、ピンの設定と基本的な動作（前進、左旋回など）のプログラミングに焦点を当てます。

モータドライバDRV8835と接続します。これを用いることにより、モータの出力を正転・反転を行っております。回路は下記のように接続ください。

モータドライバとは

モータドライバは、モーターの動力と方向を制御するためのデバイスです。ESP32-CAMと組み合わせて使用することで、小型車両やロボットの動きをプログラムによって精密に制御できます。

今回使用するDRV8835は、Texas Instrumentsによって製造されている小型かつ効率的なモータードライバーです。このモータードライバーは、特にロボット工学や小型の自動制御システムにおいて人気があります。その主な特徴としては以下のようなものがあります：

デュアルチャネル: DRV8835は、2つのDCブラシモーターまたは1つのステッピングモーターを同時に駆動することができます。
電圧範囲: このドライバーは、2Vから11Vの電源電圧で動作します。これにより、さまざまな電力要件を持つプロジェクトに対応可能です。
高効率: DRV8835は、高効率な動作を可能にする低オン抵抗MOSFETを内蔵しています。これにより、熱発生が少なく、エネルギー消費も抑えられます。
コンパクトサイズ: 小型でありながら、1.5Aまでの連続電流（ピーク電流は2A）を各チャネルに供給することができます。
簡単なインターフェース: 多くのマイクロコントローラと容易に接続でき、PWM信号によるスピードと方向の制御が可能です。

DRV8835モータードライバーは、特に小型のモバイルロボットや教育用のロボティクスプロジェクトでの使用に適しており、使いやすさと性能のバランスが取れているため、幅広いアプリケーションで採用されています

モーター制御用のピンの設定

ピンの割り当て: 例えば、モーター1の前進・後退用に2つのピン（例：14番、15番）を割り当てます。同様に、モーター2用にも別の2つのピン（例：13番、12番）を割り当てます。

#define MOTOR_1_PIN_1    14
#define MOTOR_1_PIN_2    15
#define MOTOR_2_PIN_1    13
#define MOTOR_2_PIN_2    12

ピンモードの設定: setup()関数内で、これらのピンを出力モードに設定します。

pinMode(MOTOR_1_PIN_1, OUTPUT);
pinMode(MOTOR_1_PIN_2, OUTPUT);
pinMode(MOTOR_2_PIN_1, OUTPUT);
pinMode(MOTOR_2_PIN_2, OUTPUT);

基本的な動作のプログラミング

前進（Forward）: 両方のモーターを前進方向に回転させます。

digitalWrite(MOTOR_1_PIN_1, HIGH);
digitalWrite(MOTOR_1_PIN_2, LOW);
digitalWrite(MOTOR_2_PIN_1, HIGH);
digitalWrite(MOTOR_2_PIN_2, LOW);

左旋回（Left）: 一方のモーターを前進、もう一方を後退させることで左旋回します。

digitalWrite(MOTOR_1_PIN_1, LOW);
digitalWrite(MOTOR_1_PIN_2, HIGH);
digitalWrite(MOTOR_2_PIN_1, HIGH);
digitalWrite(MOTOR_2_PIN_2, LOW);

右旋回（Right）：逆のモーターの方向を変えることで右旋回します。

digitalWrite(MOTOR_1_PIN_1, HIGH);
digitalWrite(MOTOR_1_PIN_2, LOW);
digitalWrite(MOTOR_2_PIN_1, LOW);
digitalWrite(MOTOR_2_PIN_2, HIGH);

停止（Stop）: 両方のモーターを停止します。

digitalWrite(MOTOR_1_PIN_1, LOW);
digitalWrite(MOTOR_1_PIN_2, LOW);
digitalWrite(MOTOR_2_PIN_1, LOW);
digitalWrite(MOTOR_2_PIN_2, LOW);

これでモータとピン番号の設定は完了です。

最後にプログラムの全文を記載します。


#include "esp_camera.h"      // ESP32-CAMのカメラ機能を扱うためのライブラリ
#include <WiFi.h>            // WiFi機能を使用するためのライブラリ
#include "esp_timer.h"       // タイマー機能を使用するためのライブラリ
#include "img_converters.h"  // 画像変換機能を扱うためのライブラリ
#include "Arduino.h"         // Arduinoの基本機能を使用するためのライブラリ
#include "fb_gfx.h"          // グラフィックス関連の機能を使用するためのライブラリ
#include "soc/soc.h"         // システムオンチップ関連の設定を扱うライブラリ
#include "soc/rtc_cntl_reg.h"// RTC（リアルタイムクロック）制御のためのライブラリ
#include "esp_http_server.h" // HTTPサーバー機能を扱うためのライブラリ

// WiFiの設定: ここにあなたのWiFiのSSIDとパスワードを設定
const char* ssid = "Your SSID";
const char* password = "Your PASSWORD";

#define PART_BOUNDARY "123456789000000000000987654321"

// カメラモデルの定義: 使用しているカメラに応じて選択
#define CAMERA_MODEL_AI_THINKER
//#define CAMERA_MODEL_M5STACK_PSRAM
//#define CAMERA_MODEL_M5STACK_WITHOUT_PSRAM
//#define CAMERA_MODEL_M5STACK_PSRAM_B
//#define CAMERA_MODEL_WROVER_KIT

// カメラモデルの定義: 使用しているカメラに応じて選択 AI 
#if defined(CAMERA_MODEL_WROVER_KIT)
  #define PWDN_GPIO_NUM    -1
  #define RESET_GPIO_NUM   -1
  #define XCLK_GPIO_NUM    21
  #define SIOD_GPIO_NUM    26
  #define SIOC_GPIO_NUM    27
  
  #define Y9_GPIO_NUM      35
  #define Y8_GPIO_NUM      34
  #define Y7_GPIO_NUM      39
  #define Y6_GPIO_NUM      36
  #define Y5_GPIO_NUM      19
  #define Y4_GPIO_NUM      18
  #define Y3_GPIO_NUM       5
  #define Y2_GPIO_NUM       4
  #define VSYNC_GPIO_NUM   25
  #define HREF_GPIO_NUM    23
  #define PCLK_GPIO_NUM    22

#elif defined(CAMERA_MODEL_M5STACK_PSRAM)
  #define PWDN_GPIO_NUM     -1
  #define RESET_GPIO_NUM    15
  #define XCLK_GPIO_NUM     27
  #define SIOD_GPIO_NUM     25
  #define SIOC_GPIO_NUM     23
  
  #define Y9_GPIO_NUM       19
  #define Y8_GPIO_NUM       36
  #define Y7_GPIO_NUM       18
  #define Y6_GPIO_NUM       39
  #define Y5_GPIO_NUM        5
  #define Y4_GPIO_NUM       34
  #define Y3_GPIO_NUM       35
  #define Y2_GPIO_NUM       32
  #define VSYNC_GPIO_NUM    22
  #define HREF_GPIO_NUM     26
  #define PCLK_GPIO_NUM     21

#elif defined(CAMERA_MODEL_M5STACK_WITHOUT_PSRAM)
  #define PWDN_GPIO_NUM     -1
  #define RESET_GPIO_NUM    15
  #define XCLK_GPIO_NUM     27
  #define SIOD_GPIO_NUM     25
  #define SIOC_GPIO_NUM     23
  
  #define Y9_GPIO_NUM       19
  #define Y8_GPIO_NUM       36
  #define Y7_GPIO_NUM       18
  #define Y6_GPIO_NUM       39
  #define Y5_GPIO_NUM        5
  #define Y4_GPIO_NUM       34
  #define Y3_GPIO_NUM       35
  #define Y2_GPIO_NUM       17
  #define VSYNC_GPIO_NUM    22
  #define HREF_GPIO_NUM     26
  #define PCLK_GPIO_NUM     21

#elif defined(CAMERA_MODEL_AI_THINKER)
  #define PWDN_GPIO_NUM     32
  #define RESET_GPIO_NUM    -1
  #define XCLK_GPIO_NUM      0
  #define SIOD_GPIO_NUM     26
  #define SIOC_GPIO_NUM     27
  
  #define Y9_GPIO_NUM       35
  #define Y8_GPIO_NUM       34
  #define Y7_GPIO_NUM       39
  #define Y6_GPIO_NUM       36
  #define Y5_GPIO_NUM       21
  #define Y4_GPIO_NUM       19
  #define Y3_GPIO_NUM       18
  #define Y2_GPIO_NUM        5
  #define VSYNC_GPIO_NUM    25
  #define HREF_GPIO_NUM     23
  #define PCLK_GPIO_NUM     22

#elif defined(CAMERA_MODEL_M5STACK_PSRAM_B)
  #define PWDN_GPIO_NUM     -1
  #define RESET_GPIO_NUM    15
  #define XCLK_GPIO_NUM     27
  #define SIOD_GPIO_NUM     22
  #define SIOC_GPIO_NUM     23
  
  #define Y9_GPIO_NUM       19
  #define Y8_GPIO_NUM       36
  #define Y7_GPIO_NUM       18
  #define Y6_GPIO_NUM       39
  #define Y5_GPIO_NUM        5
  #define Y4_GPIO_NUM       34
  #define Y3_GPIO_NUM       35
  #define Y2_GPIO_NUM       32
  #define VSYNC_GPIO_NUM    25
  #define HREF_GPIO_NUM     26
  #define PCLK_GPIO_NUM     21

#else
  #error "Camera model not selected"
#endif

// モータードライバ用のピン設定
#define MOTOR_1_PIN_1    14
#define MOTOR_1_PIN_2    15
#define MOTOR_2_PIN_1    13
#define MOTOR_2_PIN_2    12

// ストリームの設定: カメラからの映像ストリームを扱うための設定
static const char* _STREAM_CONTENT_TYPE = "multipart/x-mixed-replace;boundary=" PART_BOUNDARY;
static const char* _STREAM_BOUNDARY = "\r\n--" PART_BOUNDARY "\r\n";
static const char* _STREAM_PART = "Content-Type: image/jpeg\r\nContent-Length: %u\r\n\r\n";

// HTTPサーバーのハンドル（識別子）
httpd_handle_t camera_httpd = NULL;
httpd_handle_t stream_httpd = NULL;

// HTMLコード: ESP32-CAMで撮影した映像をWebページで表示するためのHTMLコード
// このHTMLコードには、カメラの映像を表示し、車の制御ボタン（前進、後退など）が含まれています
static const char PROGMEM INDEX_HTML[] = R"rawliteral(
<html>
  <head>
    <title>ESP32-CAM Robot</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body { font-family: Arial; text-align: center; margin:0px auto; padding-top: 30px;}
      table { margin-left: auto; margin-right: auto; }
      td { padding: 8 px; }
      .button {
        background-color: #2f4468;
        border: none;
        color: white;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 18px;
        margin: 6px 3px;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
      }
      img {  width: auto ;
        max-width: 100% ;
        height: auto ; 
      }
    </style>
  </head>
  <body>
    <h1>ESP32-CAM Robot</h1>
    <img src="" id="photo" >
    <table>
      <tr><td colspan="3" align="center"><button class="button" onmousedown="toggleCheckbox('forward');" ontouchstart="toggleCheckbox('forward');" onmouseup="toggleCheckbox('stop');" ontouchend="toggleCheckbox('stop');">Forward</button></td></tr>
      <tr><td align="center"><button class="button" onmousedown="toggleCheckbox('left');" ontouchstart="toggleCheckbox('left');" onmouseup="toggleCheckbox('stop');" ontouchend="toggleCheckbox('stop');">Left</button></td><td align="center"><button class="button" onmousedown="toggleCheckbox('stop');" ontouchstart="toggleCheckbox('stop');">Stop</button></td><td align="center"><button class="button" onmousedown="toggleCheckbox('right');" ontouchstart="toggleCheckbox('right');" onmouseup="toggleCheckbox('stop');" ontouchend="toggleCheckbox('stop');">Right</button></td></tr>
      <tr><td colspan="3" align="center"><button class="button" onmousedown="toggleCheckbox('backward');" ontouchstart="toggleCheckbox('backward');" onmouseup="toggleCheckbox('stop');" ontouchend="toggleCheckbox('stop');">Backward</button></td></tr>                   
    </table>
   <script>
   function toggleCheckbox(x) {
     var xhr = new XMLHttpRequest();
     xhr.open("GET", "/action?go=" + x, true);
     xhr.send();
   }
   window.onload = document.getElementById("photo").src = window.location.href.slice(0, -1) + ":81/stream";
  </script>
  </body>
</html>
)rawliteral";

static esp_err_t index_handler(httpd_req_t *req){
  httpd_resp_set_type(req, "text/html");
  return httpd_resp_send(req, (const char *)INDEX_HTML, strlen(INDEX_HTML));
}

static esp_err_t stream_handler(httpd_req_t *req){
  camera_fb_t * fb = NULL;
  esp_err_t res = ESP_OK;
  size_t _jpg_buf_len = 0;
  uint8_t * _jpg_buf = NULL;
  char * part_buf[64];

  res = httpd_resp_set_type(req, _STREAM_CONTENT_TYPE);
  if(res != ESP_OK){
    return res;
  }

  while(true){
    fb = esp_camera_fb_get();
    if (!fb) {
      Serial.println("Camera capture failed");
      res = ESP_FAIL;
    } else {
      if(fb->width > 400){
        if(fb->format != PIXFORMAT_JPEG){
          bool jpeg_converted = frame2jpg(fb, 80, &_jpg_buf, &_jpg_buf_len);
          esp_camera_fb_return(fb);
          fb = NULL;
          if(!jpeg_converted){
            Serial.println("JPEG compression failed");
            res = ESP_FAIL;
          }
        } else {
          _jpg_buf_len = fb->len;
          _jpg_buf = fb->buf;
        }
      }
    }
    if(res == ESP_OK){
      size_t hlen = snprintf((char *)part_buf, 64, _STREAM_PART, _jpg_buf_len);
      res = httpd_resp_send_chunk(req, (const char *)part_buf, hlen);
    }
    if(res == ESP_OK){
      res = httpd_resp_send_chunk(req, (const char *)_jpg_buf, _jpg_buf_len);
    }
    if(res == ESP_OK){
      res = httpd_resp_send_chunk(req, _STREAM_BOUNDARY, strlen(_STREAM_BOUNDARY));
    }
    if(fb){
      esp_camera_fb_return(fb);
      fb = NULL;
      _jpg_buf = NULL;
    } else if(_jpg_buf){
      free(_jpg_buf);
      _jpg_buf = NULL;
    }
    if(res != ESP_OK){
      break;
    }
    //Serial.printf("MJPG: %uB\n",(uint32_t)(_jpg_buf_len));
  }
  return res;
}

static esp_err_t cmd_handler(httpd_req_t *req){
  char*  buf;
  size_t buf_len;
  char variable[32] = {0,};
  
  buf_len = httpd_req_get_url_query_len(req) + 1;
  if (buf_len > 1) {
    buf = (char*)malloc(buf_len);
    if(!buf){
      httpd_resp_send_500(req);
      return ESP_FAIL;
    }
    if (httpd_req_get_url_query_str(req, buf, buf_len) == ESP_OK) {
      if (httpd_query_key_value(buf, "go", variable, sizeof(variable)) == ESP_OK) {
      } else {
        free(buf);
        httpd_resp_send_404(req);
        return ESP_FAIL;
      }
    } else {
      free(buf);
      httpd_resp_send_404(req);
      return ESP_FAIL;
    }
    free(buf);
  } else {
    httpd_resp_send_404(req);
    return ESP_FAIL;
  }

  sensor_t * s = esp_camera_sensor_get();
  int res = 0;
  
  if(!strcmp(variable, "forward")) {
    Serial.println("Forward");
    digitalWrite(MOTOR_1_PIN_1, 1);
    digitalWrite(MOTOR_1_PIN_2, 0);
    digitalWrite(MOTOR_2_PIN_1, 1);
    digitalWrite(MOTOR_2_PIN_2, 0);
  }
  else if(!strcmp(variable, "left")) {
    Serial.println("Left");
    digitalWrite(MOTOR_1_PIN_1, 0);
    digitalWrite(MOTOR_1_PIN_2, 1);
    digitalWrite(MOTOR_2_PIN_1, 1);
    digitalWrite(MOTOR_2_PIN_2, 0);
  }
  else if(!strcmp(variable, "right")) {
    Serial.println("Right");
    digitalWrite(MOTOR_1_PIN_1, 1);
    digitalWrite(MOTOR_1_PIN_2, 0);
    digitalWrite(MOTOR_2_PIN_1, 0);
    digitalWrite(MOTOR_2_PIN_2, 1);
  }
  else if(!strcmp(variable, "backward")) {
    Serial.println("Backward");
    digitalWrite(MOTOR_1_PIN_1, 0);
    digitalWrite(MOTOR_1_PIN_2, 1);
    digitalWrite(MOTOR_2_PIN_1, 0);
    digitalWrite(MOTOR_2_PIN_2, 1);
  }
  else if(!strcmp(variable, "stop")) {
    Serial.println("Stop");
    digitalWrite(MOTOR_1_PIN_1, 0);
    digitalWrite(MOTOR_1_PIN_2, 0);
    digitalWrite(MOTOR_2_PIN_1, 0);
    digitalWrite(MOTOR_2_PIN_2, 0);
  }
  else {
    res = -1;
  }

  if(res){
    return httpd_resp_send_500(req);
  }

  httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
  return httpd_resp_send(req, NULL, 0);
}

void startCameraServer(){
  httpd_config_t config = HTTPD_DEFAULT_CONFIG();
  config.server_port = 80;
  httpd_uri_t index_uri = {
    .uri       = "/",
    .method    = HTTP_GET,
    .handler   = index_handler,
    .user_ctx  = NULL
  };

  httpd_uri_t cmd_uri = {
    .uri       = "/action",
    .method    = HTTP_GET,
    .handler   = cmd_handler,
    .user_ctx  = NULL
  };
  httpd_uri_t stream_uri = {
    .uri       = "/stream",
    .method    = HTTP_GET,
    .handler   = stream_handler,
    .user_ctx  = NULL
  };
  if (httpd_start(&camera_httpd, &config) == ESP_OK) {
    httpd_register_uri_handler(camera_httpd, &index_uri);
    httpd_register_uri_handler(camera_httpd, &cmd_uri);
  }
  config.server_port += 1;
  config.ctrl_port += 1;
  if (httpd_start(&stream_httpd, &config) == ESP_OK) {
    httpd_register_uri_handler(stream_httpd, &stream_uri);
  }
}

void setup() {
  WRITE_PERI_REG(RTC_CNTL_BROWN_OUT_REG, 0); //disable brownout detector
  
  pinMode(MOTOR_1_PIN_1, OUTPUT);
  pinMode(MOTOR_1_PIN_2, OUTPUT);
  pinMode(MOTOR_2_PIN_1, OUTPUT);
  pinMode(MOTOR_2_PIN_2, OUTPUT);
  
  Serial.begin(115200);
  Serial.setDebugOutput(false);
  
  camera_config_t config;
  config.ledc_channel = LEDC_CHANNEL_0;
  config.ledc_timer = LEDC_TIMER_0;
  config.pin_d0 = Y2_GPIO_NUM;
  config.pin_d1 = Y3_GPIO_NUM;
  config.pin_d2 = Y4_GPIO_NUM;
  config.pin_d3 = Y5_GPIO_NUM;
  config.pin_d4 = Y6_GPIO_NUM;
  config.pin_d5 = Y7_GPIO_NUM;
  config.pin_d6 = Y8_GPIO_NUM;
  config.pin_d7 = Y9_GPIO_NUM;
  config.pin_xclk = XCLK_GPIO_NUM;
  config.pin_pclk = PCLK_GPIO_NUM;
  config.pin_vsync = VSYNC_GPIO_NUM;
  config.pin_href = HREF_GPIO_NUM;
  config.pin_sscb_sda = SIOD_GPIO_NUM;
  config.pin_sscb_scl = SIOC_GPIO_NUM;
  config.pin_pwdn = PWDN_GPIO_NUM;
  config.pin_reset = RESET_GPIO_NUM;
  config.xclk_freq_hz = 20000000;
  config.pixel_format = PIXFORMAT_JPEG; 
  
  if(psramFound()){
    config.frame_size = FRAMESIZE_VGA;
    config.jpeg_quality = 10;
    config.fb_count = 2;
  } else {
    config.frame_size = FRAMESIZE_SVGA;
    config.jpeg_quality = 12;
    config.fb_count = 1;
  }
  
  // Camera init
  esp_err_t err = esp_camera_init(&config);
  if (err != ESP_OK) {
    Serial.printf("Camera init failed with error 0x%x", err);
    return;
  }
  // Wi-Fi connection
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");
  
  Serial.print("Camera Stream Ready! Go to: http://");
  Serial.println(WiFi.localIP());
  
  // Start streaming web server
  startCameraServer();
}

void loop() {
  
}

第5章：ウェブサーバーと制御コマンドの実装

この章では、ESP32-CAMを使用してウェブサーバーを設定し、車両のリモート制御コマンドを実装する方法を説明します。ウェブサーバーを通じてカメラの映像をストリーミングし、ウェブページ上のボタン操作で車を制御します。

ウェブサーバーの設定

ウェブサーバーは、カメラからの映像をリアルタイムでウェブページに送信し、車の制御命令を受け取る役割を果たします。

サーバーの初期化:
- httpd_config_t config = HTTPD_DEFAULT_CONFIG(); を使用して、HTTPサーバーの基本設定を行います。
- サーバーのポート番号（通常は80）を設定します。
URIハンドラの登録:
- URIハンドラを使用して、特定のURLにアクセスがあった際の動作を定義します。
- httpd_register_uri_handler() 関数を使用して、インデックスページとストリームページのハンドラを登録します。

カメラ映像のストリーミング

カメラからの映像をウェブページにストリーミングするために、以下のステップを実行します。

ストリームハンドラの設定:
- カメラからフレームバッファを取得し、それをJPEG形式でウェブページに送信します。
- httpd_resp_send_chunk() 関数を使用して、JPEGデータをストリームとして送信します。
連続ストリーミングの管理:
- ループ内でカメラから継続的にフレームを取得し、ウェブページに送信します。

リモート制御コマンドの実装

ウェブページからの制御コマンドを受け取り、それに応じて車を制御します。

コマンドハンドラの設定:
- cmd_handler() 関数は、ウェブページからのリクエストを受け取り、そのリクエストに基づいて車を制御します。
- URLパラメータ（例：/action?go=forward）を解析して、対応する動作（前進、後退など）を実行します。
モータ制御の実行:
- 受け取ったコマンド（例：forward、left）に基づいて、対応するGPIOピンをHIGHまたはLOWに設定してモータを制御します。
- 例えば、forward コマンドが来た場合、指定したピンを使用して車を前進させます。