diff --git a/webui/web/css/main.css b/webui/web/css/main.css index 83079ba..832f78e 100644 --- a/webui/web/css/main.css +++ b/webui/web/css/main.css @@ -1110,6 +1110,29 @@ body { height: 18px; } +/* Info icon inside stream type badge */ +.info-icon-stream { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + margin-left: var(--space-2); + cursor: help; + color: var(--text-tertiary); + transition: color var(--transition-fast); +} + +.info-icon-stream:hover { + color: var(--purple-primary); +} + +.info-icon-stream svg { + width: 16px; + height: 16px; +} + .frigate-output-section { margin-top: var(--space-6); padding-top: var(--space-6); diff --git a/webui/web/js/mock/mock-stream-api.js b/webui/web/js/mock/mock-stream-api.js index 94dcc71..8ce1b24 100644 --- a/webui/web/js/mock/mock-stream-api.js +++ b/webui/web/js/mock/mock-stream-api.js @@ -53,14 +53,14 @@ export class MockStreamAPI { has_audio: false }, { - url: "rtsp://192.168.1.100:554/Streaming/Channels/102", - path: "/Streaming/Channels/102", - type: "FFMPEG", - resolution: "640x480", + url: "bubble://192.168.1.100:34567/bubble/live?ch=0&stream=0", + path: "/bubble/live?ch=0&stream=0", + type: "BUBBLE", + resolution: "1920x1080", codec: "H.264", - fps: 15, - bitrate: 512000, - has_audio: false + fps: 25, + bitrate: 3072000, + has_audio: true }, { url: "rtsp://192.168.1.100:554/cam/realmonitor?channel=1&subtype=0", @@ -71,36 +71,6 @@ export class MockStreamAPI { fps: 30, bitrate: 6144000, has_audio: true - }, - { - url: "rtsp://192.168.1.100:554/h264Preview_01_main", - path: "/h264Preview_01_main", - type: "FFMPEG", - resolution: "1920x1080", - codec: "H.264", - fps: 20, - bitrate: 3072000, - has_audio: true - }, - { - url: "rtsp://192.168.1.100:554/live/ch0", - path: "/live/ch0", - type: "ONVIF", - resolution: "2688x1520", - codec: "H.265", - fps: 25, - bitrate: 5120000, - has_audio: true - }, - { - url: "rtsp://192.168.1.100:554/stream1", - path: "/stream1", - type: "FFMPEG", - resolution: "3840x2160", - codec: "H.265", - fps: 30, - bitrate: 8192000, - has_audio: true } ]; } diff --git a/webui/web/js/ui/stream-list.js b/webui/web/js/ui/stream-list.js index bddc934..5d51a94 100644 --- a/webui/web/js/ui/stream-list.js +++ b/webui/web/js/ui/stream-list.js @@ -30,6 +30,7 @@ export class StreamList {
${icon} ${stream.type} + ${this.getStreamTypeTooltip(stream.type)}
${truncatedUrl}
@@ -65,11 +66,164 @@ export class StreamList { 'JPEG': '', 'MJPEG': '', 'HLS': '', - 'HTTP_VIDEO': '' + 'HTTP_VIDEO': '', + 'BUBBLE': '' }; return icons[type] || icons['FFMPEG']; } + getStreamTypeTooltip(type) { + const tooltips = { + 'FFMPEG': ` + + + + + +
+
FFMPEG Stream
+

Standard video stream decoded by FFmpeg. Most compatible and widely supported format for RTSP, HTTP, and other protocols.

+
+
Features:
+ ✓ Universal compatibility + ✓ Supports H.264, H.265, MJPEG + ✓ Works with most cameras + ✓ Best for recording +
+

Best for: Main streams, recording, high-quality playback. Default choice for most use cases.

+
+ + `, + 'ONVIF': ` + + + + + +
+
ONVIF Stream
+

Industry standard protocol for IP cameras. Discovered via ONVIF specification, ensuring maximum compatibility with camera features.

+
+
Features:
+ ✓ Standardized protocol + ✓ Auto-discovery support + ✓ PTZ control capable + ✓ Vendor-independent +
+

Best for: Enterprise cameras, systems requiring standardization, cameras with PTZ controls.

+
+ + `, + 'JPEG': ` + + + + + +
+
JPEG Snapshot
+

Single static image endpoint. Can be converted to video stream by repeatedly fetching images.

+
+
Features:
+ ✓ Low bandwidth + ✓ Simple HTTP request + ✓ No streaming protocol needed + ⚠ Limited framerate (1-10 fps) +
+

Best for: Thumbnails, snapshots, very low bandwidth scenarios. Not recommended for recording.

+
+ + `, + 'MJPEG': ` + + + + + +
+
MJPEG Stream
+

Motion JPEG - sequence of JPEG images transmitted continuously. Simple but bandwidth-intensive.

+
+
Features:
+ ✓ Simple HTTP streaming + ✓ No complex codecs + ✓ Frame-by-frame + ⚠ High bandwidth usage +
+

Best for: Sub streams, low-latency monitoring, simple camera integration. Higher bandwidth than H.264.

+
+ + `, + 'HLS': ` + + + + + +
+
HLS Stream
+

HTTP Live Streaming - Apple's adaptive bitrate streaming protocol. Delivers video in small chunks over HTTP.

+
+
Features:
+ ✓ Adaptive bitrate + ✓ Wide browser support + ✓ Firewall-friendly (HTTP) + ⚠ Higher latency (5-30s) +
+

Best for: Web playback, public streaming, CDN delivery. Not ideal for real-time monitoring.

+
+ + `, + 'HTTP_VIDEO': ` + + + + + +
+
HTTP Video Stream
+

Generic HTTP-based video stream. Simple protocol that works over standard web connections.

+
+
Features:
+ ✓ Simple HTTP protocol + ✓ No special ports + ✓ Firewall-friendly + ✓ Direct browser playback +
+

Best for: Quick viewing, simple setups, scenarios where RTSP ports are blocked.

+
+ + `, + 'BUBBLE': ` + + + + + +
+
BUBBLE / DVRIP Protocol
+

Proprietary protocol for Chinese DVR/NVR cameras. Also known as: ESeeCloud, dvr163, DVR-IP, NetSurveillance, Sofia protocol, XMeye SDK.

+
+
Compatible brands:
+ XMEye, Floureon, ZOSI + Sannce, Annke, DVR163 + ESeeCloud, NetSurveillance +
+
+
Features:
+ ⚠ Proprietary protocol + ✓ Go2RTC converts to standard + ✓ Two-way audio support + ⚠ TCP only (port 34567) +
+

Note: Automatically converted to standard RTSP format by Go2RTC. Works seamlessly with Frigate without additional configuration.

+
+ + ` + }; + return tooltips[type] || ''; + } + attachEventListeners() { // Click on header to toggle this.listContainer.querySelectorAll('.stream-item-header').forEach(header => {