CORE S3コピペで簡単カメラ画像をスマホ,PCに表示する方法

[env:m5stack-cores3]
platform = espressif32
board = m5stack-cores3
framework = arduino
board_build.arduino.memory_type = qio_qspi ; フラッシュメモリのタイプを指定
board_build.arduino.partitions = app3M_fat9M_16MB.csv ; フラッシュメモリのパーティション設定
lib_deps = 
	m5stack/M5CoreS3@^1.0.0
	m5stack/M5Unified@^0.1.12

#include "M5CoreS3.h"
#include <WebServer.h>  //サーバー設定用

#define JPEG_QUALITY 20      // JPEG画像品質（0〜100）
#define JPEG_UPDATE_TIME 200 // JPEG画像更新時間

WebServer server(80); // サーバー設定、ポート80で接続

// ローカルWi-Fi接続実行関数 *****************************************************
void localWifiConnect() {
  // ローカルWi-Fi接続先設定
  const char ssid[] = "自宅のWi-Fi接続先（SSID）を設定";  //接続先SSID
  const char pass[] = "Wi-Fi接続先のパスワードを設定"; //接続先パスワード

  // Wi-Fi接続確認（IPアドレスの取得で確認）
  CoreS3.Display.println("Wi-Fi Search!");
  while (WiFi.localIP()[0] == 0) { // IPアドレスが取得されるまで繰り返し
    WiFi.begin(ssid, pass);        //ローカル Wi-Fi接続実行
    CoreS3.Display.print("・");
    delay(3000); // 再接続待ち
  }
  // SSID, 接続IPアドレス表示
  CoreS3.Display.print("\nSSID : ");      // 接続先SSID表示
  CoreS3.Display.println(WiFi.SSID());
  CoreS3.Display.print("IP : ");          // IPアドレス表示
  CoreS3.Display.println(WiFi.localIP());
  Serial.println(WiFi.SSID());            // シリアル出力
  Serial.println(WiFi.localIP());
}

// カメラのストリーム画像を液晶画面に表示する関数 ****************************************
void streamCamera() {
  // カメラからフレームを取得
  if (CoreS3.Camera.get()) {
    // フレームを画面に表示(x座標, y座標, 画面幅, 画面高さ, フレームバッファポインタ)
    CoreS3.Display.pushImage(0, 0, 320, 240, (uint16_t *)CoreS3.Camera.fb->buf);
    CoreS3.Camera.free(); // 取得したフレームを解放
  } else {
    Serial.println("Camera capture failed"); // エラー表示
  }
}

// ルート（IPアドレス）アクセス時処理関数（ "/stream" にリダイレクト） ********************
void handleRootPath() {
  server.sendHeader("Location", "/stream"); // クライアントに対してLocationヘッダーを送信
  server.send(302, "text/plain", "");       // ステータスコード302で応答し、リダイレクトを指示
}
// ストリーミング処理関数（"IPアドレス/stream" アクセス時）  *****************************
void handleStreamPath() {
  WiFiClient client = server.client();     // 現在のクライアントの接続を取得
  String response = "HTTP/1.1 200 OK\r\n"; // HTTPレスポンスの初めの行
  response += "Content-Type: multipart/x-mixed-replace;boundary=frame\r\n\r\n"; // マルチパートでストリームデータを送信することと、区切りを「frame」とすることを宣言
  server.sendContent(response);            // マルチパートヘッダーを送信

  // リクエストがある限りクライアントへレスポンスとしてJPEG画像を送信
  uint8_t *out_jpg; // JPEGデータのポインタ格納用
  size_t out_len;   // JPEGデータの長さ格納用
  while (true) { // 終了条件まで持続的にストリーミング
    if (CoreS3.Camera.get()) { // カメラから新しいフレーム取得に成功したら
      // フレームをjpegに変換してwebsocket送信
      if(frame2jpg(CoreS3.Camera.fb, JPEG_QUALITY, &out_jpg, &out_len)) { // フレームをJPEGに変換し成功ならマルチパート形式でヘッダー設定
        response = "--frame\r\n";                       // 個々のフレームを判断する区切り文字を指定
        response += "Content-Type: image/jpeg\r\n";     // Content-TypeにJPEGを指定
        response += "Content-Length: " + String(out_len) + "\r\n\r\n"; // Content-Lengthに「out_len」を指定してヘッダー設定終了
        server.sendContent(response);                   // マルチパートヘッダーを送信

        // 液晶画面にフレームを表示
        CoreS3.Display.pushImage(0, 0, 320, 240, (uint16_t *)CoreS3.Camera.fb->buf);

        // JPEGデータ送信
        client.write(out_jpg, out_len); // 変換されたJPEGデータをクライアントに送信
        server.sendContent("\r\n\r\n"); // マルチパートの区切りシンボルを送信
        free(out_jpg);                  // JPEGデータを格納していたメモリを解放

        CoreS3.Camera.free(); // カメラのフレームバッファを解放
      } else {                // フレームをJPEGに変換できなかった場合
        Serial.println("Failed to convert the frame to JPEG"); // エラー表示
      }
    } else {                                   // フレームの取得に失敗したら
      Serial.println("Camera capture failed"); // エラー表示
    }

    if (!client.connected()) { // クライアントが切断されたら
      break;                   // ループを抜ける
    }
    delay(JPEG_UPDATE_TIME); // 送信するJPEG画像更新間隔（ローカルWi-Fi時は500推奨）
  }
}

// カメラサーバー実行関数 **********************************************************
void startCameraServer() {
  server.on("/", handleRootPath);         // ルートパスのリクエストハンドラを設定
  server.on("/stream", handleStreamPath); // ストリームパスのリクエストハンドラを設定
  server.begin();                         // サーバーを開始する
}

// 初期設定 ------------------------------------------------------------------
void setup() {
  auto cfg = M5.config(); // 本体初期化
  CoreS3.begin(cfg);
  Serial.begin(9600);     // シリアル通信初期化

  // 液晶画面初期化
  CoreS3.Display.setTextColor(CYAN); // 文字色
  CoreS3.Display.setFont(&fonts::lgfxJapanGothicP_24); // フォント
  CoreS3.Display.setTextSize(1);     // テキストサイズ
  CoreS3.Display.fillScreen(BLACK);  // 背景設定
  CoreS3.Display.setCursor(0, 0);    // 表示開始位置左上角（X,Y）

  // カメラ初期化
  if (!CoreS3.Camera.begin()) { // 初期化に失敗したら
    CoreS3.Display.drawCentreString("Camera Init Fail", 160, 185); // エラー表示
  }

  localWifiConnect();  // ローカルWi-Fi接続実行有効にする
  delay(3000);         // Wi-Fi接続情報表示時間

  startCameraServer(); // カメラサーバーを開始
}

// メイン --------------------------------------------------------------------
void loop() {
  server.handleClient(); // サーバーのハンドリング
  streamCamera();        // カメラフレームを画面表示
}

// カメラのストリーム画像を液晶画面に表示する関数 ****************************************
void streamCamera() {
  // カメラからフレームを取得
  if (CoreS3.Camera.get()) {
    // フレームを画面に表示(x座標, y座標, 画面幅, 画面高さ, フレームバッファポインタ)
    CoreS3.Display.pushImage(0, 0, 320, 240, (uint16_t *)CoreS3.Camera.fb->buf);
    CoreS3.Camera.free(); // 取得したフレームを解放
  } else {
    Serial.println("Camera capture failed"); // エラー表示
  }
}

uint8_t *out_jpg; // JPEGデータのポインタ格納用
size_t out_len;   // JPEGデータの長さ格納用

if (CoreS3.Camera.get()) { // カメラから新しいフレーム取得に成功したら
  frame2jpg(CoreS3.Camera.fb, 100, &out_jpg, &out_len); // JPEG変換
}

// ストリーミング処理関数（"IPアドレス/stream" アクセス時）  *****************************
void handleStreamPath() {
  WiFiClient client = server.client();     // 現在のクライアントの接続を取得
  String response = "HTTP/1.1 200 OK\r\n"; // HTTPレスポンスの初めの行
  response += "Content-Type: multipart/x-mixed-replace;boundary=frame\r\n\r\n"; // マルチパートでストリームデータを送信することと、区切りを「frame」とすることを宣言
  server.sendContent(response);            // マルチパートヘッダーを送信

  // リクエストがある限りクライアントへレスポンスとしてJPEG画像を送信
  uint8_t *out_jpg; // JPEGデータのポインタ格納用
  size_t out_len;   // JPEGデータの長さ格納用
  while (true) { // 終了条件まで持続的にストリーミング
    if (CoreS3.Camera.get()) { // カメラから新しいフレーム取得に成功したら
      // フレームをjpegに変換してwebsocket送信
      if(frame2jpg(CoreS3.Camera.fb, JPEG_QUALITY, &out_jpg, &out_len)) { // フレームをJPEGに変換し成功ならマルチパート形式でヘッダー設定
        response = "--frame\r\n";                       // 個々のフレームを判断する区切り文字を指定
        response += "Content-Type: image/jpeg\r\n";     // Content-TypeにJPEGを指定
        response += "Content-Length: " + String(out_len) + "\r\n\r\n"; // Content-Lengthに「out_len」を指定してヘッダー設定終了
        server.sendContent(response);                   // マルチパートヘッダーを送信

        // 液晶画面にフレームを表示
        CoreS3.Display.pushImage(0, 0, 320, 240, (uint16_t *)CoreS3.Camera.fb->buf);

        // JPEGデータ送信
        client.write(out_jpg, out_len); // 変換されたJPEGデータをクライアントに送信
        server.sendContent("\r\n\r\n"); // マルチパートの区切りシンボルを送信
        free(out_jpg);                  // JPEGデータを格納していたメモリを解放

        CoreS3.Camera.free(); // カメラのフレームバッファを解放
      } else {                // フレームをJPEGに変換できなかった場合
        Serial.println("Failed to convert the frame to JPEG"); // エラー表示
      }
    } else {                                   // フレームの取得に失敗したら
      Serial.println("Camera capture failed"); // エラー表示
    }

    if (!client.connected()) { // クライアントが切断されたら
      break;                   // ループを抜ける
    }
    delay(JPEG_UPDATE_TIME); // 送信するJPEG画像更新間隔（ローカルWi-Fi時は500推奨）
  }
}

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CAMERA-MONITOR</title>
    <style>
      body{font-family: sans-serif; background-color: #222222; max-width: 480px; margin: 0 auto; align-items: center;}
      h1 {color:#ffffff; text-align: center; font-size: 28px; margin: 10px auto;}
      div {display: flex; flex-direction: row; justify-content: center; margin-top: 10px;}
    </style>
  </head>
  <body>
    <h1>CAMERA-MONITOR</h1>
    <div>
      <form id="id_form1" onsubmit="return startStream()">
        <input id="input_IP" type="text" placeholder="カメラIPアドレス" />
      </form>
    </div>
    <hr>
    <div id="output"></div>

    <script type="text/javascript">
      // カメラ画像取得
      const startStream = () => {
        let target = document.getElementById("output");
        let ip = document.forms.id_form1.input_IP.value;
        console.log("Start Stream: http://" + ip + "/stream");
        stream = "<img src='http://" + ip + "' width='100%' height='100%'>";
        target.innerHTML = stream;
        return false;
      }
    </script>
  </body>
</html>