前回記事↑の続編です。

デジカメもどきを作成したものの、1回1回SDカードを外すのがめんどうになってきました。SDカードの内容をブラウザで確認するようにしたものです。

ESP32-S3_WROOM CAM３部作になります。

ESP32-S3 WROOM CAMでデジカメを作る
GPIO0ボタン押下で静止画撮影、SDカードに保存。EdgeImpulseでのトレーニングデータ収集の為。
SDカード画像をブラウザで確認
SDカードの取り外しが面倒なため
画像識別ST7789でバウンディングボックス
EdgeImpulseでの学習モデルを元に画像識別

２．SDカード画像をブラウザで確認

/////////////////// 全ての画像を映すVer ///////////
#include <WiFi.h>
#include <SD_MMC.h>
#include <WebServer.h>

// Wi-FiのSSIDとパスワードを設定
const char* ssid = "XXXXXXXXX";  // 接続するWiFiのSSID
const char* password = "XXXXXXXXX";  // 接続するWiFiのパスワード

// Webサーバーをポート80で作成
WebServer server(80);

// SDカード用のピン定義
#define SD_MMC_CMD 38
#define SD_MMC_CLK 39
#define SD_MMC_D0  40

// ファイルのマウントステータスを示す変数
bool sd_init = false;

// Webサーバーのルートにアクセスされたときの処理
void handleRoot() {
  if (!sd_init) {
    server.send(500, "text/plain", "SD Card not initialized");
    return;
  }

  String html = "<html><body><h1>All Images</h1><div>";

  // SDカードからファイルを取得して表示
  File root = SD_MMC.open("/");
  File file = root.openNextFile();

  while (file) {
    if (!file.isDirectory()) {
      String fileName = String(file.name());
      if (fileName.endsWith(".jpg") || fileName.endsWith(".png")) {
        // URLエンコードした画像ファイルをHTMLに追加して表示
        html += "<div style=\"margin-bottom:20px;\"><img src=\"/image?name=" + urlencode(fileName) + "\" style=\"max-width:300px; display:block;\"><p>" + fileName + "</p></div>";
      }
    }
    file = root.openNextFile();
  }
  
  html += "</div></body></html>";
  server.send(200, "text/html", html);
}

// 画像ファイルにアクセスされたときの処理
void handleImageRequest() {
  if (!sd_init) {
    server.send(500, "text/plain", "SD Card not initialized");
    return;
  }

  String fileName = server.arg("name");

  // パスの先頭にスラッシュを追加（必要に応じて）
  if (!fileName.startsWith("/")) {
    fileName = "/" + fileName;
  }

  // 確認用のデバッグ出力
  Serial.print("Requested file: ");
  Serial.println(fileName);

  if (SD_MMC.exists(fileName.c_str())) {
    File file = SD_MMC.open(fileName.c_str(), FILE_READ);
    if (fileName.endsWith(".jpg")) {
      server.streamFile(file, "image/jpeg");
    } else if (fileName.endsWith(".png")) {
      server.streamFile(file, "image/png");
    }
    file.close();
  } else {
    Serial.println("File not found");
    server.send(404, "text/plain", "File not found");
  }
}

// SDカードの初期化処理
void initSDCard() {
  SD_MMC.setPins(SD_MMC_CLK, SD_MMC_CMD, SD_MMC_D0);
  if (!SD_MMC.begin("/sdcard", true, true, SDMMC_FREQ_DEFAULT, 5)) {
    Serial.println("Card Mount Failed");
    sd_init = false;
  } else {
    Serial.println("SD Card Initialized");
    sd_init = true;
  }
}

// Wi-Fiの接続設定
void connectWiFi() {
  Serial.print("Connecting to WiFi...");
  WiFi.begin(ssid, password);

  // Wi-Fi接続完了まで待機
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());
}

// URLエンコード関数
String urlencode(String str) {
  String encodedString = "";
  char c;
  char code0;
  char code1;
  char code2;
  for (int i = 0; i < str.length(); i++) {
    c = str.charAt(i);
    if (c == ' ') {
      encodedString += '+';
    } else if (isalnum(c)) {
      encodedString += c;
    } else {
      code1 = (c & 0xf) + '0';
      if ((c & 0xf) > 9) {
        code1 = (c & 0xf) - 10 + 'A';
      }
      c = (c >> 4) & 0xf;
      code0 = c + '0';
      if (c > 9) {
        code0 = c - 10 + 'A';
      }
      code2 = '\0';
      encodedString += '%';
      encodedString += code0;
      encodedString += code1;
    }
    yield();
  }
  return encodedString;
}

// サーバーの初期化とエンドポイントの設定
void setup() {
  Serial.begin(115200);
  
  // Wi-Fi接続
  connectWiFi();
  
  // SDカードの初期化
  initSDCard();
  
  // Webサーバーのルートにアクセスしたときの処理
  server.on("/", handleRoot);
  
  // 画像ファイルにアクセスされたときの処理
  server.on("/image", handleImageRequest);

  // サーバーを開始
  server.begin();
  Serial.println("HTTP server started");
}

// メインループでWebサーバーを処理
void loop() {
  server.handleClient();
}

結果

　ｈｔｔｐ://192.168.1.xxでブラウザで確認します

続編はこちら↓