Fix browser recording playback and web management consistency

ARCHITECTURE.md

@@ -27,7 +27,7 @@
 
 当前 RTSP 负责实时视频，ONVIF 负责读取设备身份、媒体配置、独立视频源及主子码流地址。不同品牌使用相同对象结构，路径和能力由设备返回值或对应驱动确定；不按品牌名字保证所有型号兼容。当前品牌驱动只提供路径模板，自动摄像头配置读取支持 ONVIF Media v1。
 
-主码流用于清晰预览和可选本机录像，子码流用于多画面预览。系统目前不修改摄像头或录像机设置，不自动导入不存在的通道，不把服务可达当成画面接通。
+主码流用于清晰预览和可选本机录像。默认多画面预览由每路子码流经 FFmpeg 转为 H.264 / AAC；MediaMTX 的 runOnDemand 仅在观看时启动受限分辨率的转码进程，发布权限限定为回环地址的兼容预览路径。高清兼容预览读取原始主码流，经 Intel VAAPI 完成解码、1080p 缩放和 H.264 编码，最高 15 帧/秒；无可用硬件时明确失败，不自动启动多路软件高清转换。原始主、子码流仍可选择。系统目前不修改摄像头或录像机设置，不自动导入不存在的通道，不把服务可达当成画面接通。
 
 ## 管理 API
 

README.md

@@ -18,7 +18,7 @@
 
 本机录像默认关闭，用户逐通道开启。默认保留 7 天、容量 40 GB、磁盘预留 8 GB，界面可调整。保留期限到达后 MediaMTX 自动删除本机录像；配额达到后暂停录制，不删除录像机中的数据。配额每 20 秒观察一次，允许少量超出。文件路径及录像索引使用 UTC，界面按浏览器时区显示。
 
-HLS 会有数秒延迟。此版本不转码，推荐 H.264；H.265 和不同音频编码的浏览器兼容性取决于浏览器及设备。设备状态基于 MediaMTX 实际码流状态；“正在录像”还要求观察到近期写入的本机录像文件。离线不会生成假画面或假录像。
+HLS 会有数秒延迟。网页默认使用 FFmpeg 按需生成的 H.264 Baseline / AAC 兼容画面，最高 768×432、10 帧/秒，供小电脑上的多镜头预览。“高清 · 主码流兼容”使用实际主码流，通过 Intel VAAPI 硬件解码、缩放及 H.264 Main 编码，最高 1920×1080、15 帧/秒。高清预览需要可用的 Intel 核显、驱动及 render 设备权限，不自动退回高负载的软件高清转码。首开需要等待取流与缓冲。没有观看者后会停止转码；同一镜头的观看者共享一路转码。用户仍可选择原始主、子码流，但 H.265 的兼容性取决于浏览器。本机录像保留原始主码流编码，兼容预览不改变录像及摄像头设置。网页回放按需转换为 H.264/AAC，最多同时两个会话，每段最多一小时；使用时间轴或定位时间跳转。关闭回放或切换页面后终止转换，不生成额外缓存文件。有可用 VAAPI 时回放最高 1080p/15 帧，否则使用 768×432/10 帧软件转换。下载保留原始录像编码，需支持该编码的播放器。设备状态基于 MediaMTX 实际码流状态；“正在录像”还要求观察到近期写入的本机录像文件。离线不会生成假画面或假录像。
 
 ## Ubuntu x86_64 部署
 
@@ -28,7 +28,7 @@ HLS 会有数秒延迟。此版本不转码，推荐 H.264；H.265 和不同音
 sudo VISION_BIND=<本机的Tailscale-IPv4> bash deploy/install.sh
 ```
 
-安装脚本校验并安装固定版本 MediaMTX v1.21.1，创建无登录权限的服务用户，数据写入 `/var/lib/zhaovision`，应用入口为 `http://<Tailscale-IP>:8790/`。可用逗号分隔的 `VISION_BIND` 同时指定本机局域网与 Tailscale 地址；已安装系统在 `/etc/zhaovision.env` 中修改并重启服务。视频服务的 HTTP、RTSP 与管理 API 全部仅监听回环地址，由应用进行登录鉴权并代理。
+安装脚本从系统软件源安装 FFmpeg；检测到 Intel renderD128 时安装 Intel 媒体驱动，授予服务用户 render 组权限，并校验安装固定版本 MediaMTX v1.21.1，创建无登录权限的服务用户，数据写入 `/var/lib/zhaovision`，应用入口为 `http://<Tailscale-IP>:8790/`。可用逗号分隔的 `VISION_BIND` 同时指定本机局域网与 Tailscale 地址；已安装系统在 `/etc/zhaovision.env` 中修改并重启服务。视频服务的 HTTP、RTSP 与管理 API 全部仅监听回环地址，由应用进行登录鉴权并代理。
 
 首次打开页面，读取服务器上的 `/var/lib/zhaovision/setup-code.txt`，输入初始化码，设置至少 10 位管理密码。初始化后码文件删除。摄像头与录像机密码在自己的界面填写。
 
@@ -47,7 +47,7 @@ python3 app.py
 mediamtx ./data/mediamtx.yml
 ```
 
-访问 `http://127.0.0.1:8790/`。后端配置变量：`VISION_BIND`、`VISION_PORT`、`VISION_DATA`、`VISION_RECORDINGS`，HTTPS 反向代理场景可设 `VISION_SECURE_COOKIE=1`。当前管理 API 是单管理员模型。
+访问 `http://127.0.0.1:8790/`。后端配置变量：`VISION_BIND`、`VISION_PORT`、`VISION_DATA`、`VISION_RECORDINGS`；高清转码可用 `VISION_VAAPI_DEVICE` 指定渲染设备（默认 `/dev/dri/renderD128`）。HTTPS 反向代理场景可设 `VISION_SECURE_COOKIE=1`。当前管理 API 是单管理员模型。
 
 ## 数据与恢复
 
@@ -58,6 +58,7 @@ mediamtx ./data/mediamtx.yml
 ## 第三方软件
 
 - [MediaMTX](https://github.com/bluenviron/mediamtx) v1.21.1，MIT，部署时独立安装。
+- [FFmpeg](https://ffmpeg.org/)，通过系统软件源安装为独立进程，用于按需兼容预览。
 - [hls.js](https://github.com/video-dev/hls.js) v1.7.3，Apache-2.0，浏览器构建与许可证位于 `web/vendor/`。
 - 官方接口参考：[录像](https://mediamtx.org/docs/features/record)、[回放](https://mediamtx.org/docs/features/playback)、[配置](https://mediamtx.org/docs/references/configuration-file)。
 

VERSION

@@ -1 +1 @@
-0.1.2
+0.1.7

app.py

@@ -14,9 +14,11 @@ import os
 from pathlib import Path
 import re
 import secrets
+import shlex
 import shutil
 import socket
 import sqlite3
+import sys
 import threading
 import time
 import urllib.error
@@ -24,6 +26,7 @@ import urllib.parse as url
 import urllib.request
 from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer
 import onvif
+import playback
 
 ROOT = Path(__file__).resolve().parent
 os.umask(0o077)
@@ -77,7 +80,8 @@ def set_setting(key, value):
 
 def objects(table):
     with LOCK:
-        return [dict(json.loads(r['body']), id=r['id']) for r in DB.execute('SELECT * FROM ' + table)]
+        rows = [dict(json.loads(r['body']), id=r['id']) for r in DB.execute('SELECT * FROM ' + table)]
+    return sorted(rows, key=lambda row: (row.get('name', ''), row['id']))
 
 
 def get_object(table, key):
@@ -266,6 +270,13 @@ def write_media_config():
                     'record': bool(c['enabled'] and c['record'] and quality == 'main' and not STORAGE['paused']),
                     'recordDeleteAfter': str(policy['retentionDays'] * 24) + 'h',
                 }
+            for quality in ('compat', 'hd'):
+                paths[stream_name(c, quality)] = {
+                    'source': 'publisher', 'record': False,
+                    'runOnDemand': shlex.join([sys.executable, str(ROOT / 'preview.py'), str(DATA)]) if c['enabled'] else '',
+                    'runOnDemandRestart': True,
+                    'runOnDemandStartTimeout': '45s', 'runOnDemandCloseAfter': '15s',
+                }
         config = {
             'logLevel': 'warn', 'logDestinations': ['stdout'],
             'api': True, 'apiAddress': '127.0.0.1:' + str(API_PORT),
@@ -278,7 +289,8 @@ def write_media_config():
             'authMethod': 'internal',
             'authInternalUsers': [{'user': 'vision', 'pass': setting('mediaSecret'),
                                    'ips': ['127.0.0.1', '::1'],
-                                   'permissions': [{'action': a} for a in ('read', 'api', 'playback')]}],
+                                   'permissions': [{'action': a} for a in ('read', 'api', 'playback')]
+                                   + [{'action': 'publish', 'path': '~^cam_[a-f0-9]{16}_(compat|hd)$'}]}],
             'pathDefaults': {'recordFormat': 'fmp4', 'recordPath': str(RECORDINGS / '%path' / '%Y-%m-%d_%H-%M-%S-%f'),
                              'recordSegmentDuration': '5m', 'recordPartDuration': '1s'},
             'paths': paths,
@@ -584,8 +596,8 @@ class Handler(BaseHTTPRequestHandler):
         except Exception:
             self.answer({'error': '操作未完成，请检查输入或服务状态'}, 500)
 
-    def proxy(self, port, path):
-        conn = http.client.HTTPConnection('127.0.0.1', port, timeout=25)
+    def proxy(self, port, path, download=False):
+        conn = http.client.HTTPConnection('127.0.0.1', port, timeout=55)
         headers = {'Authorization': MEDIA_AUTH}
         if self.headers.get('Range'):
             headers['Range'] = self.headers['Range']
@@ -595,7 +607,20 @@ class Handler(BaseHTTPRequestHandler):
             r = conn.getresponse()
             if r.status >= 400:
                 raise Problem('暂时没有可播放画面，请确认设备网络、账号、码流路径和录像时间', 503)
+            location = None
+            if 300 <= r.status < 400:
+                # MediaMTX starts an HLS session with a relative redirect. The
+                # browser must keep that session query on subsequent playlists.
+                target = url.urlsplit(url.urljoin(path, r.getheader('Location', '')))
+                if (port != HLS_PORT or target.scheme or target.netloc
+                        or not re.fullmatch(r'/cam_[a-f0-9]{16}_(main|sub|compat|hd)/[a-zA-Z0-9_.-]+', target.path)):
+                    raise Problem('视频服务返回了无效的播放跳转', 502)
+                location = '/media/live' + target.path + ('?' + target.query if target.query else '')
             self.send_response(r.status)
+            if download:
+                self.send_header('Content-Disposition', 'attachment; filename="recording.mp4"')
+            if location:
+                self.send_header('Location', location)
             for k in ('Content-Type', 'Content-Length', 'Content-Range', 'Accept-Ranges'):
                 if r.getheader(k):
                     self.send_header(k, r.getheader(k))
@@ -614,6 +639,36 @@ class Handler(BaseHTTPRequestHandler):
         finally:
             conn.close()
 
+    def compatible_playback(self, path, duration):
+        started = False
+        old_timeout = self.connection.gettimeout()
+        try:
+            with playback.stream('http://127.0.0.1:' + str(PLAYBACK_PORT) + path, MEDIA_AUTH, duration) as output:
+                first = output.read1(65536)
+                if not first:
+                    raise Problem('录像转换失败，请检查录像是否完整及服务器视频驱动', 503)
+                self.connection.settimeout(15)
+                self.send_response(200)
+                self.send_header('Content-Type', 'video/mp4')
+                self.send_header('Cache-Control', 'no-store')
+                self.send_header('Accept-Ranges', 'none')
+                self.send_header('X-Content-Type-Options', 'nosniff')
+                self.send_header('Connection', 'close')
+                self.end_headers()
+                started = True
+                self.close_connection = True
+                self.wfile.write(first)
+                while chunk := output.read1(65536):
+                    self.wfile.write(chunk)
+        except playback.PlaybackError as exc:
+            if not started:
+                raise Problem(str(exc), 503)
+        except OSError:
+            if not started:
+                raise Problem('录像转换连接失败', 503)
+        finally:
+            self.connection.settimeout(old_timeout)
+
     def do_GET(self):
         try:
             parsed = url.urlsplit(self.path)
@@ -646,7 +701,7 @@ class Handler(BaseHTTPRequestHandler):
                     self.answer({'items': items})
                 elif path.startswith('/media/live/'):
                     suffix = path[len('/media/live/'):]
-                    if not re.fullmatch(r'cam_[a-f0-9]{16}_(main|sub)/[a-zA-Z0-9_.-]+', suffix):
+                    if not re.fullmatch(r'cam_[a-f0-9]{16}_(main|sub|compat|hd)/[a-zA-Z0-9_.-]+', suffix):
                         raise Problem('视频路径不正确')
                     self.proxy(HLS_PORT, '/' + suffix + ('?' + parsed.query if parsed.query else ''))
                 elif path == '/media/playback':
@@ -660,9 +715,13 @@ class Handler(BaseHTTPRequestHandler):
                             raise ValueError()
                     except ValueError:
                         raise Problem('单次回放最多一小时')
+                    download = query.get('download') == '1'
                     q = url.urlencode({'path': stream_name(c), 'start': start.isoformat(), 'duration': duration,
-                                       'format': 'mp4' if query.get('download') == '1' else 'fmp4'})
-                    self.proxy(PLAYBACK_PORT, '/get?' + q)
+                                       'format': 'mp4' if download else 'fmp4'})
+                    if download:
+                        self.proxy(PLAYBACK_PORT, '/get?' + q, download=True)
+                    else:
+                        self.compatible_playback('/get?' + q, duration)
                 else:
                     raise Problem('接口不存在', 404)
             else:

deploy/install.sh

@@ -6,6 +6,16 @@ set -euo pipefail
 [[ $(id -u) == 0 ]] || { echo 'Run as root'; exit 1; }
 [[ $(uname -m) == x86_64 ]] || { echo 'This installer targets x86_64'; exit 1; }
 command -v python3 >/dev/null
+if ! command -v ffmpeg >/dev/null; then
+  apt-get update
+  DEBIAN_FRONTEND=noninteractive apt-get install -y --no-install-recommends ffmpeg
+fi
+if [[ -f /sys/class/drm/renderD128/device/vendor ]] && [[ $(cat /sys/class/drm/renderD128/device/vendor) == 0x8086 ]]; then
+  if ! dpkg-query -W -f='${Status}' intel-media-va-driver-non-free 2>/dev/null | grep -q 'install ok installed'; then
+    apt-get update
+    DEBIAN_FRONTEND=noninteractive apt-get install -y --no-install-recommends intel-media-va-driver-non-free
+  fi
+fi
 release_dir=$(cd -- "$(dirname -- "$0")/.." && pwd)
 bind_address=${VISION_BIND:-127.0.0.1}
 python3 - "$bind_address" <<'PY'
@@ -15,6 +25,9 @@ for value in sys.argv[1].split(','):
  assert ip.version==4 and not ip.is_unspecified and not ip.is_multicast and (ip.is_private or ip in ipaddress.ip_network('100.64.0.0/10')), 'Use explicit private or Tailscale addresses'
 PY
 getent passwd zhaovision >/dev/null || useradd --system --home-dir /var/lib/zhaovision --shell /usr/sbin/nologin zhaovision
+if getent group render >/dev/null; then
+  usermod -a -G render zhaovision
+fi
 install -d -o zhaovision -g zhaovision -m 700 /var/lib/zhaovision /var/lib/zhaovision/recordings
 install -d -m 755 /opt/zhaovision /usr/local/lib/zhaovision
 archive=${MEDIA_ARCHIVE:-/tmp/mediamtx_v1.21.1_linux_amd64.tar.gz}

deploy/zhaovision-media.service

@@ -9,16 +9,19 @@ User=zhaovision
 Group=zhaovision
 WorkingDirectory=/var/lib/zhaovision
 Environment=TZ=UTC
+EnvironmentFile=/etc/zhaovision.env
 ExecStart=/usr/local/lib/zhaovision/mediamtx /var/lib/zhaovision/mediamtx.yml
 Restart=always
 RestartSec=4
+TimeoutStopSec=15s
 UMask=0077
 NoNewPrivileges=true
 PrivateTmp=true
 ProtectSystem=strict
 ProtectHome=true
 ReadWritePaths=/var/lib/zhaovision
-MemoryMax=1200M
+MemoryHigh=1500M
+MemoryMax=1800M
 
 [Install]
 WantedBy=multi-user.target

deploy/zhaovision.service

@@ -21,7 +21,8 @@ PrivateTmp=true
 ProtectSystem=strict
 ProtectHome=true
 ReadWritePaths=/var/lib/zhaovision
-MemoryMax=512M
+MemoryMax=900M
+TimeoutStopSec=15s
 
 [Install]
 WantedBy=multi-user.target

playback.py

@@ -0,0 +1,70 @@
+"""Bounded, ephemeral H.264 playback; original recordings remain untouched."""
+from contextlib import contextmanager
+import os
+import shutil
+import subprocess
+import threading
+
+SLOTS = threading.BoundedSemaphore(2)
+
+
+class PlaybackError(Exception):
+    pass
+
+
+def command(source, authorization, duration):
+    executable = shutil.which('ffmpeg')
+    if not executable:
+        raise PlaybackError('回放转换需要服务器安装 FFmpeg')
+    device = os.environ.get('VISION_VAAPI_DEVICE', '/dev/dri/renderD128')
+    acceleration = []
+    if os.access(device, os.R_OK | os.W_OK):
+        acceleration = ['-hwaccel', 'vaapi', '-hwaccel_device', device,
+                        '-hwaccel_output_format', 'vaapi', '-extra_hw_frames', '8']
+        video = ['-vf', 'fps=15,scale_vaapi=w=1920:h=1080:format=nv12:force_original_aspect_ratio=decrease:force_divisible_by=2',
+                 '-c:v', 'h264_vaapi', '-profile:v', 'main', '-level:v', '4.1',
+                 '-rc_mode', 'CQP', '-qp', '25', '-g', '30', '-bf', '0']
+    else:
+        video = ['-vf', 'fps=10,scale=768:432:force_original_aspect_ratio=decrease:force_divisible_by=2',
+                 '-c:v', 'libx264', '-threads', '1', '-preset', 'veryfast',
+                 '-tune', 'zerolatency', '-profile:v', 'baseline', '-pix_fmt', 'yuv420p',
+                 '-crf', '26', '-g', '20', '-bf', '0']
+    return [executable, '-hide_banner', '-loglevel', 'error', '-nostdin',
+            '-threads', '1', '-filter_threads', '1'] + acceleration + [
+            '-rw_timeout', '15000000', '-headers', 'Authorization: ' + authorization + '\r\n',
+            '-readrate', '1', '-i', source, '-t', str(duration),
+            '-map', '0:v:0', '-map', '0:a:0?', '-sn', '-dn'] + video + [
+            '-c:a', 'aac', '-ar', '48000', '-ac', '1', '-b:a', '64k',
+            '-movflags', '+frag_keyframe+empty_moov+default_base_moof',
+            '-frag_duration', '1000000', '-f', 'mp4', 'pipe:1']
+
+
+@contextmanager
+def stream(source, authorization, duration):
+    if not SLOTS.acquire(blocking=False):
+        raise PlaybackError('已有两个回放正在进行，请关闭其他回放后重试')
+    process = timer = None
+    try:
+        # No shell and no diagnostics containing authentication headers in logs.
+        process = subprocess.Popen(command(source, authorization, duration),
+                                   stdin=subprocess.DEVNULL, stdout=subprocess.PIPE,
+                                   stderr=subprocess.DEVNULL)
+        timer = threading.Timer(duration + 45, process.kill)
+        timer.daemon = True
+        timer.start()
+        yield process.stdout
+    except OSError as exc:
+        raise PlaybackError('录像转换服务暂不可用') from exc
+    finally:
+        if timer:
+            timer.cancel()
+        if process:
+            if process.poll() is None:
+                process.terminate()
+                try:
+                    process.wait(timeout=3)
+                except subprocess.TimeoutExpired:
+                    process.kill()
+                    process.wait()
+            process.stdout.close()
+        SLOTS.release()

preview.py

@@ -0,0 +1,79 @@
+"""On-demand H.264/AAC previews; main-stream HD uses Intel VAAPI."""
+import json
+import os
+from pathlib import Path
+import re
+import shutil
+import signal
+import subprocess
+import sys
+from urllib.parse import quote
+
+
+def main():
+    name = os.environ.get('MTX_PATH', '')
+    match = re.fullmatch(r'(cam_[a-f0-9]{16})_(compat|hd)', name)
+    if not match:
+        raise SystemExit('Invalid preview path')
+    data = Path(sys.argv[1]).resolve()
+    config = json.loads((data / 'mediamtx.yml').read_text(encoding='utf8'))
+    hd = match[2] == 'hd'
+    original = match[1] + ('_main' if hd else '_sub')
+    if config['paths'].get(original, {}).get('source', 'publisher') == 'publisher':
+        raise SystemExit('Camera is disabled')
+    secret = next(u['pass'] for u in config['authInternalUsers'] if u['user'] == 'vision')
+    base = 'rtsp://vision:' + quote(secret, safe='') + '@127.0.0.1:18554/'
+    executable = shutil.which('ffmpeg')
+    if not executable:
+        raise SystemExit('Install FFmpeg to enable compatible preview')
+    # HD reads the actual main stream. Decode, resize and encode on the GPU;
+    # never silently start six high-resolution software decoders on a small CPU.
+    acceleration = []
+    if hd:
+        device = os.environ.get('VISION_VAAPI_DEVICE', '/dev/dri/renderD128')
+        if not os.access(device, os.R_OK | os.W_OK):
+            raise SystemExit('HD preview requires an accessible VAAPI render device')
+        acceleration = ['-hwaccel', 'vaapi', '-hwaccel_device', device,
+                        '-hwaccel_output_format', 'vaapi', '-extra_hw_frames', '8']
+        video = ['-vf', 'fps=15,scale_vaapi=w=1920:h=1080:format=nv12:force_original_aspect_ratio=decrease:force_divisible_by=2',
+                 '-c:v', 'h264_vaapi', '-profile:v', 'main', '-level:v', '4.1',
+                 # Jasper Lake can expose CQP only when HuC bitrate control is
+                 # unavailable; fixed quality does not require a firmware change.
+                 '-rc_mode', 'CQP', '-qp', '25', '-g', '30', '-bf', '0']
+    else:
+        video = ['-vf', 'fps=10,scale=768:432:force_original_aspect_ratio=decrease:force_divisible_by=2',
+                 '-c:v', 'libx264', '-threads', '1', '-preset', 'veryfast',
+                 '-tune', 'zerolatency', '-profile:v', 'baseline', '-level:v', '3.1',
+                 '-pix_fmt', 'yuv420p', '-crf', '26', '-maxrate', '1100k',
+                 '-bufsize', '2200k', '-g', '20', '-keyint_min', '20', '-sc_threshold', '0']
+    command = [executable, '-hide_banner', '-loglevel', 'error', '-nostdin',
+               '-threads', '1', '-filter_threads', '1'] + acceleration + [
+               '-rtsp_transport', 'tcp', '-timeout', '15000000', '-i', base + original,
+               '-map', '0:v:0', '-map', '0:a:0?', '-sn', '-dn'] + video + [
+               '-c:a', 'aac', '-ar', '48000', '-ac', '1', '-b:a', '48k',
+               '-f', 'rtsp', '-rtsp_transport', 'tcp', base + name]
+    process = subprocess.Popen(command, stdin=subprocess.DEVNULL, stdout=subprocess.DEVNULL,
+                               stderr=subprocess.PIPE, text=True, errors='replace')
+
+    def stop(_signum, _frame):
+        if process.poll() is None:
+            process.terminate()
+            try:
+                process.wait(timeout=5)
+            except subprocess.TimeoutExpired:
+                process.kill()
+
+    signal.signal(signal.SIGTERM, stop)
+    signal.signal(signal.SIGINT, stop)
+    try:
+        for line in process.stderr:
+            # Never write connection credentials from FFmpeg diagnostics to logs.
+            clean = re.sub(r'rtsp://[^\s]+', '[local stream]', line.replace(secret, '[redacted]'))
+            print(name + ': ' + clean.rstrip(), file=sys.stderr, flush=True)
+        return process.wait()
+    finally:
+        stop(None, None)
+
+
+if __name__ == '__main__':
+    sys.exit(main())

test_app.py

@@ -0,0 +1,133 @@
+"""Isolated regression tests: python -m unittest -v test_app."""
+import hashlib
+import http.client
+import json
+import os
+import tempfile
+import threading
+import time
+import unittest
+from unittest.mock import patch
+
+_data = tempfile.TemporaryDirectory()
+os.environ['VISION_DATA'] = _data.name
+os.environ['VISION_RECORDINGS'] = _data.name + '/recordings'
+import app
+import playback
+
+
+class WebTests(unittest.TestCase):
+    @classmethod
+    def setUpClass(cls):
+        app.initialize()
+        cls.server = app.ThreadingHTTPServer(('127.0.0.1', 0), app.Handler)
+        cls.thread = threading.Thread(target=cls.server.serve_forever, daemon=True)
+        cls.thread.start()
+        app.DB.execute('INSERT INTO sessions VALUES (?,?)',
+                       (hashlib.sha256(b'f' * 64).hexdigest(), time.time() + 60))
+        app.DB.commit()
+        app.save_object('cameras', {'id': 'a' * 16, 'name': 'Example', 'password': 'private'})
+
+    @classmethod
+    def tearDownClass(cls):
+        cls.server.shutdown()
+        cls.server.server_close()
+        cls.thread.join()
+        app.DB.close()
+        _data.cleanup()
+
+    def request(self, path, authenticated=True, data=None, origin=None):
+        c = http.client.HTTPConnection(*self.server.server_address, timeout=3)
+        headers = {'Cookie': 'vision=' + 'f' * 64} if authenticated else {}
+        if origin:
+            headers['Origin'] = origin
+        if data is not None:
+            headers['Content-Type'] = 'application/json'
+        c.request('GET' if data is None else 'POST', path,
+                  None if data is None else json.dumps(data), headers)
+        r = c.getresponse()
+        result = r.status, dict(r.getheaders()), r.read()
+        c.close()
+        return result
+
+    def test_media_and_api_require_login(self):
+        for path in ['/api/state', '/api/recordings', '/media/playback',
+                     '/media/live/cam_' + 'a' * 16 + '_hd/index.m3u8']:
+            with self.subTest(path=path):
+                self.assertEqual(self.request(path, False)[0], 401)
+
+    def test_static_security_headers(self):
+        code, headers, _ = self.request('/', False)
+        self.assertEqual(code, 200)
+        self.assertEqual(headers['X-Frame-Options'], 'DENY')
+        self.assertIn("frame-ancestors 'none'", headers['Content-Security-Policy'])
+
+    def test_origin_rejected(self):
+        self.assertEqual(self.request('/api/storage', data={}, origin='https://example.org')[0], 403)
+
+    def test_invalid_ranges_and_paths(self):
+        base = '/media/playback?camera=' + 'a' * 16 + '&start=2026-01-01T00:00:00Z&duration='
+        for duration in ['nan', 'inf', '-1', '3601']:
+            self.assertEqual(self.request(base + duration)[0], 400)
+        self.assertEqual(self.request('/media/live/../../vision.db')[0], 400)
+        self.assertEqual(self.request('/vision.db', False)[0], 404)
+
+    def test_compatible_playback_dispatch(self):
+        calls = []
+        def compatible(handler, path, duration):
+            calls.append((path, duration))
+            handler.answer({'ok': True})
+        with patch.object(app.Handler, 'compatible_playback', compatible):
+            code, _, _ = self.request('/media/playback?camera=' + 'a' * 16 + '&start=2026-01-01T00:00:00Z&duration=10')
+        self.assertEqual(code, 200)
+        self.assertEqual(calls[0][1], 10)
+        self.assertIn('format=fmp4', calls[0][0])
+
+    def test_original_download_dispatch(self):
+        calls = []
+        def proxy(handler, port, path, download=False):
+            calls.append((path, download))
+            handler.answer({'ok': True})
+        with patch.object(app.Handler, 'proxy', proxy):
+            code, _, _ = self.request('/media/playback?camera=' + 'a' * 16 + '&start=2026-01-01T00:00:00Z&duration=10&download=1')
+        self.assertEqual(code, 200)
+        self.assertIn('format=mp4', calls[0][0])
+        self.assertTrue(calls[0][1])
+
+    def test_stable_object_order(self):
+        app.save_object('sites', {'id': 'b', 'name': 'Second'})
+        app.save_object('sites', {'id': 'a', 'name': 'First'})
+        first = app.objects('sites')
+        app.save_object('sites', first[0])
+        self.assertEqual(app.objects('sites'), first)
+
+    def test_password_redacted(self):
+        self.assertNotIn('password', app.public_camera(app.get_object('cameras', 'a' * 16)))
+
+    def test_playback_has_bound_and_cleanup(self):
+        playback.SLOTS.acquire()
+        playback.SLOTS.acquire()
+        try:
+            with self.assertRaises(playback.PlaybackError):
+                with playback.stream('unused', 'private', 10):
+                    self.fail('No third conversion allowed')
+        finally:
+            playback.SLOTS.release()
+            playback.SLOTS.release()
+        with patch('playback.shutil.which', return_value=None):
+            with self.assertRaises(playback.PlaybackError):
+                with playback.stream('unused', 'private', 10):
+                    pass
+        self.assertTrue(playback.SLOTS.acquire(blocking=False))
+        playback.SLOTS.release()
+
+    def test_vaapi_uses_supported_cqp(self):
+        with patch('playback.shutil.which', return_value='ffmpeg'), patch('playback.os.access', return_value=True):
+            command = playback.command('http://127.0.0.1/source', 'private', 10)
+        self.assertEqual(command[command.index('-rc_mode') + 1], 'CQP')
+        self.assertIn('h264_vaapi', command)
+        self.assertIn('pipe:1', command)
+
+
+if __name__ == '__main__':
+    unittest.main()

web/app.js

@@ -24,7 +24,7 @@ function showPage(page) {
   $$('.page').forEach(el => el.hidden = el.id !== 'page-' + page);
   $$('nav button').forEach(b => b.classList.toggle('active', b.dataset.page === page));
   $('#page-title').textContent = pageInfo[page][0]; $('#page-note').textContent = pageInfo[page][1];
-  if (page !== 'playback') $('#play-video').pause();
+  if (page !== 'playback') resetPlayback();
   render();
   if (page === 'storage') loadAudit();
 }
@@ -62,10 +62,15 @@ function renderLive() {
     const src = `/media/live/cam_${c.id}_${quality}/index.m3u8`;
     const error = text => {const el=panel.querySelector('.video-error');el.textContent=text;el.hidden=false;};
     video.onplaying=()=>{panel.querySelector('.video-empty').hidden=true;panel.querySelector('.video-error').hidden=true;};
-    video.onerror=()=>error('浏览器无法解码此码流。可尝试切换清晰度，或将摄像头设为 H.264。');
+    video.onerror=()=>error('浏览器无法解码此码流，请在清晰度中选择“流畅 · 兼容画面”或“高清 · 主码流兼容”。');
     if (window.Hls?.isSupported()) {
-      const hls = new Hls({maxBufferLength:10,backBufferLength:5,liveSyncDurationCount:3,manifestLoadingMaxRetry:2,levelLoadingMaxRetry:2});
-      hls.on(Hls.Events.ERROR,(_,data)=>{if(data.fatal){error('画面暂未接通，请检查设备账号、路径、网络或编码。点击刷新状态可重试。');hls.destroy();}});
+      const hls = new Hls({maxBufferLength:10,backBufferLength:5,liveSyncDurationCount:3,manifestLoadingTimeOut:60000,levelLoadingTimeOut:60000,manifestLoadingMaxRetry:2,levelLoadingMaxRetry:2});
+      hls.on(Hls.Events.ERROR,(_,data)=>{if(data.fatal){
+        const codecError = /codec|bufferAddCodec|manifestIncompatible/i.test(data.details || '');
+        error(codecError ? '浏览器不支持当前视频编码，请选择“流畅 · 兼容画面”或“高清 · 主码流兼容”。' : '画面加载失败（'+(data.details || data.type)+'）。点击刷新状态可重试。');
+        console.warn('Video playback failed', c.id, data.type, data.details);
+        hls.destroy();
+      }});
       hls.on(Hls.Events.MANIFEST_PARSED,()=>video.play().catch(()=>{}));
       hls.loadSource(src);hls.attachMedia(video);players.push(hls);
     } else if (video.canPlayType('application/vnd.apple.mpegurl')) {video.src=src;video.play().catch(()=>{});}
@@ -79,7 +84,8 @@ function renderCameras() {
   $('#camera-list').innerHTML=cameras.length?`<div class="table-wrap"><table class="device-table"><thead><tr><th>设备 / 位置</th><th>所属空间</th><th>地址</th><th>码流状态</th><th>录像</th><th></th></tr></thead><tbody>${cameras.map(c=>`<tr><td>${esc(c.name)}<small>${esc(c.point||'位置待完善')}</small></td><td>${esc(siteName(c.siteId))}</td><td>${esc(c.host)}:${c.port}</td><td><span class="badge ${c.ready?'':'off'}">${c.ready?'已接通':c.enabled?'未接通':'停用'}</span></td><td>${c.recordingActive?'正在录像':c.record?'已配置，等待写入':'未开启'}</td><td><button class="quiet" data-edit-camera="${c.id}">配置</button></td></tr>`).join('')}</tbody></table></div>`:empty('尚无摄像头','可以先扫描当前局域网，或手动填写设备地址。');
 }
 function renderSites() {
-  $('#site-list').innerHTML=state.sites.length?state.sites.map(s=>`<article class="site-card"><div class="site-heading"><span class="badge">${kind(s.kind)}</span><button class="quiet" data-edit-site="${s.id}">编辑档案</button></div><h3>${esc(s.name)}</h3><dl><div><dt>所属</dt><dd>${esc(s.owner||'待填写')}</dd></div><div><dt>地区</dt><dd>${esc([s.province,s.city,s.district,s.street].filter(Boolean).join(' / ')||'待填写')}</dd></div><div><dt>小区 / 园区</dt><dd>${esc(s.community||'待填写')}</dd></div><div><dt>楼栋门牌</dt><dd>${esc([s.building,s.unit,s.floor,s.door].filter(Boolean).join(' / ')||'待填写')}</dd></div><div><dt>摄像头</dt><dd>${state.cameras.filter(c=>c.siteId===s.id).length} 台</dd></div><div><dt>详细地址</dt><dd>${esc(s.address||'待填写')}</dd></div></dl></article>`).join(''):empty('建立第一个空间','填写地区、小区、用途、楼栋和门牌，让摄像头有明确的归属。','<button data-action="new-site">＋ 新建空间</button>');
+  const sites=state.sites.filter(s=>!$('#site-filter').value||s.id===$('#site-filter').value);
+  $('#site-list').innerHTML=sites.length?sites.map(s=>`<article class="site-card"><div class="site-heading"><span class="badge">${kind(s.kind)}</span><button class="quiet" data-edit-site="${s.id}">编辑档案</button></div><h3>${esc(s.name)}</h3><dl><div><dt>所属</dt><dd>${esc(s.owner||'待填写')}</dd></div><div><dt>地区</dt><dd>${esc([s.province,s.city,s.district,s.street].filter(Boolean).join(' / ')||'待填写')}</dd></div><div><dt>小区 / 园区</dt><dd>${esc(s.community||'待填写')}</dd></div><div><dt>楼栋门牌</dt><dd>${esc([s.building,s.unit,s.floor,s.door].filter(Boolean).join(' / ')||'待填写')}</dd></div><div><dt>摄像头</dt><dd>${state.assets.filter(a=>a.siteId===s.id).length} 台 / ${state.cameras.filter(c=>c.siteId===s.id).length} 个镜头</dd></div><div><dt>详细地址</dt><dd>${esc(s.address||'待填写')}</dd></div></dl></article>`).join(''):empty('建立第一个空间','填写地区、小区、用途、楼栋和门牌，让摄像头有明确的归属。','<button data-action="new-site">＋ 新建空间</button>');
 }
 function renderStorage() {
   const s=state.storage;
@@ -98,12 +104,12 @@ handleForm('camera-form','/api/cameras',(d,f)=>({...d,port:Number(d.port),enable
 handleForm('storage-form','/api/storage',d=>Object.fromEntries(Object.entries(d).map(([k,v])=>[k,Number(v)])),loadAudit);
 $('#auth-form').addEventListener('submit',async e=>{e.preventDefault();const f=e.currentTarget,b=f.querySelector('button');b.disabled=true;try{await api(setup?'/api/setup':'/api/login',formValues(f));f.reset();f.querySelector('.form-error').textContent='';await auth();}catch(err){f.querySelector('.form-error').textContent=err.message;}finally{b.disabled=false;}});
 $('#auth-dialog').addEventListener('cancel',e=>e.preventDefault());
-document.addEventListener('click',e=>{const b=e.target.closest('button');if(!b)return;if(b.dataset.page)showPage(b.dataset.page);if(b.dataset.close)$(`#${b.dataset.close}`).close();if(b.dataset.action==='new-camera')openCamera();if(b.dataset.action==='new-asset')openAsset();if(b.dataset.action==='new-recorder')openRecorder();if(b.dataset.editAsset)openAsset(b.dataset.editAsset);if(b.dataset.editRecorder)openRecorder(b.dataset.editRecorder);if(b.dataset.action==='new-site')openSite();if(b.dataset.editSite)openSite(b.dataset.editSite);if(b.dataset.editCamera)openCamera(b.dataset.editCamera);if(b.dataset.found)openCamera(null,b.dataset.found);if(b.dataset.playCamera){showPage('playback');$('#play-camera').value=b.dataset.playCamera;queryRecordings();}if(b.dataset.span)playAt(new Date(b.dataset.span));});
-$('#logout').onclick=async()=>{await api('/api/logout',{});loggedIn=false;stopPlayers();$('#play-video').pause();await auth();};
-$('#refresh').onclick=()=>{liveKey='';refresh();};$('#site-filter').onchange=()=>{stopPlayers();render();};$('#quality').onchange=()=>{stopPlayers();renderLive();};
+document.addEventListener('click',e=>{const b=e.target.closest('button');if(!b)return;if(b.dataset.page)showPage(b.dataset.page);if(b.dataset.close)$(`#${b.dataset.close}`).close();if(b.dataset.action==='new-camera')openCamera();if(b.dataset.action==='new-asset')openAsset();if(b.dataset.action==='new-recorder')openRecorder();if(b.dataset.editAsset)openAsset(b.dataset.editAsset);if(b.dataset.editRecorder)openRecorder(b.dataset.editRecorder);if(b.dataset.action==='new-site')openSite();if(b.dataset.editSite)openSite(b.dataset.editSite);if(b.dataset.editCamera)openCamera(b.dataset.editCamera);if(b.dataset.found)openCamera(null,b.dataset.found);if(b.dataset.playCamera){showPage('playback');$('#play-camera').value=b.dataset.playCamera;$('#archive-source').value=state.cameras.find(c=>c.id===b.dataset.playCamera)?.archiveSource||'local';queryRecordings();}if(b.dataset.span)playAt(new Date(b.dataset.span));});
+$('#logout').onclick=async()=>{await api('/api/logout',{});loggedIn=false;stopPlayers();resetPlayback();await auth();};
+$('#refresh').onclick=()=>{liveKey='';refresh();};$('#site-filter').onchange=()=>{stopPlayers();resetPlayback();render();};$('#quality').onchange=()=>{stopPlayers();renderLive();};
 $('#scan-button').onclick=async()=>{try{await api('/api/discover',{network:$('#scan-network').value});await refresh();}catch(e){toast(e.message);}};
 $('#path-preset').onchange=e=>{const presets={tplink:['/stream1','/stream2'],hikvision:['/Streaming/Channels/101','/Streaming/Channels/102'],dahua:['/cam/realmonitor?channel=1&subtype=0','/cam/realmonitor?channel=1&subtype=1']};const v=presets[e.target.value];if(v){$('#camera-form').elements.mainPath.value=v[0];$('#camera-form').elements.subPath.value=v[1];}};
-function resetPlayback() {const v=$('#play-video');v.pause();v.removeAttribute('src');v.load();$('#play-empty').hidden=false;$('#download').hidden=true;spans=[];queryCamera='';drawTimeline();$('#recording-list').innerHTML='';}
+function resetPlayback() {const v=$('#play-video');v.pause();v.removeAttribute('src');v.load();$('#play-empty').hidden=false;$('#download').hidden=true;spans=[];queryCamera='';queryStart=null;queryEnd=null;$('#play-info').textContent='选择日期，查看实际录像时段';drawTimeline();$('#recording-list').innerHTML='';}
 async function queryRecordings() {
   resetPlayback();const id=$('#play-camera').value,date=$('#play-date').value;if(!id||!date){toast('请选择摄像头和日期');return;}
   const channel=state.cameras.find(c=>c.id===id);if($('#archive-source').value==='recorder'){$('#play-info').textContent='录像机历史回放接口待接入。请先提供录像机型号，在录像机或原厂 App 中可继续查看已有录像。';return;}
@@ -112,21 +118,24 @@ async function queryRecordings() {
   try{const d=await api('/api/recordings?'+new URLSearchParams({camera:id,start:queryStart.toISOString(),end:queryEnd.toISOString()}));spans=d.items.map(s=>({...s,date:new Date(s.start)}));$('#play-info').textContent=spans.length?`找到 ${spans.length} 段连续录像`:'该日期暂无可回放录像';drawTimeline();$('#recording-list').innerHTML=spans.map(s=>`<button class="recording-item" data-span="${esc(s.start)}">${s.date.toLocaleTimeString()} — ${new Date(+s.date+s.duration*1000).toLocaleTimeString()}<small>${(s.duration/60).toFixed(1)} 分钟 · 点击播放</small></button>`).join('');if(spans.length)playAt(new Date(Math.max(+spans[0].date,+queryStart)));}catch(e){$('#play-info').textContent=e.message;}
 }
 function drawTimeline() {const c=$('#timeline'),w=c.clientWidth;if(!w)return;const scale=window.devicePixelRatio||1;c.width=w*scale;c.height=76*scale;const ctx=c.getContext('2d');ctx.scale(scale,scale);ctx.fillStyle='#101f25';ctx.fillRect(0,0,w,76);ctx.strokeStyle='#2b454e';for(let i=0;i<=24;i++){const x=w*i/24;ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,i%6===0?76:12);ctx.stroke();}if(!queryStart||!queryEnd)return;ctx.fillStyle='#72cdb5';const total=queryEnd-queryStart;for(const s of spans){const a=Math.max(0,(s.date-queryStart)/total),b=Math.min(1,(+s.date+s.duration*1000-queryStart)/total);if(b>a)ctx.fillRect(a*w,25,Math.max(2,(b-a)*w),25);}}
-function playAt(date) {const s=spans.find(s=>+date>=+s.date&&+date<+s.date+s.duration*1000);if(!s){toast('这个时间没有录像，请选择绿色时段');return;}const duration=Math.min(3600,(+s.date+s.duration*1000-date)/1000);const params=new URLSearchParams({camera:queryCamera,start:date.toISOString(),duration:String(duration)});$('#play-video').src='/media/playback?'+params;$('#play-video').play().catch(()=>{});$('#play-info').textContent='回放起点 '+date.toLocaleString()+' · 当前片段最多一小时';$('#play-empty').hidden=true;$('#download').href='/media/playback?'+params+'&download=1';$('#download').setAttribute('download','recording.mp4');$('#download').hidden=false;}
+function playAt(date) {const s=spans.find(s=>+date>=+s.date&&+date<+s.date+s.duration*1000);if(!s){toast('这个时间没有录像，请选择绿色时段');return;}const duration=Math.min(3600,(+s.date+s.duration*1000-date)/1000);const params=new URLSearchParams({camera:queryCamera,start:date.toISOString(),duration:String(duration)});$('#play-video').src='/media/playback?'+params;$('#play-video').play().catch(()=>{});$('#play-info').textContent='回放起点 '+date.toLocaleString()+' · 兼容回放，最多一小时；使用下方时间轴定位';$('#play-empty').hidden=true;$('#download').href='/media/playback?'+params+'&download=1';$('#download').setAttribute('download','recording.mp4');$('#download').hidden=false;}
 $('#query-recordings').onclick=queryRecordings;$('#play-camera').onchange=()=>{resetPlayback();const c=state.cameras.find(c=>c.id===$('#play-camera').value);$('#archive-source').value=c?.archiveSource||'local';};$('#archive-source').onchange=resetPlayback;$('#play-date').onchange=resetPlayback;
 $('#seek-button').onclick=()=>{if(!queryCamera){toast('请先查询录像');return;}playAt(new Date($('#play-date').value+'T'+$('#seek-time').value));};
 $('#timeline').onclick=e=>{if(!queryStart)return;const rect=e.currentTarget.getBoundingClientRect();playAt(new Date(+queryStart+(queryEnd-queryStart)*(e.clientX-rect.left)/rect.width));};
-$('#play-video').onerror=()=>{$('#play-info').textContent='回放失败：可能没有完整录像，或浏览器不支持录像编码；可下载片段后播放。';};
+$('#play-video').onerror=()=>{if($('#play-video').getAttribute('src'))$('#play-info').textContent='回放失败：请稍后重试，或下载原始片段；服务器最多同时转换两个回放。';};
+$('#play-video').onplaying=()=>{$('#play-empty').hidden=true;};
 const today=new Date();$('#play-date').value=[today.getFullYear(),String(today.getMonth()+1).padStart(2,'0'),String(today.getDate()).padStart(2,'0')].join('-');
 window.addEventListener('resize',drawTimeline);window.addEventListener('beforeunload',stopPlayers);
 setInterval(()=>{$('#clock').textContent=new Date().toLocaleString('zh-CN',{hour12:false});},1000);
 setInterval(refresh,12000);auth();
 
 function renderAssets(){
- $('#asset-list').innerHTML=state.assets.length?state.assets.filter(a=>!$('#site-filter').value||a.siteId===$('#site-filter').value).map(a=>`<article class="site-card"><div class="site-heading"><span class="badge">摄像头对象</span><button class="quiet" data-edit-asset="${a.id}">编辑</button></div><h3>${esc(a.name)}</h3><dl><div><dt>所属空间</dt><dd>${esc(siteName(a.siteId))}</dd></div><div><dt>品牌型号</dt><dd>${esc([a.brand,a.model].filter(Boolean).join(' / ')||'待填写')}</dd></div><div><dt>物理镜头</dt><dd>${a.lensCount} 个</dd></div><div><dt>已配置通道</dt><dd>${state.cameras.filter(c=>c.assetId===a.id).length} 个</dd></div><div><dt>安装位置</dt><dd>${esc(a.point||'待填写')}</dd></div></dl></article>`).join(''):empty('先建立实体摄像头对象','三台双镜头摄像头，建立三个对象；每个对象下分别配置镜头通道。','<button data-action="new-asset">＋ 新建摄像头对象</button>');
+ const assets=state.assets.filter(a=>!$('#site-filter').value||a.siteId===$('#site-filter').value);
+ $('#asset-list').innerHTML=assets.length?assets.map(a=>`<article class="site-card"><div class="site-heading"><span class="badge">摄像头对象</span><button class="quiet" data-edit-asset="${a.id}">编辑</button></div><h3>${esc(a.name)}</h3><dl><div><dt>所属空间</dt><dd>${esc(siteName(a.siteId))}</dd></div><div><dt>品牌型号</dt><dd>${esc([a.brand,a.model].filter(Boolean).join(' / ')||'待填写')}</dd></div><div><dt>物理镜头</dt><dd>${a.lensCount} 个</dd></div><div><dt>已配置通道</dt><dd>${state.cameras.filter(c=>c.assetId===a.id).length} 个</dd></div><div><dt>安装位置</dt><dd>${esc(a.point||'待填写')}</dd></div></dl></article>`).join(''):empty('先建立实体摄像头对象','三台双镜头摄像头，建立三个对象；每个对象下分别配置镜头通道。','<button data-action="new-asset">＋ 新建摄像头对象</button>');
 }
 function renderRecorders(){
- $('#recorder-list').innerHTML=state.recorders.length?state.recorders.map(r=>`<article class="site-card"><div class="site-heading"><span class="badge">录像机</span><button class="quiet" data-edit-recorder="${r.id}">配置</button></div><h3>${esc(r.name)}</h3><dl><div><dt>所属空间</dt><dd>${esc(siteName(r.siteId))}</dd></div><div><dt>品牌型号</dt><dd>${esc([r.brand,r.model].filter(Boolean).join(' / ')||'待确认')}</dd></div><div><dt>设备地址</dt><dd>${esc(r.host)}:${r.port}</dd></div><div><dt>凭据</dt><dd>${r.passwordConfigured?'已配置':'尚未填写'}</dd></div><div><dt>关联镜头</dt><dd>${state.cameras.filter(c=>c.recorderId===r.id).length} 个</dd></div><div><dt>原有录像回放</dt><dd>待型号适配</dd></div></dl></article>`).join(''):empty('连接现有录像机','填写录像机账号后，在各镜头通道选择这台录像机。','<button data-action="new-recorder">＋ 添加录像机</button>');
+ const recorders=state.recorders.filter(r=>!$('#site-filter').value||r.siteId===$('#site-filter').value);
+ $('#recorder-list').innerHTML=recorders.length?recorders.map(r=>`<article class="site-card"><div class="site-heading"><span class="badge">录像机</span><button class="quiet" data-edit-recorder="${r.id}">配置</button></div><h3>${esc(r.name)}</h3><dl><div><dt>所属空间</dt><dd>${esc(siteName(r.siteId))}</dd></div><div><dt>品牌型号</dt><dd>${esc([r.brand,r.model].filter(Boolean).join(' / ')||'待确认')}</dd></div><div><dt>设备地址</dt><dd>${esc(r.host)}:${r.port}</dd></div><div><dt>凭据</dt><dd>${r.passwordConfigured?'已配置':'尚未填写'}</dd></div><div><dt>关联镜头</dt><dd>${state.cameras.filter(c=>c.recorderId===r.id).length} 个</dd></div><div><dt>原有录像回放</dt><dd>待型号适配</dd></div></dl></article>`).join(''):empty('连接现有录像机','填写录像机账号后，在各镜头通道选择这台录像机。','<button data-action="new-recorder">＋ 添加录像机</button>');
 }
 function openAsset(id){if(!state.sites.length){toast('请先建立空间档案');openSite();return;}const f=$('#asset-form');f.reset();f.querySelector('.form-error').textContent='';f.elements.siteId.innerHTML=state.sites.map(s=>`<option value="${s.id}">${esc(s.name)}</option>`).join('');const a=state.assets.find(a=>a.id===id);if(a)for(const [k,v]of Object.entries(a))if(f.elements[k])f.elements[k].value=v;$('#asset-dialog').showModal();}
 function openRecorder(id){if(!state.sites.length){toast('请先建立空间档案');openSite();return;}const f=$('#recorder-form');f.reset();f.querySelector('.form-error').textContent='';f.elements.siteId.innerHTML=state.sites.map(s=>`<option value="${s.id}">${esc(s.name)}</option>`).join('');const r=state.recorders.find(a=>a.id===id);if(r)for(const [k,v]of Object.entries(r))if(f.elements[k])f.elements[k].value=v;$('#recorder-dialog').showModal();}

web/index.html

@@ -24,19 +24,19 @@
     <div id="banner" class="banner" hidden></div>
     <section class="metrics"><div><span>摄像头</span><strong id="metric-all">—</strong></div><div><span>已接通码流</span><strong id="metric-ready">—</strong></div><div><span>录像占用</span><strong id="metric-used">—</strong></div><div><span>空间档案</span><strong id="metric-sites">—</strong></div></section>
     <div class="filter-row"><label>空间范围 <select id="site-filter"><option value="">全部空间</option></select></label><span id="filter-caption">家庭与公司，分别管理</span><button id="refresh" class="quiet">↻ 刷新状态</button></div>
-    <section id="page-live" class="page"><div class="section-head"><h2>现场画面 <small>LIVE VIEW</small></h2><div><label>清晰度 <select id="quality"><option value="sub">流畅 · 子码流</option><option value="main">清晰 · 主码流</option></select></label><button data-action="new-camera">＋ 添加镜头通道</button></div></div><div id="live-grid" class="live-grid"></div></section>
+    <section id="page-live" class="page"><div class="section-head"><h2>现场画面 <small>LIVE VIEW</small></h2><div><label>清晰度 <select id="quality"><option value="compat">流畅 · 兼容画面</option><option value="hd">高清 · 主码流兼容</option><option value="sub">原始 · 子码流</option><option value="main">原始 · 主码流</option></select></label><button data-action="new-camera">＋ 添加镜头通道</button></div></div><p class="description" id="quality-note">流畅画面最高 768×432；高清画面从主码流转换，最高 1920×1080、15 帧/秒。原始画面需要浏览器支持摄像头编码。</p><div id="live-grid" class="live-grid"></div></section>
     <section id="page-playback" class="page" hidden>
       <div class="section-head"><h2>回到那一刻 <small>PLAYBACK</small></h2></div>
       <div class="panel playback-controls"><label>摄像头<select id="play-camera"></select></label><label>录像来源<select id="archive-source"><option value="recorder">录像机原有录像</option><option value="local">小电脑本机录像</option></select></label><label>日期<input id="play-date" type="date"></label><button id="query-recordings">查找录像</button><span id="play-info">选择日期，查看实际录像时段</span></div>
       <div class="video-panel"><video id="play-video" controls playsinline></video><div id="play-empty" class="video-empty">选择一个有录像的时间段</div></div>
-      <div class="panel"><div class="timeline-head"><strong>当日时间轴</strong><span><i class="legend"></i> 有录像的时段 · 点击定位</span></div><canvas id="timeline" height="76" aria-label="录像时间轴"></canvas><div class="time-labels"><span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>24:00</span></div><div class="seek-row"><label>定位时间 <input id="seek-time" type="time" step="1" value="12:00:00"></label><button id="seek-button" class="secondary">定位播放</button><a id="download" class="button secondary" hidden>下载当前片段</a></div></div>
+      <div class="panel"><div class="timeline-head"><strong>当日时间轴</strong><span><i class="legend"></i> 有录像的时段 · 点击定位</span></div><canvas id="timeline" height="76" aria-label="录像时间轴"></canvas><div class="time-labels"><span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>24:00</span></div><div class="seek-row"><label>定位时间 <input id="seek-time" type="time" step="1" value="12:00:00"></label><button id="seek-button" class="secondary">定位播放</button><a id="download" class="button secondary" hidden>下载原始片段</a></div></div>
       <div id="recording-list" class="recording-list"></div>
     </section>
     <section id="page-cameras" class="page" hidden><div class="section-head"><h2>镜头通道 <small>CHANNELS</small></h2><button data-action="new-camera">＋ 添加镜头通道</button></div><div class="panel discovery"><div><strong>发现局域网设备</strong><p>探测 RTSP 服务，添加后用设备账号连接。</p></div><input id="scan-network" placeholder="例如 192.168.1.0/24" aria-label="局域网网段"><button id="scan-button" class="secondary">开始探测</button></div><div id="scan-result"></div><div id="camera-list"></div></section>
     <section id="page-objects" class="page" hidden><div class="section-head"><h2>摄像头对象 <small>CAMERA ASSETS</small></h2><button data-action="new-asset">＋ 新建摄像头对象</button></div><p class="description">一台实体摄像头对应一个对象，双镜头在对象下建立两个镜头通道；每个镜头分别有主码流和子码流。</p><div id="asset-list" class="site-grid"></div></section>
     <section id="page-recorders" class="page" hidden><div class="section-head"><h2>录像机 <small>RECORDERS</small></h2><button data-action="new-recorder">＋ 添加录像机</button></div><p class="description">统一保存录像机地址与账号，镜头通道关联录像机。实时取流使用 RTSP；读取录像机已有历史录像，需要该型号的回放接口适配。</p><div id="recorder-list" class="site-grid"></div></section>
     <section id="page-sites" class="page" hidden><div class="section-head"><h2>空间档案 <small>PLACES</small></h2><button data-action="new-site">＋ 新建空间</button></div><p class="description">为家庭、公司或其他场所建立地址档案，再关联摄像头。地区、小区、楼栋和门牌都是独立属性。</p><div id="site-list" class="site-grid"></div></section>
-    <section id="page-storage" class="page" hidden><div class="section-head"><h2>录像与存储 <small>STORAGE</small></h2></div><div class="storage-grid"><form id="storage-form" class="panel"><h3>录像保留策略</h3><label>保留天数<input name="retentionDays" type="number" min="1" max="365" required></label><label>录像容量上限（GB）<input name="maxGB" type="number" min="5" max="100000" required></label><label>磁盘预留空间（GB）<input name="reserveGB" type="number" min="2" max="1000" required></label><p class="description">超过保留天数的录像会自动删除。达到容量上限或预留空间不足时暂停录像；调整策略后自动恢复。容量每 20 秒检查一次，可能有少量超出。</p><button type="submit">保存策略</button><span class="form-error"></span></form><div class="panel"><h3>运行状态</h3><dl id="storage-status"></dl><p class="description">开启摄像头的“持续录像”后，服务会保存主码流。预览优先使用子码流。画面由摄像头编码输出，浏览器兼容性取决于其编码，建议使用 H.264。</p><h3>最近操作</h3><div id="audit-list"></div></div></div></section>
+    <section id="page-storage" class="page" hidden><div class="section-head"><h2>录像与存储 <small>STORAGE</small></h2></div><div class="storage-grid"><form id="storage-form" class="panel"><h3>录像保留策略</h3><label>保留天数<input name="retentionDays" type="number" min="1" max="365" required></label><label>录像容量上限（GB）<input name="maxGB" type="number" min="5" max="100000" required></label><label>磁盘预留空间（GB）<input name="reserveGB" type="number" min="2" max="1000" required></label><p class="description">超过保留天数的录像会自动删除。达到容量上限或预留空间不足时暂停录像；调整策略后自动恢复。容量每 20 秒检查一次，可能有少量超出。</p><button type="submit">保存策略</button><span class="form-error"></span></form><div class="panel"><h3>运行状态</h3><dl id="storage-status"></dl><p class="description">开启摄像头的“持续录像”后，服务会保存主码流。预览默认使用 H.264 流畅画面（最高 768×432、10 帧/秒），也可选择从主码流转换的 1080p 高清画面。原始码流与本机录像保留设备编码。</p><h3>最近操作</h3><div id="audit-list"></div></div></div></section>
     <footer><span>赵府智家 · 视觉系统</span><span id="version">独立部署 / 数据自有</span></footer>
   </main>
   <dialog id="auth-dialog"><form id="auth-form"><span class="eyebrow">WELCOME HOME</span><h2 id="auth-title">欢迎回来</h2><p id="auth-note">输入管理密码，进入视觉工作空间。</p><label id="setup-code-label" hidden>初始化码<input name="code" autocomplete="off"></label><label>管理员密码<input name="password" type="password" minlength="10" maxlength="128" required autocomplete="current-password"></label><p class="form-error"></p><button type="submit" class="wide">进入系统</button></form></dialog>