Added an image from the camera in the overview page

This commit is contained in:
Rene Zeldenthuis
2022-09-17 14:50:33 +02:00
parent c2891116da
commit 8a154ed469
3 changed files with 39 additions and 13 deletions

View File

@@ -144,7 +144,7 @@
<div class="col-8">{{FrameBuffers}}</div>
</div>
<div class="row">
<p class="col-4">JPEG quality:</p>
<div class="col-4">JPEG quality:</div>
<div class="col-8">{{JpegQuality}} (0-100)</div>
</div>
{{#CameraInitialized}}
@@ -170,9 +170,12 @@
<div class="card bg-light mb-3">
<h5 class="card-header">Camera stream</h5>
<div class="card-body">
</p>The camera stream can be found at the following location:</p>
</p>The camera stream can be found at the following location:
<a
href="rtsp://{{ThingName}}.local:{{RtspPort}}/mjpeg/1">rtsp://{{ThingName}}.local:{{RtspPort}}/mjpeg/1</a>
</p>
<img class="rounded mx-auto d-block" src="snapshot" alt="Camera image" width="25%">
</div>
</div>
</div>
</div>

File diff suppressed because one or more lines are too long

View File

@@ -71,6 +71,11 @@ void handle_root()
{"FlashSize", format_memory(ESP.getFlashChipSize(), 0)},
{"HeapSize", format_memory(ESP.getHeapSize())},
{"PsRamSize", format_memory(ESP.getPsramSize(), 0)},
// Diagnostics
{"Uptime", String(format_duration(millis() / 1000))},
{"FreeHeap", format_memory(ESP.getFreeHeap())},
{"MaxAllocHeap", format_memory(ESP.getMaxAllocHeap())},
{"NumRTSPSessions", camera_server != nullptr ? String(camera_server->num_connected()) : "N/A"},
// Network
{"MacAddress", WiFi.macAddress()},
{"AccessPoint", WiFi.SSID()},
@@ -91,12 +96,7 @@ void handle_root()
{"CameraInitialized", String(camera_init_result == ESP_OK)},
{"CameraInitResult", "0x" + String(camera_init_result, 16)},
{"CameraInitResultText", esp_err_to_name(camera_init_result)},
// Diagnostics
{"Uptime", String(format_duration(millis() / 1000))},
{"FreeHeap", format_memory(ESP.getFreeHeap())},
{"MaxAllocHeap", format_memory(ESP.getMaxAllocHeap())},
{"NumRTSPSessions", camera_server != nullptr ? String(camera_server->num_connected()) : "N/A"},
// URL
// RTSP
{"RtspPort", String(RTSP_PORT)}};
web_server.sendHeader("Cache-Control", "no-cache, no-store, must-revalidate");
@@ -112,7 +112,7 @@ void handle_restart()
{
// Redirect to root page
web_server.sendHeader("Location", "/", true);
web_server.send(302, "text/plain", "");
web_server.send(302, "text/plain", "Restart not possible.");
return;
}
@@ -128,6 +128,27 @@ void handle_restart()
ESP.restart();
}
void handle_snapshot()
{
log_v("handle_jpg");
if (camera_init_result != ESP_OK)
{
web_server.send(404, "text/plain", "Camera is not initialized");
return;
}
web_server.sendHeader("Cache-Control", "no-cache, no-store, must-revalidate");
web_server.sendContent("HTTP/1.1 200 OK\r\n"
"Content-Disposition: inline; filename=snapshot.jpg\r\n"
"Content-Type: image/jpeg\r\n\r\n");
// Make a copy in memory to prevent interaction with RTSP
auto fb_len = cam.getSize();
cam.run();
auto fb = (uint8_t*)memcpy(new uint8_t[cam.getSize()], cam.getfb(), fb_len);
web_server.sendContent(reinterpret_cast<const char *>(fb), fb_len);
delete []fb;
}
void on_config_saved()
{
log_v("on_config_saved");
@@ -211,6 +232,8 @@ void setup()
web_server.on("/config", []
{ iotWebConf.handleConfig(); });
web_server.on("/restart", HTTP_GET, handle_restart);
// Camera snapshot
web_server.on("/snapshot", handle_snapshot);
// bootstrap
web_server.on("/bootstrap.min.css", HTTP_GET, []()