forked from external-repos/esp32cam-rtsp
276 lines
9.5 KiB
HTML
276 lines
9.5 KiB
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">
|
|
<style>
|
|
html,
|
|
body {
|
|
font-family: Arial, Verdana, Helvetica, sans-serif;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.flex-table {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, 25%);
|
|
}
|
|
|
|
.flex-table>.row {
|
|
grid-column-start: 2;
|
|
grid-column-end: 3;
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.alert {
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.alert-info {
|
|
color: #31708f;
|
|
background-color: #d9edf7;
|
|
border-color: #bce8f1;
|
|
}
|
|
|
|
.alert-success {
|
|
color: #3c763d;
|
|
background-color: #dff0d8;
|
|
border-color: #d6e9c6;
|
|
}
|
|
|
|
.alert-warning {
|
|
color: #8a6d3b;
|
|
background-color: #fcf8e3;
|
|
border-color: #faebcc;
|
|
}
|
|
|
|
.alert-danger {
|
|
color: #a94442;
|
|
background-color: #f2dede;
|
|
border-color: #ebccd1;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
margin-bottom: 0;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
border: 1px solid transparent;
|
|
padding: 6px 12px;
|
|
font-size: 14px;
|
|
line-height: 1.42857143;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.btn-lg {
|
|
padding: 10px 16px;
|
|
font-size: 18px;
|
|
line-height: 1.3333333;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.btn-primary {
|
|
color: #fff;
|
|
background-color: #337ab7;
|
|
border-color: #2e6da4;
|
|
}
|
|
|
|
.btn-danger {
|
|
color: #fff;
|
|
background-color: #d9534f;
|
|
border-color: #d43f3a;
|
|
}
|
|
</style>
|
|
<title>{{AppTitle}} v{{AppVersion}}</title>
|
|
</head>
|
|
|
|
<body>
|
|
<h1 class="text-center">{{ThingName}}</h1>
|
|
<hr>
|
|
|
|
<div class="alert alert-info">
|
|
<h3 class="text-center">
|
|
Press on the button below to change the settings<br><br>
|
|
<button type="button" class="btn btn-lg btn-primary" onclick="location.href='config'">Change
|
|
settings</button>
|
|
</h3>
|
|
</div>
|
|
|
|
{{#ConfigChanged}}
|
|
<div class="alert alert-danger">
|
|
<h3 class="text-center">
|
|
The configuration has been changed.<br>
|
|
It is recommended to restart the device.<br><br>
|
|
<button type="button" class="btn btn-danger" onclick="location.href='restart'">Restart</button>
|
|
</h3>
|
|
</div>
|
|
{{/ConfigChanged}}
|
|
<h2 class="text-center">ESP32</h2>
|
|
<div class="flex-table">
|
|
<div class="row">SDK Version:</div>
|
|
<div>{{SDKVersion}}</div>
|
|
<div class="row">CPU model:</div>
|
|
<div>{{ChipModel}} rev. {{ChipRevision}}</div>
|
|
<div class="row">CPU speed:</div>
|
|
<div>{{CpuFreqMHz}} Mhz</div>
|
|
<div class="row">CPU cores:</div>
|
|
<div>{{CpuCores}}</div>
|
|
<div class="row">RAM size:</div>
|
|
<div>{{HeapSize}}</div>
|
|
<div class="row">PSRAM size:</div>
|
|
<div>{{PsRamSize}}</div>
|
|
<div class="row">Flash size:</div>
|
|
<div>{{FlashSize}}</div>
|
|
</div>
|
|
|
|
<h2 class="text-center">Diagnostics</h2>
|
|
<div class="flex-table">
|
|
<div class="row">Uptime:</div>
|
|
<div>{{Uptime}}</div>
|
|
<div class="row">Chip temperature:</div>
|
|
<div>{{Temperature}} °C</div>
|
|
<div class="row">RTSP sessions:</div>
|
|
<div>{{NumRTSPSessions}}</div>
|
|
<div class="row">Free heap:</div>
|
|
<div>{{FreeHeap}}</div>
|
|
<div class="row">Max free block:</div>
|
|
<div>{{MaxAllocHeap}}</div>
|
|
</div>
|
|
|
|
<h2 class="text-center">Peripheral</h2>
|
|
<div class="flex-table">
|
|
<div class="row">Board type:</div>
|
|
<div>{{BoardType}}</div>
|
|
<div class="row">LED intensity:</div>
|
|
<div>{{LedIntensity}} [0-100]</div>
|
|
</div>
|
|
|
|
<h2 class="text-center">Network</h2>
|
|
<div class="flex-table">
|
|
<div class="row">Host name:</div>
|
|
<div>{{HostName}}</div>
|
|
<div class="row">Mac address:</div>
|
|
<div>{{MacAddress}}</div>
|
|
<div class="row">Wifi mode:</div>
|
|
<div>{{WifiMode}}</div>
|
|
<div class="row">Access point:</div>
|
|
<div>{{AccessPoint}}</div>
|
|
<div class="row">Signal strength:</div>
|
|
<div>{{SignalStrength}} dbm</div>
|
|
<div class="row">IPv4 address:</div>
|
|
<div>{{IpV4}}</div>
|
|
<div class="row">IPv6 address:</div>
|
|
<div>{{IpV6}}</div>
|
|
</div>
|
|
|
|
{{#NetworkState.ApMode}}
|
|
<div class="alert alert-warning">
|
|
<h3 class="text-center">Not connected to an access point.<br>Consider configuring the access point.</h3>
|
|
</div>
|
|
{{/NetworkState.ApMode}}
|
|
|
|
{{#NetworkState.OnLine}}
|
|
<div class="alert alert-success">
|
|
<h3 class="text-center">Connected to the access point</h3>
|
|
</div>
|
|
{{/NetworkState.OnLine}}
|
|
|
|
<h2 class="text-center">Camera</h2>
|
|
<div class="flex-table">
|
|
<div class="row">Frame rate:</div>
|
|
<div>{{FrameDuration}} ms ({{FrameFrequency}} f/s)</div>
|
|
<div class="row">Frame size:</div>
|
|
<div>{{FrameSize}}</div>
|
|
<div class="row">JPEG quality:</div>
|
|
<div>{{JpegQuality}} [1-100]</div>
|
|
<div class="row">Enable PSRAM:</div>
|
|
<div>{{#EnablePSRAM}}Enabled{{/EnablePSRAM}}{{^EnablePSRAM}}Disabled{{/EnablePSRAM}}</div>
|
|
<div class="row">Number of frame buffers:</div>
|
|
<div>{{FrameBuffers}}</div>
|
|
<div class="row">Brightness:</div>
|
|
<div>{{Brightness}} [-2,2]</div>
|
|
<div class="row">Contrast:</div>
|
|
<div>{{Contrast}} [-2,2]</div>
|
|
<div class="row">Saturation:</div>
|
|
<div>{{Saturation}} [-2,2]</div>
|
|
<div class="row">Special effect:</div>
|
|
<div>{{SpecialEffect}}</div>
|
|
<div class="row">White balance:</div>
|
|
<div>{{#WhiteBal}}Auto{{/WhiteBal}}{{^WhiteBal}}Manual{{/WhiteBal}}</div>
|
|
<div class="row">AWB gain:</div>
|
|
<div>{{#AwbGain}}Auto{{/AwbGain}}{{^AwbGain}}Manual{{/AwbGain}}</div>
|
|
<div class="row">WB mode:</div>
|
|
<div>{{WbMode}}</div>
|
|
<div class="row">Exposure control:</div>
|
|
<div>{{#ExposureCtrl}}Auto{{/ExposureCtrl}}{{^ExposureCtrl}}Manual{{/ExposureCtrl}}</div>
|
|
<div class="row">Auto exposure control (dsp):</div>
|
|
<div>{{#Aec2}}Enabled{{/Aec2}}{{^Aec2}}Disabled{{/Aec2}}</div>
|
|
<div class="row">Auto Exposure level:</div>
|
|
<div>{{AeLevel}}</div>
|
|
<div class="row">Manual exposure value:</div>
|
|
<div>{{AecValue}}</div>
|
|
<div class="row">Gain control:</div>
|
|
<div>{{#GainCtrl}}Auto{{/GainCtrl}}{{^GainCtrl}}Manual{{/GainCtrl}}</div>
|
|
<div class="row">AGC gain:</div>
|
|
<div>{{AgcGain}}</div>
|
|
<div class="row">Gain ceiling:</div>
|
|
<div>{{GainCeiling}}</div>
|
|
<div class="row">Black pixel correct:</div>
|
|
<div>{{#Bpc}}Auto{{/Bpc}}{{^Bpc}}Manual{{/Bpc}}</div>
|
|
<div class="row">White pixel correct:</div>
|
|
<div>{{#Wpc}}Auto{{/Wpc}}{{^Wpc}}Manual{{/Wpc}}</div>
|
|
<div class="row">Gamma correct:</div>
|
|
<div>{{#RawGma}}Enabled{{/RawGma}}{{^RawGma}}Disabled{{/RawGma}}</div>
|
|
<div class="row">Lens correction:</div>
|
|
<div>{{#Lenc}}Enabled{{/Lenc}}{{^Lenc}}Disabled{{/Lenc}}</div>
|
|
<div class="row">Horizontal mirror:</div>
|
|
<div>{{#HMirror}}Mirrored{{/HMirror}}{{^HMirror}}Normal{{/HMirror}}</div>
|
|
<div class="row">Vertical flip:</div>
|
|
<div>{{#VFlip}}Flipped{{/VFlip}}{{^VFlip}}Normal{{/VFlip}}</div>
|
|
<div class="row">Downsize enable:</div>
|
|
<div>{{#Dcw}}Enabled{{/Dcw}}{{^Dcw}}Disabled{{/Dcw}}</div>
|
|
<div class="row">Color bar:</div>
|
|
<div>{{#ColorBar}}Enabled{{/ColorBar}}{{^ColorBar}}Camera{{/ColorBar}}</div>
|
|
</div>
|
|
|
|
{{#CameraInitialized}}
|
|
<div class="alert alert-success">
|
|
<h3 class="text-center">Camera was initialized successfully!</h3>
|
|
</div>
|
|
{{/CameraInitialized}}
|
|
{{^CameraInitialized}}
|
|
<div class="alert alert-danger">
|
|
<h3 class="text-center">Failed to initialize the camera!<br>
|
|
Result: {{CameraInitResult}} ({{CameraInitResultText}})<br>
|
|
Please check hardware or correct the camera settings and restart.<br><br>
|
|
<button type="button" class="btn btn-danger" onclick="location.href='restart'">Restart</button>
|
|
</h3>
|
|
</div>
|
|
{{/CameraInitialized}}
|
|
|
|
|
|
<h2 class="text-center">Special URLs / API</h2>
|
|
<div class="flex-table">
|
|
<div class="row">RTSP camera stream:</div>
|
|
<div><a href="rtsp://{{IpV4}}:{{RtspPort}}/mjpeg/1">rtsp://{{IpV4}}:{{RtspPort}}/mjpeg/1</a></div>
|
|
<div class="row">JPEG Motion stream:</div>
|
|
<div><a href="http://{{IpV4}}/stream" target="_blank">http://{{IpV4}}/stream</a></div>
|
|
<div class="row">Snapshot of the camera:</div>
|
|
<div><a href="http://{{IpV4}}/snapshot " target="_blank">http://{{IpV4}}/snapshot</a> </div>
|
|
<div class="row">Intensity of the flash led (0-255):</div>
|
|
<div><a href="http: //{{IpV4}}/flash?v=0">http://{{IpV4}}/flash?v=0</a> (Authentication required)</div>
|
|
<div class="row">Restart the camera:</div>
|
|
<div><a href="http://{{IpV4}}/restart">http://{{IpV4}}/restart</a> (Authentication required)</div>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html> |