質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Square

Squareは独自のカードリーダーを使ってスマートフォンやタブレットにクレジットカード決済機能を提供します。レジアプリはiOS/AndroidアプリやモバイルWebサイトとAPI連携できます。その他、Webサイト向けの決済APIや商品、顧客管理APIも提供しています。

Q&A

0回答

590閲覧

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

yo8

総合スコア0

Square

Squareは独自のカードリーダーを使ってスマートフォンやタブレットにクレジットカード決済機能を提供します。レジアプリはiOS/AndroidアプリやモバイルWebサイトとAPI連携できます。その他、Webサイト向けの決済APIや商品、顧客管理APIも提供しています。

0グッド

1クリップ

投稿2023/02/27 17:17

実現したいこと

  • 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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問