forked from external-repos/esp32cam-rtsp
316 lines
16 KiB
HTML
316 lines
16 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">
|
|
<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">SDK Version:</div>
|
|
<div class="col-8">{{SDKVersion}}</div>
|
|
</div>
|
|
<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">Peripheral</h5>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-4">Board type:</div>
|
|
<div class="col-8">{{BoardType}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">LED intensity:</div>
|
|
<div class="col-8">{{LedIntensity}} [0-100]</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-light mb-3">
|
|
<h5 class="card-header">Network</h5>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-4">Host name:</div>
|
|
<div class="col-8">{{HostName}}</div>
|
|
</div>
|
|
<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">
|
|
<h4 class="text-center">Not connected to an access point.<br>Consider configuring the access point.</h4>
|
|
</div>
|
|
{{/NetworkState.ApMode}}
|
|
{{#NetworkState.OnLine}}
|
|
<div class="mt-4 alert alert-success" role="alert">
|
|
<h4 class="text-center">Connected to the access point</h4>
|
|
</div>
|
|
{{/NetworkState.OnLine}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="card bg-light mb-3">
|
|
<h5 class="card-header">Camera</h5>
|
|
<div class="card-body">
|
|
<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">JPEG quality:</div>
|
|
<div class="col-8">{{JpegQuality}} [1-100]</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">Enable PSRAM:</div>
|
|
<div class="col-8">{{#EnablePSRAM}}Enabled{{/EnablePSRAM}}{{^EnablePSRAM}}Disabled{{/EnablePSRAM}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">Number of frame buffers:</div>
|
|
<div class="col-8">{{FrameBuffers}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">Brightness:</div>
|
|
<div class="col-8">{{Brightness}} [-2,2]</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">Contrast:</div>
|
|
<div class="col-8">{{Contrast}} [-2,2]</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">Saturation:</div>
|
|
<div class="col-8">{{Saturation}} [-2,2]</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">Special effect:</div>
|
|
<div class="col-8">{{SpecialEffect}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">White balance:</div>
|
|
<div class="col-8">{{#WhiteBal}}Auto{{/WhiteBal}}{{^WhiteBal}}Manual{{/WhiteBal}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">AWB gain:</div>
|
|
<div class="col-8">{{#AwbGain}}Auto{{/AwbGain}}{{^AwbGain}}Manual{{/AwbGain}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">WB mode:</div>
|
|
<div class="col-8">{{WbMode}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">Exposure control:</div>
|
|
<div class="col-8">
|
|
{{#ExposureCtrl}}Auto{{/ExposureCtrl}}{{^ExposureCtrl}}Manual{{/ExposureCtrl}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">Auto exposure control (dsp):</div>
|
|
<div class="col-8">{{#Aec2}}Enabled{{/Aec2}}{{^Aec2}}Disabled{{/Aec2}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">Auto Exposure level:</div>
|
|
<div class="col-8">{{AeLevel}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">Manual exposure value:</div>
|
|
<div class="col-8">{{AecValue}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">Gain control:</div>
|
|
<div class="col-8">{{#GainCtrl}}Auto{{/GainCtrl}}{{^GainCtrl}}Manual{{/GainCtrl}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">AGC gain:</div>
|
|
<div class="col-8">{{AgcGain}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">Gain ceiling:</div>
|
|
<div class="col-8">{{GainCeiling}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">Black pixel correct:</div>
|
|
<div class="col-8">{{#Bpc}}Auto{{/Bpc}}{{^Bpc}}Manual{{/Bpc}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">White pixel correct:</div>
|
|
<div class="col-8">{{#Wpc}}Auto{{/Wpc}}{{^Wpc}}Manual{{/Wpc}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">Gamma correct:</div>
|
|
<div class="col-8">{{#RawGma}}Enabled{{/RawGma}}{{^RawGma}}Disabled{{/RawGma}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">Lens correction:</div>
|
|
<div class="col-8">{{#Lenc}}Enabled{{/Lenc}}{{^Lenc}}Disabled{{/Lenc}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">Horizontal mirror:</div>
|
|
<div class="col-8">{{#HMirror}}Mirrored{{/HMirror}}{{^HMirror}}Normal{{/HMirror}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">Vertical flip:</div>
|
|
<div class="col-8">{{#VFlip}}Flipped{{/VFlip}}{{^VFlip}}Normal{{/VFlip}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">Downsize enable:</div>
|
|
<div class="col-8">{{#Dcw}}Enabled{{/Dcw}}{{^Dcw}}Disabled{{/Dcw}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">Color bar:</div>
|
|
<div class="col-8">{{#ColorBar}}Enabled{{/ColorBar}}{{^ColorBar}}Camera{{/ColorBar}}</div>
|
|
</div>
|
|
{{#CameraInitialized}}
|
|
<div class="mt-4 alert alert-success" role="alert">
|
|
<h4 class="text-center">Camera was initialized successfully!</h4>
|
|
</div>
|
|
{{/CameraInitialized}}
|
|
{{^CameraInitialized}}
|
|
<div class="mt-4 alert alert-danger" role="alert">
|
|
<h4 class="text-center">Failed to initialize the camera!</h4>
|
|
<p>Result: {{CameraInitResult}} ({{CameraInitResultText}})</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">Special URLs / API</h5>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<span>
|
|
The camera RTSP stream can be found at:
|
|
<a href="rtsp://{{IpV4}}:{{RtspPort}}/mjpeg/1">rtsp://{{IpV4}}:{{RtspPort}}/mjpeg/1</a>
|
|
</span>
|
|
</div>
|
|
<div class="row">
|
|
<span>
|
|
A snapshot of the camera can be found at:
|
|
<a href="http://{{IpV4}}/snapshot">http://{{IpV4}}/snapshot</a>
|
|
</span>
|
|
</div>
|
|
<div class="row">
|
|
<span>
|
|
The intensity of the flash led (0-255) can be controlled using:
|
|
<a href="http://{{IpV4}}/flash?v=0">http://{{IpV4}}/flash?v=value</a>.
|
|
Authentication is required.
|
|
</span>
|
|
</div>
|
|
<div class="row">
|
|
<span>
|
|
Restarting the camera can be done using:
|
|
<a href="http://{{IpV4}}/restart">http://{{IpV4}}/restart</a>.
|
|
Authentication is required.
|
|
</span>
|
|
</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> |