ESP32-CAMを用いてngrokを通じてストリームしたいです

実現したいこと

ESP32-CAMを用いてngrokを通じてストリームしたい
ngrokでトンネリングしたURLを用いてquasar上でストリームしたい

前提

ESP32のボードマネージャのバージョンが1.0.6の時
ローカル環境をngrokでトンネリングして，ポート番号80番のサーバーを立ち上げようとすると「431 Request Header Fields Too Large」と返されそもそも立ち上がらなかったです．

ESP32のボードマネージャのバージョンが2.0.7の時
ローカル環境をngrokでトンネリングするとサーバーは立ち上げることはできました．しかしStart Streamをクリックしてもストリームが始まりません．

発生している問題・エラーメッセージ

ESP32のボードマネージャのバージョンをアップデートすることで「431 Request Header Fields Too Large」に関しては解決できたので以降はバージョンが2.0.7の時のことを記載します．

Start Streamをクリックしたときの開発者ツールの様子を添付いたします．

該当のソースコード

Arduino IDEのスケッチ例→ESP32→Camera→CameraWebServerを使用しました．

C＋＋
1#include "esp_camera.h"
2#include <WiFi.h>
3
4//
5// WARNING!!! PSRAM IC required for UXGA resolution and high JPEG quality
6//            Ensure ESP32 Wrover Module or other board with PSRAM is selected
7//            Partial images will be transmitted if image exceeds buffer size
8//
9//            You must select partition scheme from the board menu that has at least 3MB APP space.
10//            Face Recognition is DISABLED for ESP32 and ESP32-S2, because it takes up from 15 
11//            seconds to process single frame. Face Detection is ENABLED if PSRAM is enabled as well
12
13// ===================
14// Select camera model
15// ===================
16//#define CAMERA_MODEL_WROVER_KIT // Has PSRAM
17//#define CAMERA_MODEL_ESP_EYE // Has PSRAM
18//#define CAMERA_MODEL_ESP32S3_EYE // Has PSRAM
19//#define CAMERA_MODEL_M5STACK_PSRAM // Has PSRAM
20//#define CAMERA_MODEL_M5STACK_V2_PSRAM // M5Camera version B Has PSRAM
21//#define CAMERA_MODEL_M5STACK_WIDE // Has PSRAM
22//#define CAMERA_MODEL_M5STACK_ESP32CAM // No PSRAM
23//#define CAMERA_MODEL_M5STACK_UNITCAM // No PSRAM
24#define CAMERA_MODEL_AI_THINKER // Has PSRAM
25//#define CAMERA_MODEL_TTGO_T_JOURNAL // No PSRAM
26// ** Espressif Internal Boards **
27//#define CAMERA_MODEL_ESP32_CAM_BOARD
28//#define CAMERA_MODEL_ESP32S2_CAM_BOARD
29//#define CAMERA_MODEL_ESP32S3_CAM_LCD
30
31#include "camera_pins.h"
32
33// ===========================
34// Enter your WiFi credentials
35// ===========================
36const char* ssid = "*****************";
37const char* password = "****************";
38
39
40
41void startCameraServer();
42void setupLedFlash(int pin);
43
44void setup() {
45  Serial.begin(115200);
46  Serial.setDebugOutput(true);
47  Serial.println();
48
49  camera_config_t config;
50  config.ledc_channel = LEDC_CHANNEL_0;
51  config.ledc_timer = LEDC_TIMER_0;
52  config.pin_d0 = Y2_GPIO_NUM;
53  config.pin_d1 = Y3_GPIO_NUM;
54  config.pin_d2 = Y4_GPIO_NUM;
55  config.pin_d3 = Y5_GPIO_NUM;
56  config.pin_d4 = Y6_GPIO_NUM;
57  config.pin_d5 = Y7_GPIO_NUM;
58  config.pin_d6 = Y8_GPIO_NUM;
59  config.pin_d7 = Y9_GPIO_NUM;
60  config.pin_xclk = XCLK_GPIO_NUM;
61  config.pin_pclk = PCLK_GPIO_NUM;
62  config.pin_vsync = VSYNC_GPIO_NUM;
63  config.pin_href = HREF_GPIO_NUM;
64  config.pin_sscb_sda = SIOD_GPIO_NUM;
65  config.pin_sscb_scl = SIOC_GPIO_NUM;
66  config.pin_pwdn = PWDN_GPIO_NUM;
67  config.pin_reset = RESET_GPIO_NUM;
68  config.xclk_freq_hz = 20000000;
69  config.frame_size = FRAMESIZE_UXGA;
70  config.pixel_format = PIXFORMAT_JPEG; // for streaming
71  //config.pixel_format = PIXFORMAT_RGB565; // for face detection/recognition
72  config.grab_mode = CAMERA_GRAB_WHEN_EMPTY;
73  config.fb_location = CAMERA_FB_IN_PSRAM;
74  config.jpeg_quality = 12;
75  config.fb_count = 1;
76  
77  // if PSRAM IC present, init with UXGA resolution and higher JPEG quality
78  //                      for larger pre-allocated frame buffer.
79  if(config.pixel_format == PIXFORMAT_JPEG){
80    if(psramFound()){
81      config.jpeg_quality = 10;
82      config.fb_count = 2;
83      config.grab_mode = CAMERA_GRAB_LATEST;
84    } else {
85      // Limit the frame size when PSRAM is not available
86      config.frame_size = FRAMESIZE_SVGA;
87      config.fb_location = CAMERA_FB_IN_DRAM;
88    }
89  } else {
90    // Best option for face detection/recognition
91    config.frame_size = FRAMESIZE_240X240;
92#if CONFIG_IDF_TARGET_ESP32S3
93    config.fb_count = 2;
94#endif
95  }
96
97#if defined(CAMERA_MODEL_ESP_EYE)
98  pinMode(13, INPUT_PULLUP);
99  pinMode(14, INPUT_PULLUP);
100#endif
101
102  // camera init
103  esp_err_t err = esp_camera_init(&config);
104  if (err != ESP_OK) {
105    Serial.printf("Camera init failed with error 0x%x", err);
106    return;
107  }
108
109  sensor_t * s = esp_camera_sensor_get();
110  // initial sensors are flipped vertically and colors are a bit saturated
111  if (s->id.PID == OV3660_PID) {
112    s->set_vflip(s, 1); // flip it back
113    s->set_brightness(s, 1); // up the brightness just a bit
114    s->set_saturation(s, -2); // lower the saturation
115  }
116  // drop down frame size for higher initial frame rate
117  if(config.pixel_format == PIXFORMAT_JPEG){
118    s->set_framesize(s, FRAMESIZE_QVGA);
119  }
120
121#if defined(CAMERA_MODEL_M5STACK_WIDE) || defined(CAMERA_MODEL_M5STACK_ESP32CAM)
122  s->set_vflip(s, 1);
123  s->set_hmirror(s, 1);
124#endif
125
126#if defined(CAMERA_MODEL_ESP32S3_EYE)
127  s->set_vflip(s, 1);
128#endif
129
130// Setup LED FLash if LED pin is defined in camera_pins.h
131#if defined(LED_GPIO_NUM)
132  setupLedFlash(LED_GPIO_NUM);
133#endif
134
135  WiFi.begin(ssid, password);
136  WiFi.setSleep(false);
137
138  while (WiFi.status() != WL_CONNECTED) {
139    delay(500);
140    Serial.print(".");
141  }
142  Serial.println("");
143  Serial.println("WiFi connected");
144
145  startCameraServer();
146
147  Serial.print("Camera Ready! Use 'http://");
148  Serial.print(WiFi.localIP());
149  Serial.println("' to connect");
150}
151
152void loop() {
153  // Do nothing. Everything is done in another task by the web server
154  delay(10000);
155}
156

試したこと

以下のコードを上記のコードに追加しました．

C＋＋
1#define STREAM_PORT 81
2#define STREAM_URL "https:*****************.jp.ngrok.io/stream"

補足情報（FW/ツールのバージョンなど）

最終目標はquasar上でストリームすることなのでその時の開発者ツールの様子も添付いたします．ローカル環境においてはストリーム出来ました．

開発者ツールのHeaders

Request URL: https://***********************.jp.ngrok.io/stream
Request Method: GET
Status Code: 200
Remote Address: [2406:da14:540:e900::6e:0]:443
Referrer Policy: strict-origin-when-cross-origin
content-length: 1545
content-security-policy: default-src 'self' https://cdn.ngrok.com 'unsafe-eval' 'unsafe-inline'
content-type: text/html
date: Mon, 27 Feb 2023 17:11:43 GMT
ngrok-trace-id: 2ab2d3eccd3155312d83c9b3f49c29cc
referrer-policy: no-referrer
x-content-type-options: nosniff
:authority: **************************.jp.ngrok.io
:method: GET
:path: /stream
:scheme: https
accept: image/avif,image/webp,image/apng,image/svg+xml,image/,/;q=0.8
accept-encoding: gzip, deflate, br
accept-language: ja,en-US;q=0.9,en;q=0.8
referer: http://localhost:8080/
sec-ch-ua: "Chromium";v="110", "Not A(Brand";v="24", "Google Chrome";v="110"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
sec-fetch-dest: image
sec-fetch-mode: no-cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36