ryan/esp32cam-rtsp
1
0
Fork 0
forked from external-repos/esp32cam-rtsp
Code Pull Requests Activity

- Added margin for alerts

Browse Source 
- Bootstrap css gzip
This commit is contained in:
Rene Zeldenthuis
2022-09-20 15:06:05 +02:00
parent cbdea51a12
commit e69f33c6a2
4 changed files with 14 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
html/index.html
View File

@@ -107,12 +107,12 @@
<div class="col-8">{{IpV6}}</div> <div class="col-8">{{IpV6}}</div>
</div> </div>
{{#NetworkState.ApMode}} {{#NetworkState.ApMode}}
<div class="alert alert-warning" role="alert"> <div class="mt-4 alert alert-warning" role="alert">
<p>Not connected to an access point. Consider configuring the access point.</p> <p>Not connected to an access point. Consider configuring the access point.</p>
</div> </div>
{{/NetworkState.ApMode}} {{/NetworkState.ApMode}}
{{#NetworkState.OnLine}} {{#NetworkState.OnLine}}
<div class="alert alert-success" role="alert"> <div class="mt-4 alert alert-success" role="alert">
<p>Connected to the access point</p> <p>Connected to the access point</p>
</div> </div>
{{/NetworkState.OnLine}} {{/NetworkState.OnLine}}
@@ -148,12 +148,12 @@
<div class="col-8">{{JpegQuality}} (0-100)</div> <div class="col-8">{{JpegQuality}} (0-100)</div>
</div> </div>
{{#CameraInitialized}} {{#CameraInitialized}}
<div class="alert alert-success" role="alert"> <div class="mt-4 alert alert-success" role="alert">
<p>Camera was initialized successfully!</p> <p>Camera was initialized successfully!</p>
</div> </div>
{{/CameraInitialized}} {{/CameraInitialized}}
{{^CameraInitialized}} {{^CameraInitialized}}
<div class="alert alert-danger" role="alert"> <div class="mt-4 alert alert-danger" role="alert">
<p>Failed to initialize the camera!</p> <p>Failed to initialize the camera!</p>
<p>Result: {{CameraInitResultText}} ({{CameraInitResult}})</p> <p>Result: {{CameraInitResultText}} ({{CameraInitResult}})</p>
<p>Please check hardware or correct the camera settings and restart.</p> <p>Please check hardware or correct the camera settings and restart.</p>

2
include/html_data.h
View File

@@ -4,5 +4,5 @@
// ****************************************************************************** // ******************************************************************************
constexpr char file_data_index_html[] = "<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta name=viewport content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"><link rel=stylesheet href=bootstrap.min.css><title>{{AppTitle}} v{{AppVersion}}</title></head><body><div class=container><h1 class=text-center>{{ThingName}}</h1><hr> {{#ConfigChanged}} <div class=\"alert alert-danger\" role=alert><p>The configuration has been changed.</p><p>It is recommended to restart the device.</p><button type=button class=\"btn btn-danger\" onclick=\"location.href='restart'\">Restart</button></div> {{/ConfigChanged}} <div class=row><div class=col-sm-6><div class=\"card bg-light mb-3\"><h5 class=card-header>ESP32</h5><div class=card-body><div class=row><div class=col-4>CPU model:</div><div class=col-8>{{ChipModel}} rev. {{ChipRevision}}</div></div><div class=row><div class=col-4>CPU speed:</div><div class=col-8>{{CpuFreqMHz}} Mhz</div></div><div class=row><div class=col-4>CPU cores:</div><div class=col-8>{{CpuCores}}</div></div><div class=row><div class=col-4>RAM size:</div><div class=col-8>{{HeapSize}}</div></div><div class=row><div class=col-4>PSRAM size:</div><div class=col-8>{{PsRamSize}}</div></div><div class=row><div class=col-4>Flash size:</div><div class=col-8>{{FlashSize}}</div></div></div></div></div><div class=col-sm-6><div class=\"card bg-light mb-3\"><h5 class=card-header>Diagnostics</h5><div class=card-body><div class=row><div class=col-4>Uptime:</div><div class=col-8>{{Uptime}}</div></div><div class=row><div class=col-4>RTSP sessions:</div><div class=col-8>{{NumRTSPSessions}}</div></div><div class=row><div class=col-4>Free heap:</div><div class=col-8>{{FreeHeap}}</div></div><div class=row><div class=col-4>Max free block:</div><div class=col-8>{{MaxAllocHeap}}</div></div></div></div></div></div><div class=row><div class=col-sm-6><div class=\"card bg-light mb-3\"><h5 class=card-header>Network</h5><div class=card-body><div class=row><div class=col-4>Mac address:</div><div class=col-8>{{MacAddress}}</div></div><div class=row><div class=col-4>Wifi mode:</div><div class=col-8>{{WifiMode}}</div></div><div class=row><div class=col-4>Access point:</div><div class=col-8>{{AccessPoint}}</div></div><div class=row><div class=col-4>Signal strength:</div><div class=col-8>{{SignalStrength}} dbm</div></div><div class=row><div class=col-4>IPv4 address:</div><div class=col-8>{{IpV4}}</div></div><div class=row><div class=col-4>IPv6 address:</div><div class=col-8>{{IpV6}}</div></div> {{#NetworkState.ApMode}} <div class=\"alert alert-warning\" role=alert><p>Not connected to an access point. Consider configuring the access point.</p></div> {{/NetworkState.ApMode}} {{#NetworkState.OnLine}} <div class=\"alert alert-success\" role=alert><p>Connected to the access point</p></div> {{/NetworkState.OnLine}} </div></div></div><div class=col-sm-6><div class=\"card bg-light mb-3\"><h5 class=card-header>Settings</h5><div class=card-body><div class=row><div class=col-4>Camera type:</div><div class=col-8>{{CameraType}}</div></div><div class=row><div class=col-4>Frame rate:</div><div class=col-8>{{FrameDuration}} ms ({{FrameFrequency}} f/s)</div></div><div class=row><div class=col-4>Frame size:</div><div class=col-8>{{FrameSize}}</div></div><div class=row><div class=col-4>Frame buffer location:</div><div class=col-8>{{FrameBufferLocation}}</div></div><div class=row><div class=col-4>Frame buffers:</div><div class=col-8>{{FrameBuffers}}</div></div><div class=row><div class=col-4>JPEG quality:</div><div class=col-8>{{JpegQuality}} (0-100)</div></div> {{#CameraInitialized}} <div class=\"alert alert-success\" role=alert><p>Camera was initialized successfully!</p></div> {{/CameraInitialized}} {{^CameraInitialized}} <div class=\"alert alert-danger\" role=alert><p>Failed to initialize the camera!</p><p>Result: {{CameraInitResultText}} ({{CameraInitResult}})</p><p>Please check hardware or correct the camera settings and restart.</p><button type=button class=\"btn btn-danger\" onclick=\"location.href='restart'\">Restart</button></div> {{/CameraInitialized}} </div></div></div></div><div class=row><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: <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><div class=\"d-grid gap-2 col-6 mx-auto\"><button type=button class=\"btn btn-lg btn-warning\" onclick=\"location.href='config'\">Settings</button></div></div></body></html>"; constexpr char file_data_index_html[] = "<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta name=viewport content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"><link rel=stylesheet href=bootstrap.min.css><title>{{AppTitle}} v{{AppVersion}}</title></head><body><div class=container><h1 class=text-center>{{ThingName}}</h1><hr> {{#ConfigChanged}} <div class=\"alert alert-danger\" role=alert><p>The configuration has been changed.</p><p>It is recommended to restart the device.</p><button type=button class=\"btn btn-danger\" onclick=\"location.href='restart'\">Restart</button></div> {{/ConfigChanged}} <div class=row><div class=col-sm-6><div class=\"card bg-light mb-3\"><h5 class=card-header>ESP32</h5><div class=card-body><div class=row><div class=col-4>CPU model:</div><div class=col-8>{{ChipModel}} rev. {{ChipRevision}}</div></div><div class=row><div class=col-4>CPU speed:</div><div class=col-8>{{CpuFreqMHz}} Mhz</div></div><div class=row><div class=col-4>CPU cores:</div><div class=col-8>{{CpuCores}}</div></div><div class=row><div class=col-4>RAM size:</div><div class=col-8>{{HeapSize}}</div></div><div class=row><div class=col-4>PSRAM size:</div><div class=col-8>{{PsRamSize}}</div></div><div class=row><div class=col-4>Flash size:</div><div class=col-8>{{FlashSize}}</div></div></div></div></div><div class=col-sm-6><div class=\"card bg-light mb-3\"><h5 class=card-header>Diagnostics</h5><div class=card-body><div class=row><div class=col-4>Uptime:</div><div class=col-8>{{Uptime}}</div></div><div class=row><div class=col-4>RTSP sessions:</div><div class=col-8>{{NumRTSPSessions}}</div></div><div class=row><div class=col-4>Free heap:</div><div class=col-8>{{FreeHeap}}</div></div><div class=row><div class=col-4>Max free block:</div><div class=col-8>{{MaxAllocHeap}}</div></div></div></div></div></div><div class=row><div class=col-sm-6><div class=\"card bg-light mb-3\"><h5 class=card-header>Network</h5><div class=card-body><div class=row><div class=col-4>Mac address:</div><div class=col-8>{{MacAddress}}</div></div><div class=row><div class=col-4>Wifi mode:</div><div class=col-8>{{WifiMode}}</div></div><div class=row><div class=col-4>Access point:</div><div class=col-8>{{AccessPoint}}</div></div><div class=row><div class=col-4>Signal strength:</div><div class=col-8>{{SignalStrength}} dbm</div></div><div class=row><div class=col-4>IPv4 address:</div><div class=col-8>{{IpV4}}</div></div><div class=row><div class=col-4>IPv6 address:</div><div class=col-8>{{IpV6}}</div></div> {{#NetworkState.ApMode}} <div class=\"mt-4 alert alert-warning\" role=alert><p>Not connected to an access point. Consider configuring the access point.</p></div> {{/NetworkState.ApMode}} {{#NetworkState.OnLine}} <div class=\"mt-4 alert alert-success\" role=alert><p>Connected to the access point</p></div> {{/NetworkState.OnLine}} </div></div></div><div class=col-sm-6><div class=\"card bg-light mb-3\"><h5 class=card-header>Settings</h5><div class=card-body><div class=row><div class=col-4>Camera type:</div><div class=col-8>{{CameraType}}</div></div><div class=row><div class=col-4>Frame rate:</div><div class=col-8>{{FrameDuration}} ms ({{FrameFrequency}} f/s)</div></div><div class=row><div class=col-4>Frame size:</div><div class=col-8>{{FrameSize}}</div></div><div class=row><div class=col-4>Frame buffer location:</div><div class=col-8>{{FrameBufferLocation}}</div></div><div class=row><div class=col-4>Frame buffers:</div><div class=col-8>{{FrameBuffers}}</div></div><div class=row><div class=col-4>JPEG quality:</div><div class=col-8>{{JpegQuality}} (0-100)</div></div> {{#CameraInitialized}} <div class=\"mt-4 alert alert-success\" role=alert><p>Camera was initialized successfully!</p></div> {{/CameraInitialized}} {{^CameraInitialized}} <div class=\"mt-4 alert alert-danger\" role=alert><p>Failed to initialize the camera!</p><p>Result: {{CameraInitResultText}} ({{CameraInitResult}})</p><p>Please check hardware or correct the camera settings and restart.</p><button type=button class=\"btn btn-danger\" onclick=\"location.href='restart'\">Restart</button></div> {{/CameraInitialized}} </div></div></div></div><div class=row><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: <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><div class=\"d-grid gap-2 col-6 mx-auto\"><button type=button class=\"btn btn-lg btn-warning\" onclick=\"location.href='config'\">Settings</button></div></div></body></html>";
constexpr char file_data_restart_html[] = "<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta name=viewport content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"><link rel=stylesheet href=bootstrap.min.css><meta http-equiv=refresh content=\"30;url=/index.html\"><title>{{AppTitle}} v{{AppVersion}}</title></head><body><div class=container><h1 class=text-center>{{ThingName}}</h1><hr><div class=\"jumbotron bg-light\"><h1 class=\"display-4 text-center\">Restart</h1><p class=\"lead text-center\">The device is restarting.</p><hr class=\"my-4 \"><p class=text-center>In some cases, the device requires a hard reset (power cycle).</p><p class=text-center>If this page takes longer than a minute, consider performing a power cycle.</p><div class=\"d-flex justify-content-center\"><div class=\"spinner-border text-danger\" role=status><span class=visually-hidden>Restarting...</span></div></div></div></div></body></html>"; constexpr char file_data_restart_html[] = "<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta name=viewport content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"><link rel=stylesheet href=bootstrap.min.css><meta http-equiv=refresh content=\"30;url=/index.html\"><title>{{AppTitle}} v{{AppVersion}}</title></head><body><div class=container><h1 class=text-center>{{ThingName}}</h1><hr><div class=\"jumbotron bg-light\"><h1 class=\"display-4 text-center\">Restart</h1><p class=\"lead text-center\">The device is restarting.</p><hr class=\"my-4 \"><p class=text-center>In some cases, the device requires a hard reset (power cycle).</p><p class=text-center>If this page takes longer than a minute, consider performing a power cycle.</p><div class=\"d-flex justify-content-center\"><div class=\"spinner-border text-danger\" role=status><span class=visually-hidden>Restarting...</span></div></div></div></div></body></html>";

2
include/html_data_gzip.h
View File

File diff suppressed because one or more lines are too long

24
src/main.cpp
View File

@@ -42,18 +42,13 @@ bool config_changed = false;
// Camera initialization result // Camera initialization result
esp_err_t camera_init_result; esp_err_t camera_init_result;
void stream_text_file(const char *content, const char *mime_type)
{
// Cache for 86400 seconds (one day)
web_server.sendHeader("Cache-Control", "max-age=86400");
web_server.send(200, mime_type, content);
}
void stream_text_file_gzip(const unsigned char *content, size_t length, const char *mime_type) void stream_text_file_gzip(const unsigned char *content, size_t length, const char *mime_type)
{ {
// Cache for 86400 seconds (one day) // Cache for 86400 seconds (one day)
web_server.sendHeader("Cache-Control", "max-age=86400"); web_server.sendHeader("Cache-Control", "max-age=86400");
web_server.sendContent(mime_type); web_server.sendHeader("Content-encoding", "gzip");
web_server.setContentLength(length);
web_server.send(200, mime_type, "");
web_server.sendContent(reinterpret_cast<const char *>(content), length); web_server.sendContent(reinterpret_cast<const char *>(content), length);
} }
@@ -146,14 +141,13 @@ void handle_snapshot()
return; 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 // Make a copy in memory to prevent interaction with RTSP
auto fb_len = cam.getSize();
cam.run(); cam.run();
auto fb_len = cam.getSize();
auto fb = (uint8_t *)memcpy(new uint8_t[cam.getSize()], cam.getfb(), fb_len); auto fb = (uint8_t *)memcpy(new uint8_t[cam.getSize()], cam.getfb(), fb_len);
web_server.sendHeader("Cache-Control", "no-cache, no-store, must-revalidate");
web_server.setContentLength(fb_len);
web_server.send(200, "image/jpeg", "");
web_server.sendContent(reinterpret_cast<const char *>(fb), fb_len); web_server.sendContent(reinterpret_cast<const char *>(fb), fb_len);
delete[] fb; delete[] fb;
} }
@@ -246,9 +240,7 @@ void setup()
// bootstrap // bootstrap
web_server.on("/bootstrap.min.css", HTTP_GET, []() web_server.on("/bootstrap.min.css", HTTP_GET, []()
{ { stream_text_file_gzip(file_data_bootstrap_min_css, sizeof(file_data_bootstrap_min_css), "text/css"); });
web_server.sendHeader("Content-encoding", "gzip");
stream_text_file_gzip(file_data_bootstrap_min_css, sizeof(file_data_bootstrap_min_css), "text/css"); });
web_server.onNotFound([]() web_server.onNotFound([]()
{ iotWebConf.handleNotFound(); }); { iotWebConf.handleNotFound(); });