ryan/esp32cam-rtsp
1
0
Fork 0
forked from external-repos/esp32cam-rtsp
Code Pull Requests Activity
Files
da052045a5d13d6f47192c98c7ddc8f13c78e247
esp32cam-rtsp/html/index.html
Rene Zeldenthuis 74886cd2b4 - Updated MD/HTML
2023-02-09 01:12:44 +01:00

312 lines
14 KiB
HTML
Raw Blame History

<!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">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">
<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">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">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}} [1-100]</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}}</div>
</div>
<div class="row">
<div class="col-4">AWB gain:</div>
<div class="col-8">{{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}}</div>
</div>
<div class="row">
<div class="col-4">AEC2:</div>
<div class="col-8">{{Aec2}}</div>
</div>
<div class="row">
<div class="col-4">AE level:</div>
<div class="col-8">{{AeLevel}}</div>
</div>
<div class="row">
<div class="col-4">AEC value:</div>
<div class="col-8">{{AecValue}}</div>
</div>
<div class="row">
<div class="col-4">Gain control:</div>
<div class="col-8">{{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">BPC:</div>
<div class="col-8">{{Bpc}}</div>
</div>
<div class="row">
<div class="col-4">WPC:</div>
<div class="col-8">{{Wpc}}</div>
</div>
<div class="row">
<div class="col-4">Raw gamma:</div>
<div class="col-8">{{RawGma}}</div>
</div>
<div class="row">
<div class="col-4">Lens correction:</div>
<div class="col-8">{{Lenc}}</div>
</div>
<div class="row">
<div class="col-4">Horizontal mirror:</div>
<div class="col-8">{{HMirror}}</div>
</div>
<div class="row">
<div class="col-4">Vertical flip:</div>
<div class="col-8">{{VFlip}}</div>
</div>
<div class="row">
<div class="col-4">DCW:</div>
<div class="col-8">{{Dcw}}</div>
</div>
<div class="row">
<div class="col-4">Color bar:</div>
<div class="col-8">{{ColorBar}}</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}}</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 and if no value is present, the configuration value is used.
</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>
View Git Blame Copy Permalink