eduard256
d602c8dfca
- Add informational tooltips to all configuration fields - Reorder tabs: Frigate first, then Go2RTC, then URL - Hide Copy/Download buttons on Frigate tab until config is generated - Auto-fill username field with "admin" as default value - Smart pre-fill network address based on server IP (first 3 octets) - Add tooltips for Main Stream, Sub Stream, and all buttons - Improve user guidance throughout the configuration flow
652 lines
42 KiB
HTML
652 lines
42 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<meta name="theme-color" content="#0a0a0f">
|
||
<title>Strix - Camera Stream Discovery</title>
|
||
<link rel="stylesheet" href="css/main.css">
|
||
</head>
|
||
<body>
|
||
<!-- Mock Mode Indicator -->
|
||
<div id="mock-mode-badge" class="mock-badge hidden">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||
<path d="M8 1v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="2" fill="none"/>
|
||
</svg>
|
||
MOCK MODE
|
||
</div>
|
||
|
||
<div id="app">
|
||
<!-- Screen 1: Initial Address Input -->
|
||
<div id="screen-address" class="screen active">
|
||
<div class="container">
|
||
<div class="hero">
|
||
<svg class="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="800px" width="800px" version="1.1" id="Layer_1" viewBox="0 0 512.001 512.001" xml:space="preserve">
|
||
<g>
|
||
<path style="fill:#7E57C2;" d="M124.477,378.183L9.347,495.779c21.628,21.628,56.695,21.628,78.324,0L119,464.45 c21.628,21.628,56.696,21.628,78.324,0l28.375-28.375C187.373,426.203,151.825,405.106,124.477,378.183z"/>
|
||
<path style="fill:#7E57C2;" d="M447.27,55.383h-55.383V177.22c0.002-40.997,22.277-76.788,55.383-95.939 c16.293-9.425,35.207-14.822,55.383-14.822c0-6.982,0-11.077,0-11.077V0C472.065,0,447.27,24.796,447.27,55.383z"/>
|
||
</g>
|
||
<path style="fill:#9575CD;" d="M336.504,55.383C336.504,24.796,311.708,0,281.121,0v66.46c20.176,0,39.091,5.397,55.383,14.822 c33.107,19.153,55.383,54.946,55.383,95.945V55.383H336.504z"/>
|
||
<path style="fill:#E8E0F5;" d="M391.887,209.772v-27.116c0-3.312,0-5.432,0-5.432c0-40.997-22.276-76.791-55.383-95.942 c-16.293-9.425-35.207-14.822-55.383-14.822v155.073C311.213,191.443,357.554,187.532,391.887,209.772z M314.351,143.996 c0-12.234,9.918-22.153,22.153-22.153s22.153,9.919,22.153,22.153c0,12.235-9.918,22.153-22.153,22.153 S314.351,156.231,314.351,143.996z"/>
|
||
<path style="fill:#D1C4E9;" d="M391.887,177.221v32.551c5.151,3.336,10.037,7.246,14.55,11.76h96.216V66.46 c-20.176,0-39.091,5.397-55.383,14.822C414.164,100.434,391.888,136.225,391.887,177.221z M469.423,143.996 c0,12.235-9.918,22.153-22.153,22.153s-22.153-9.918-22.153-22.153c0-12.234,9.918-22.153,22.153-22.153 C459.504,121.843,469.423,131.762,469.423,143.996z"/>
|
||
<path style="fill:#9575CD;" d="M281.121,221.532l-10.2,10.2L281.121,221.532z"/>
|
||
<path style="fill:#B39DDB;" d="M406.438,221.533c34.606,34.606,34.606,90.712,0,125.319c-69.21,69.21-181.422,69.21-250.633,0.002 l-31.329,31.33c27.348,26.923,62.896,48.02,101.221,57.892c17.714,4.562,36.285,6.989,55.423,6.989 c122.349,0,221.532-99.182,221.532-221.531C502.653,221.533,406.437,221.532,406.438,221.533z"/>
|
||
<path style="fill:#9575CD;" d="M281.121,221.532l125.318,125.319c34.606-34.606,34.606-90.713,0-125.319 c-4.515-4.514-9.401-8.425-14.551-11.761C357.554,187.532,311.213,191.443,281.121,221.532z"/>
|
||
<path style="fill:#7E57C2;" d="M406.438,346.851L281.12,221.533l-10.199,10.2L155.802,346.851 C225.017,416.062,337.228,416.061,406.438,346.851z"/>
|
||
<circle style="fill:#9575CD;" cx="336.507" cy="143.996" r="22.153"/>
|
||
<circle style="fill:#7E57C2;" cx="447.274" cy="143.996" r="22.153"/>
|
||
</svg>
|
||
<h1 class="title">STRIX</h1>
|
||
<p class="subtitle">Camera Stream Discovery</p>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="network-address" class="label label-with-info">
|
||
Network Address
|
||
<span class="info-icon">
|
||
<svg viewBox="0 0 16 16" fill="none">
|
||
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M8 7v4M8 5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
<div class="tooltip tooltip-down">
|
||
<div class="tooltip-title">Network Address</div>
|
||
<p class="tooltip-text">Enter the network location of your IP camera. This can be an IP address, hostname, or a complete RTSP URL.</p>
|
||
|
||
<div class="tooltip-examples">
|
||
<div class="tooltip-examples-title">Accepted formats:</div>
|
||
<code class="tooltip-example">192.168.1.100 - IP address only</code>
|
||
<code class="tooltip-example">camera.local - Hostname/mDNS</code>
|
||
<code class="tooltip-example">rtsp://user:pass@192.168.1.100/stream - Full URL</code>
|
||
</div>
|
||
|
||
<p class="tooltip-text"><strong>Where to find it:</strong><br>Check your camera's web interface, router's DHCP leases page, or network scanner app. Most cameras use addresses in the 192.168.x.x range.</p>
|
||
|
||
<p class="tooltip-text"><strong>Next steps:</strong><br>After entering the address, click "Check Address" to validate the camera connection and proceed to stream discovery.</p>
|
||
</div>
|
||
</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="network-address"
|
||
class="input input-large"
|
||
placeholder="192.168.1.100"
|
||
autocomplete="off"
|
||
spellcheck="false"
|
||
>
|
||
<p class="hint">IP, hostname or full stream URL</p>
|
||
</div>
|
||
|
||
<button id="btn-check-address" class="btn btn-primary btn-large">
|
||
Check Address
|
||
</button>
|
||
|
||
<div class="examples">
|
||
<p class="examples-title">Examples</p>
|
||
<ul class="examples-list">
|
||
<li>192.168.1.100</li>
|
||
<li>camera.local</li>
|
||
<li>rtsp://user:pass@192.168.1.100/stream</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Screen 2: Configuration Form -->
|
||
<div id="screen-config" class="screen">
|
||
<div class="container">
|
||
<button id="btn-back-to-address" class="btn-back">
|
||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
<path d="M12 4L6 10l6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||
</svg>
|
||
Back
|
||
</button>
|
||
|
||
<h2 class="screen-title">Camera Configuration</h2>
|
||
|
||
<div class="form-group">
|
||
<label for="address-validated" class="label label-with-info">
|
||
Network Address
|
||
<span class="info-icon">
|
||
<svg viewBox="0 0 16 16" fill="none">
|
||
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M8 7v4M8 5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
<div class="tooltip tooltip-down">
|
||
<div class="tooltip-title">Network Address</div>
|
||
<p class="tooltip-text">The IP address, hostname, or full RTSP URL of your camera. This is the network location where the camera can be reached.</p>
|
||
<div class="tooltip-examples">
|
||
<div class="tooltip-examples-title">Examples:</div>
|
||
<code class="tooltip-example">192.168.1.100</code>
|
||
<code class="tooltip-example">camera.local</code>
|
||
<code class="tooltip-example">rtsp://admin:pass@192.168.1.100</code>
|
||
</div>
|
||
<p class="tooltip-text">Find it in your camera's network settings or router's device list (DHCP leases).</p>
|
||
</div>
|
||
</span>
|
||
</label>
|
||
<div class="input-validated">
|
||
<input
|
||
type="text"
|
||
id="address-validated"
|
||
class="input"
|
||
readonly
|
||
>
|
||
<svg class="icon-check" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
<path d="M4 10l4 4 8-8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="camera-model" class="label label-with-info">
|
||
Camera Model <span class="optional">(optional)</span>
|
||
<span class="info-icon">
|
||
<svg viewBox="0 0 16 16" fill="none">
|
||
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M8 7v4M8 5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
<div class="tooltip tooltip-down">
|
||
<div class="tooltip-title">Camera Model</div>
|
||
<p class="tooltip-text">The manufacturer and model of your IP camera. This helps the system use optimized stream paths for your specific camera brand.</p>
|
||
<div class="tooltip-examples">
|
||
<div class="tooltip-examples-title">Examples:</div>
|
||
<code class="tooltip-example">Hikvision: DS-2CD2142FWD</code>
|
||
<code class="tooltip-example">Dahua: IPC-HDW4433C</code>
|
||
<code class="tooltip-example">Amcrest: IP4M-1041</code>
|
||
<code class="tooltip-example">Reolink: RLC-410</code>
|
||
</div>
|
||
<p class="tooltip-text">Find it on the camera label, in the camera's web interface (Device Info), or in your purchase documentation. Leave empty for auto-detection.</p>
|
||
</div>
|
||
</span>
|
||
</label>
|
||
<div class="autocomplete-wrapper">
|
||
<input
|
||
type="text"
|
||
id="camera-model"
|
||
class="input"
|
||
placeholder="Start typing..."
|
||
autocomplete="off"
|
||
spellcheck="false"
|
||
>
|
||
<div id="autocomplete-dropdown" class="autocomplete-dropdown hidden"></div>
|
||
</div>
|
||
<p id="model-disabled-hint" class="hint hidden">Detected from URL, continue below</p>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="username" class="label label-with-info">
|
||
Username
|
||
<span class="info-icon">
|
||
<svg viewBox="0 0 16 16" fill="none">
|
||
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M8 7v4M8 5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
<div class="tooltip">
|
||
<div class="tooltip-title">Username</div>
|
||
<p class="tooltip-text">The authentication username for accessing your camera's RTSP stream. This is required for most IP cameras to access video feeds.</p>
|
||
<div class="tooltip-examples">
|
||
<div class="tooltip-examples-title">Common defaults:</div>
|
||
<code class="tooltip-example">admin</code>
|
||
<code class="tooltip-example">root</code>
|
||
<code class="tooltip-example">user</code>
|
||
</div>
|
||
<p class="tooltip-text">Find it in your camera setup documentation or the camera's web interface under User Management. Change default credentials for security.</p>
|
||
</div>
|
||
</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="username"
|
||
class="input"
|
||
value="admin"
|
||
placeholder="admin"
|
||
autocomplete="off"
|
||
>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="password" class="label label-with-info">
|
||
Password
|
||
<span class="info-icon">
|
||
<svg viewBox="0 0 16 16" fill="none">
|
||
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M8 7v4M8 5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
<div class="tooltip">
|
||
<div class="tooltip-title">Password</div>
|
||
<p class="tooltip-text">The authentication password for your camera's RTSP stream. This credential is used together with the username to access the video feed.</p>
|
||
<p class="tooltip-text">For security reasons, always use a strong, unique password and avoid default passwords like "12345" or "password".</p>
|
||
<p class="tooltip-text">Find it in your camera's documentation, setup guide, or change it via the camera's web interface under Security/User Management settings.</p>
|
||
</div>
|
||
</span>
|
||
</label>
|
||
<div class="input-password-wrapper">
|
||
<input
|
||
type="password"
|
||
id="password"
|
||
class="input"
|
||
placeholder="••••••••"
|
||
autocomplete="off"
|
||
>
|
||
<button type="button" class="btn-toggle-password" aria-label="Toggle password visibility">
|
||
<svg class="icon-eye" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
<circle cx="10" cy="10" r="3" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M2 10c1.5-4 4-6.5 8-6.5s6.5 2.5 8 6.5c-1.5 4-4 6.5-8 6.5S3.5 14 2 10z" stroke="currentColor" stroke-width="1.5"/>
|
||
<circle cx="10" cy="10" r="1.5" fill="currentColor"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="channel" class="label label-with-info">
|
||
Channel
|
||
<span class="info-icon">
|
||
<svg viewBox="0 0 16 16" fill="none">
|
||
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M8 7v4M8 5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
<div class="tooltip">
|
||
<div class="tooltip-title">Channel Number</div>
|
||
<p class="tooltip-text">The channel number identifies which specific camera or video input to access on the device.</p>
|
||
<p class="tooltip-text"><strong>For standalone IP cameras:</strong> Always use 0 (default). Single cameras don't use channel numbers.</p>
|
||
<p class="tooltip-text"><strong>For NVR/DVR systems ONLY:</strong> Each connected camera has its own channel number. Channel numbering typically starts from 0.</p>
|
||
<div class="tooltip-examples">
|
||
<div class="tooltip-examples-title">NVR/DVR channel values:</div>
|
||
<code class="tooltip-example">0 - First camera on NVR/DVR</code>
|
||
<code class="tooltip-example">1 - Second camera on NVR/DVR</code>
|
||
<code class="tooltip-example">2-15 - Additional cameras (for 4, 8, 16-channel NVRs)</code>
|
||
</div>
|
||
<p class="tooltip-text">Check your NVR's camera list in the device web interface to see the correct channel assignment for each camera.</p>
|
||
</div>
|
||
</span>
|
||
</label>
|
||
<input
|
||
type="number"
|
||
id="channel"
|
||
class="input"
|
||
value="0"
|
||
min="0"
|
||
max="255"
|
||
>
|
||
</div>
|
||
|
||
<details class="advanced-section">
|
||
<summary class="advanced-toggle">Advanced</summary>
|
||
<div class="advanced-content">
|
||
|
||
<div class="form-group">
|
||
<label class="label label-with-info">
|
||
Resolution <span class="optional">(optional)</span>
|
||
<span class="info-icon">
|
||
<svg viewBox="0 0 16 16" fill="none">
|
||
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M8 7v4M8 5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
<div class="tooltip">
|
||
<div class="tooltip-title">Resolution Filter</div>
|
||
<p class="tooltip-text">Optionally filter discovered streams by specific resolution. Leave empty to find all available resolutions. Use this to target specific stream qualities.</p>
|
||
<div class="tooltip-examples">
|
||
<div class="tooltip-examples-title">Common resolutions:</div>
|
||
<code class="tooltip-example">1920 × 1080 - Full HD (main stream)</code>
|
||
<code class="tooltip-example">1280 × 720 - HD (sub stream)</code>
|
||
<code class="tooltip-example">640 × 480 - VGA (low quality)</code>
|
||
<code class="tooltip-example">3840 × 2160 - 4K Ultra HD</code>
|
||
</div>
|
||
<p class="tooltip-text">Tip: Leave empty for initial discovery, then use specific values to find particular stream types (main vs sub streams).</p>
|
||
</div>
|
||
</span>
|
||
</label>
|
||
<div class="input-row">
|
||
<input
|
||
type="number"
|
||
id="width"
|
||
class="input"
|
||
placeholder="Width"
|
||
>
|
||
<span class="input-separator">×</span>
|
||
<input
|
||
type="number"
|
||
id="height"
|
||
class="input"
|
||
placeholder="Height"
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="max-streams" class="label label-with-info">
|
||
Max Streams
|
||
<span class="info-icon">
|
||
<svg viewBox="0 0 16 16" fill="none">
|
||
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M8 7v4M8 5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
<div class="tooltip">
|
||
<div class="tooltip-title">Maximum Streams</div>
|
||
<p class="tooltip-text">The maximum number of stream URLs to test during discovery. Higher values increase scan time but may find more stream variants. Lower values speed up discovery.</p>
|
||
<div class="tooltip-examples">
|
||
<div class="tooltip-examples-title">Recommended values:</div>
|
||
<code class="tooltip-example">5 - Quick scan (faster)</code>
|
||
<code class="tooltip-example">10 - Balanced (default)</code>
|
||
<code class="tooltip-example">20-50 - Thorough scan (slower)</code>
|
||
</div>
|
||
<p class="tooltip-text">Purpose: Controls how many different RTSP URL patterns are tested. Most cameras have 2-5 valid streams (main, sub, mobile, etc.).</p>
|
||
</div>
|
||
</span>
|
||
</label>
|
||
<input
|
||
type="number"
|
||
id="max-streams"
|
||
class="input"
|
||
value="10"
|
||
min="1"
|
||
max="50"
|
||
>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
|
||
<button id="btn-discover" class="btn btn-primary btn-large">
|
||
Discover Streams
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Screen 3: Stream Discovery -->
|
||
<div id="screen-discovery" class="screen">
|
||
<div class="container">
|
||
<button id="btn-back-to-config" class="btn-back">
|
||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
<path d="M12 4L6 10l6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||
</svg>
|
||
Back to Configuration
|
||
</button>
|
||
|
||
<h2 class="screen-title">Discovering Streams</h2>
|
||
|
||
<div class="progress-container">
|
||
<div class="progress-bar">
|
||
<div id="progress-fill" class="progress-fill"></div>
|
||
</div>
|
||
<p id="progress-text" class="progress-text">Starting scan...</p>
|
||
</div>
|
||
|
||
|
||
<div id="streams-section" class="streams-section hidden">
|
||
<h3 class="section-title">Found Connections</h3>
|
||
|
||
<div id="streams-list" class="streams-list"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Screen 4: Configuration Output -->
|
||
<div id="screen-output" class="screen">
|
||
<div class="container">
|
||
<button id="btn-back-to-streams" class="btn-back">
|
||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
<path d="M12 4L6 10l6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||
</svg>
|
||
Back to Streams
|
||
</button>
|
||
|
||
<h2 class="screen-title">Stream Configuration</h2>
|
||
|
||
<div class="stream-selection-container">
|
||
<div class="selected-stream-info">
|
||
<div class="stream-label">
|
||
<span>Main Stream</span>
|
||
<span class="info-icon">
|
||
<svg viewBox="0 0 16 16" fill="none">
|
||
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M8 7v4M8 5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
<div class="tooltip tooltip-down">
|
||
<div class="tooltip-title">Main Stream</div>
|
||
<p class="tooltip-text">The primary high-resolution video stream from your camera. This stream is typically used for recording and high-quality viewing.</p>
|
||
<div class="tooltip-examples">
|
||
<div class="tooltip-examples-title">Common uses:</div>
|
||
<code class="tooltip-example">Recording to disk</code>
|
||
<code class="tooltip-example">Live HD viewing</code>
|
||
<code class="tooltip-example">High-quality playback</code>
|
||
</div>
|
||
<p class="tooltip-text">Resolution is usually 1080p (1920×1080) or higher. Higher resolution means better quality but requires more bandwidth and storage.</p>
|
||
</div>
|
||
</span>
|
||
</div>
|
||
<p id="selected-main-type" class="selected-type"></p>
|
||
<p id="selected-main-url" class="selected-url"></p>
|
||
</div>
|
||
|
||
<div id="sub-stream-info" class="selected-stream-info sub-stream hidden">
|
||
<div class="stream-label">
|
||
<span>Sub Stream</span>
|
||
<span class="info-icon">
|
||
<svg viewBox="0 0 16 16" fill="none">
|
||
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M8 7v4M8 5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
<div class="tooltip tooltip-down">
|
||
<div class="tooltip-title">Sub Stream</div>
|
||
<p class="tooltip-text">A secondary lower-resolution video stream from your camera. This stream is optimized for object detection and reduces CPU usage.</p>
|
||
<div class="tooltip-examples">
|
||
<div class="tooltip-examples-title">Common uses:</div>
|
||
<code class="tooltip-example">Motion detection</code>
|
||
<code class="tooltip-example">Object detection (person, car)</code>
|
||
<code class="tooltip-example">Low-bandwidth monitoring</code>
|
||
</div>
|
||
<p class="tooltip-text">Resolution is usually 640×480 or 720p. Using a sub stream for detection significantly improves performance while maintaining recording quality on the main stream.</p>
|
||
</div>
|
||
</span>
|
||
</div>
|
||
<p id="selected-sub-type" class="selected-type"></p>
|
||
<p id="selected-sub-url" class="selected-url"></p>
|
||
<button id="btn-remove-sub" class="btn-remove-sub">Remove Sub Stream</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tabs">
|
||
<div class="tabs-scroll">
|
||
<button class="tab active" data-tab="frigate">Frigate</button>
|
||
<button class="tab" data-tab="go2rtc">Go2RTC</button>
|
||
<button class="tab" data-tab="url">URL</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-content">
|
||
<div class="tab-pane active" data-pane="frigate">
|
||
<!-- Input section for existing config -->
|
||
<div class="frigate-input-section">
|
||
<label class="frigate-label label-with-info">
|
||
Your Current Frigate Config <span class="optional">(optional)</span>
|
||
<span class="info-icon">
|
||
<svg viewBox="0 0 16 16" fill="none">
|
||
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M8 7v4M8 5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
<div class="tooltip tooltip-down">
|
||
<div class="tooltip-title">Frigate Configuration</div>
|
||
<p class="tooltip-text">You can either create a new Frigate config or add this camera to your existing configuration.</p>
|
||
|
||
<p class="tooltip-text"><strong>Option 1: New Config (Recommended for beginners)</strong><br>Leave the example config below as-is, and the system will generate a complete working configuration for you.</p>
|
||
|
||
<p class="tooltip-text"><strong>Option 2: Add to Existing Config</strong><br>If you already have Frigate running, paste your current config.yml here. The system will intelligently add this camera without breaking your existing setup.</p>
|
||
|
||
<div class="tooltip-examples">
|
||
<div class="tooltip-examples-title">Where to find your config.yml:</div>
|
||
<code class="tooltip-example">Docker: /config/config.yml</code>
|
||
<code class="tooltip-example">Home Assistant addon: /config/frigate.yml</code>
|
||
<code class="tooltip-example">Standalone: /etc/frigate/config.yml</code>
|
||
</div>
|
||
|
||
<p class="tooltip-text">The generator will preserve all your existing cameras and settings, only adding the new camera configuration.</p>
|
||
</div>
|
||
</span>
|
||
<span class="hint">Paste your existing config.yml or leave the example below</span>
|
||
</label>
|
||
<textarea
|
||
id="existing-frigate-config"
|
||
class="textarea frigate-config-input"
|
||
rows="12"
|
||
placeholder="Paste your existing Frigate config here..."></textarea>
|
||
</div>
|
||
|
||
<!-- Generate button -->
|
||
<div class="button-with-tooltip">
|
||
<button id="btn-generate-frigate" class="btn btn-primary btn-generate">
|
||
Generate Config
|
||
<span class="info-icon info-icon-button">
|
||
<svg viewBox="0 0 16 16" fill="none">
|
||
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M8 7v4M8 5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
<div class="tooltip">
|
||
<div class="tooltip-title">Generate Configuration</div>
|
||
<p class="tooltip-text">This button will process your camera streams and generate a ready-to-use Frigate configuration.</p>
|
||
|
||
<p class="tooltip-text"><strong>What happens:</strong></p>
|
||
<div class="tooltip-examples">
|
||
<div class="tooltip-examples-title">Configuration includes:</div>
|
||
<code class="tooltip-example">Go2RTC streams setup</code>
|
||
<code class="tooltip-example">Camera with detect & record roles</code>
|
||
<code class="tooltip-example">Object tracking (person, car, etc.)</code>
|
||
<code class="tooltip-example">Recording settings</code>
|
||
</div>
|
||
|
||
<p class="tooltip-text">If you provided an existing config, your camera will be added to it. Otherwise, a complete new configuration will be created.</p>
|
||
|
||
<p class="tooltip-text">After generation, use Copy or Download buttons to save your config.</p>
|
||
</div>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Output section (hidden by default) -->
|
||
<div id="frigate-output-section" class="frigate-output-section hidden">
|
||
<label class="frigate-label label-with-info">
|
||
Updated Config (Camera Added)
|
||
<span class="info-icon">
|
||
<svg viewBox="0 0 16 16" fill="none">
|
||
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M8 7v4M8 5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
<div class="tooltip tooltip-down">
|
||
<div class="tooltip-title">Generated Configuration</div>
|
||
<p class="tooltip-text">This is your complete Frigate configuration with the camera successfully added.</p>
|
||
|
||
<p class="tooltip-text"><strong>What's included:</strong></p>
|
||
<div class="tooltip-examples">
|
||
<div class="tooltip-examples-title">Configuration sections:</div>
|
||
<code class="tooltip-example">go2rtc: Stream definitions</code>
|
||
<code class="tooltip-example">cameras: Camera with roles</code>
|
||
<code class="tooltip-example">objects: Person, car tracking</code>
|
||
<code class="tooltip-example">record: Recording settings</code>
|
||
</div>
|
||
|
||
<p class="tooltip-text"><strong>How to use:</strong><br>Copy or download this configuration and save it as <code>config.yml</code> in your Frigate directory. Restart Frigate to apply the changes.</p>
|
||
|
||
<p class="tooltip-text">If you added to existing config, your previous cameras and settings are preserved - only the new camera was added.</p>
|
||
</div>
|
||
</span>
|
||
</label>
|
||
<pre id="config-frigate" class="config-code"></pre>
|
||
</div>
|
||
</div>
|
||
<div class="tab-pane" data-pane="go2rtc">
|
||
<pre id="config-go2rtc" class="config-code"></pre>
|
||
</div>
|
||
<div class="tab-pane" data-pane="url">
|
||
<pre id="config-url" class="config-code"></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="actions">
|
||
<button id="btn-copy-config" class="btn btn-secondary">
|
||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
<rect x="6" y="6" width="10" height="10" rx="1" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M4 4h10v2H5v9H4V4z" fill="currentColor"/>
|
||
</svg>
|
||
Copy
|
||
</button>
|
||
<button id="btn-download-config" class="btn btn-secondary">
|
||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
<path d="M10 3v10m0 0l-4-4m4 4l4-4M4 17h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
Download
|
||
</button>
|
||
</div>
|
||
|
||
<div class="secondary-actions">
|
||
<div class="button-with-tooltip">
|
||
<button id="btn-add-sub-stream" class="btn btn-primary">
|
||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
<path d="M10 4v12M4 10h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||
</svg>
|
||
Add Sub Stream
|
||
<span class="info-icon info-icon-button">
|
||
<svg viewBox="0 0 16 16" fill="none">
|
||
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M8 7v4M8 5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
<div class="tooltip">
|
||
<div class="tooltip-title">Add Sub Stream</div>
|
||
<p class="tooltip-text">Add a secondary lower-resolution stream for efficient object detection and motion monitoring.</p>
|
||
|
||
<p class="tooltip-text"><strong>Why add a sub stream?</strong></p>
|
||
<div class="tooltip-examples">
|
||
<div class="tooltip-examples-title">Benefits:</div>
|
||
<code class="tooltip-example">Reduces CPU usage by 50-70%</code>
|
||
<code class="tooltip-example">Faster object detection</code>
|
||
<code class="tooltip-example">Lower bandwidth consumption</code>
|
||
<code class="tooltip-example">Main stream quality preserved</code>
|
||
</div>
|
||
|
||
<p class="tooltip-text"><strong>How it works:</strong><br>After clicking, you'll return to the stream list where you can select a lower-resolution stream (usually 640×480 or 720p). Frigate will use this for detection while recording the main stream in full quality.</p>
|
||
|
||
<p class="tooltip-text"><strong>Recommended:</strong> Most IP cameras support multiple streams. Using a sub stream is highly recommended for optimal Frigate performance.</p>
|
||
</div>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<div class="button-with-tooltip">
|
||
<button id="btn-new-search" class="btn btn-outline">
|
||
Add Another Camera
|
||
<span class="info-icon info-icon-button-outline">
|
||
<svg viewBox="0 0 16 16" fill="none">
|
||
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M8 7v4M8 5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
<div class="tooltip">
|
||
<div class="tooltip-title">Add Another Camera</div>
|
||
<p class="tooltip-text">Start the configuration process for a new camera from the beginning.</p>
|
||
|
||
<p class="tooltip-text"><strong>⚠️ Important - Save First!</strong><br>Before clicking this button, make sure to save your current configuration using Copy or Download buttons above. This will reset the form.</p>
|
||
|
||
<p class="tooltip-text"><strong>What happens:</strong></p>
|
||
<div class="tooltip-examples">
|
||
<div class="tooltip-examples-title">The process will:</div>
|
||
<code class="tooltip-example">1. Return to address input screen</code>
|
||
<code class="tooltip-example">2. Clear current camera settings</code>
|
||
<code class="tooltip-example">3. Start fresh discovery</code>
|
||
<code class="tooltip-example">4. Generate new config for next camera</code>
|
||
</div>
|
||
|
||
<p class="tooltip-text">You can then add the new camera to your saved Frigate config by pasting it in the config field.</p>
|
||
</div>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Toast Notification -->
|
||
<div id="toast" class="toast hidden"></div>
|
||
|
||
<script type="module" src="js/main.js"></script>
|
||
</body>
|
||
</html>
|