企业官网建设流程全解析

Frigate Live View 实战指南：实时监控面板、流媒体切换与摄像头控制全解析

【免费下载链接】frigateNVR with realtime local object detection for IP cameras项目地址: https://gitcode.com/GitHub_Trending/fr/frigate

导读

Live View（实时视图）是 Frigate 面向 IP 摄像头的实时监控仪表盘，也是默认登录页面：它同时呈现所有摄像头的画面、顶部滚动展示最近告警、支持单路全分辨率大画面（含音频、双向对讲、PTZ 云台与按需录像控制）。本文以 Live View 使用文档 为核心，融合 Live View 配置文档 与前端/后端源码实现，系统讲解仪表盘布局、摄像头分组、流媒体技术选型（jsmpeg/MSE/WebRTC）、右键菜单、单摄像头视图、实时控制开关、按需录像快照、PTZ 云台操作及常见问题排查，帮助你从「会看」到「会用」再到「懂原理」。

本文聚焦 Live view 的使用层面。关于 go2rtc 配置、流选择、智能流、WebRTC 与音频等配置细节，请参阅 Live View configuration。

一、Live View 技术全景：三种流媒体技术如何协同

1.1 什么是「智能流」（Smart Streaming）

默认情况下 Frigate 采用Smart Streaming（智能流）：当画面没有可检测活动时，摄像头图像大约每分钟更新一次，以节约带宽与资源；一旦检测到任何运动或活动目标，画面无缝切换为实时流。因为「一张静止的场景图」与「一段没有运动的实时流」视觉上完全一致，所以这种方式在几乎不影响观看体验的前提下大幅降低带宽消耗，尤其适合高分辨率摄像头。

智能流的完整工作链路如下（见 Live view FAQ）：

1. 静态图像从配置中带有detect角色的流拉取；
2. 检测到活动后，detect流立即以约 5 fps 开始更新画面，让你能看到活动发生，直至实时播放器加载完成（通常只需 1~2 秒）；
3. 若实时播放器超时、缓冲或出错，则回退到 jsmpeg 播放器，播放来自detect角色的纯视频流；
4. 活动结束后，播放器被销毁，重新显示静态图像，循环往复。

智能流的灵敏度依赖摄像头motion配置中的threshold与contour_area取值，可在 UI 的 Settings 中使用 Motion Tuner 实时调参。

1.2 三种流媒体技术对比

Frigate 会根据网络带宽、播放器错误或所需功能（如双向对讲）在三种技术间智能切换，具体差异如下：

jsmpeg 会占用更多浏览器与客户端 GPU 资源；配置 go2rtc 可显著改善体验。另需注意：WebRTC 可能使用外部 STUN 服务器做 NAT 穿透，而 MSE 与 HLS 流不需要任何互联网访问（详见 网络要求）。

1.3 前端源码中的模式选择逻辑

前端在web/src/hooks/use-camera-live-mode.ts中实现了这套选型逻辑：

• 遍历每台摄像头，取其当前选中流（activeStreams或camera.live.streams的第一个条目）；
• 判断该流是否为 go2rtc 中已配置的 restream 流（config.go2rtc.streams）；
• 若浏览器不支持 MSE（MediaSource/ManagedMediaSource均不存在），restream 流退而使用webrtc，否则使用mse；非 restream 流统一使用jsmpeg；
• 只有 restream 流才去拉取流元数据（useDeferredStreamMetadata）并检测音频能力（detectCameraAudioFeatures）。

播放器模式类型定义在web/src/types/live.ts：export type LivePlayerMode = "webrtc" | "mse" | "jsmpeg" | "debug";，错误类型为"stalled" | "startup" | "mse-decode"。对应的播放器实现分别位于web/src/components/player/MsePlayer.tsx、JSMpegPlayer.tsx与LivePlayer.tsx。

二、仪表盘速览：All Cameras 主页

默认的All Cameras仪表盘展示所有已启用的摄像头，顶部有一条最近alerts（告警）的滚动胶片条：

• 点击某个告警会在 Review 中打开它；
• 每张卡片上有「标记为已审阅」的勾选按钮，无需离开仪表盘即可处理；
• 胶片条中只出现 alerts；若要屏蔽某标签或区域出现在胶片条中，请将其配置为 detection 而不是 alert（见 Alerts and Detections）。

移动端：顶栏的开关可在网格（grid）布局与单列列表（list）布局间切换。桌面端：右下角提供全屏按钮。

2.1 切换仪表盘与摄像头分组

左侧图标栏（桌面端在左上角，移动端为横向条）用于切换仪表盘：

• home 图标= All Cameras 仪表盘，展示所有为仪表盘启用的摄像头；
• 你创建的每个camera group（摄像头分组）都有独立图标，选中后只显示该组摄像头。

分组非常适合按位置组织摄像头（例如Front of House、Backyard），并且可以让每个分组拥有独立的仪表盘布局与流媒体偏好。

此外你还可以在仪表盘上直接查看 Birdseye，或通过http://<frigate_host>:5000/#birdseye直接打开；在 Birdseye 视图中点击某摄像头即可跳到它的实时画面。

2.2 创建与编辑摄像头分组

管理员可通过分组图标栏旁的铅笔图标打开Camera Groups对话框，进行添加、编辑与删除。创建分组时需要指定：

删除分组会同时清除你为该分组保存的自定义布局。

2.3 调整分组布局

桌面端与平板端，每个摄像头分组都有可自由排列的网格：

1. 点击右下角的布局按钮进入Edit Layout（编辑布局）模式；
2. 摄像头瓦片会出现拖拽手柄与角落的缩放手柄；
3. 拖拽瓦片可移动位置，拖拽角落可改变大小（保持宽高比）；
4. 退出编辑模式即保存。

布局按设备存储在浏览器本地（localStorage），因此每台设备可以有不同的排列。默认的 All Cameras 仪表盘不可手动排列——它会根据每台摄像头的宽高比自动排布瓦片：宽屏摄像头占两列，竖屏摄像头占两行。相关前端实现见web/src/views/live/DraggableGridLayout.tsx。

三、读懂摄像头瓦片的状态指示器

每块摄像头瓦片通过少量覆盖层反映当前状态：

你还可以选择在瓦片上叠加实时流统计信息（流类型、带宽、延迟、帧计数），用于诊断播放问题——统计开关位于右键菜单中。

四、流媒体设置与右键菜单

4.1 右键（长按）菜单的快捷控制

右键（或长按）摄像头瓦片会打开上下文菜单（实现于web/src/components/menu/LiveContextMenu.tsx）：

• 音量控制（仅支持音频的流显示）；
• Mute / Unmute all cameras（静音/取消静音所有摄像头）；
• 显示/隐藏流统计；
• debug view（调试视图）；
• notification（通知）选项；
• 管理员可开启/关闭摄像头。

如果音量控制没有出现，请检查 Audio Support。音频需要 go2rtc 配置了兼容的音频编码。

当 Frigate 回退到较低质量的 jsmpeg 流时，菜单中会出现Low-bandwidth mode（低带宽模式）提示与Reset选项。低带宽模式产生的原因见 Live view FAQ。

4.2 流媒体设置（非默认分组）

对于非默认分组，上下文菜单还提供该摄像头的Streaming Settings（流媒体设置）：

• stream（流）：下拉框列出你在live -> streams下配置的流，并标注哪些流可用音频；
• streaming method（流方式）：No Streaming（不流式播放）、Smart Streaming（智能流，推荐）、Continuous Streaming（持续流，带宽更高）；
• compatibility mode（兼容模式）：仅当默认播放器渲染异常（画面出现彩色伪影、右侧对角线）时启用。

这些设置按分组、按设备保存在浏览器本地（localStorage），不会写入配置文件。注意：默认的 All Cameras 仪表盘总是使用 Smart Streaming（除非在 Settings 中关闭了全局 Automatic Live View），并且总是使用streams配置中的第一条流——想改变这些默认值请使用摄像头分组。

五、单摄像头视图

点击摄像头瓦片进入该摄像头的全分辨率单摄像头视图，顶栏提供：

你可以捏合或滚动缩放画面。设置齿轮提供：stream 选择器（带音频与双向对讲可用性标识）、Play in background（后台播放）、Show stats（显示统计）、Debug view（调试视图，叠加显示 Frigate 的检测区域与目标边界框）。

双向对讲与摄像头音频有特定的编码与端口要求，详见 Audio Support 与 WebRTC。

从源码看（web/src/views/live/LiveCameraView.tsx），画中画通过document.pictureInPictureElement状态跟踪，PTZ 拖拽区域用react-konva绘制矩形覆盖层，并定义了DRAG_MIN_PX = 15的像素阈值区分「点击」与「拖拽」。

六、摄像头控制：管理员的实时开关

管理员在单摄像头视图中（移动端为设置抽屉）有一排实时开关，可即时启停摄像头功能：

这些开关立即改变运行时行为；是否在重启后保持取决于具体功能，请参阅对应配置页面。

6.1 运行时状态的持久化：.runtime_state.json

Live view 中的camera on/off、detect、recordings、snapshots、audio detection等开关（以及等价的 MQTT/set主题）会把新状态写入config.yml旁的.runtime_state.json文件。该文件在 Frigate 启动时被重放，因此最近一次的开关节状态能够跨重启保留。

后端持久化层实现在frigate/comms/runtime_state.py（RuntimeStatePersistence类），其关键设计：

• TRACKED_TOPICS映射了调度器主题名到 YAML 键后缀：enabled、detect.enabled、snapshots.enabled、record.enabled、audio.enabled；
• 使用filelock的FileLock保证多进程并发读写的原子性，写入时先写.tmp再os.replace；
• clear_all()在切换 profile 时清空全部覆盖值，避免陈旧覆盖在新 profile 上重放；
• clear_for_yaml_keys()在通过 Settings UI 保存字段时，清除与已写入配置项对应的覆盖条目，使config.yml成为权威来源；
• clear_camera()在删除摄像头时清理对应条目，防止同名新摄像头继承过期开关状态。

与文档描述对应：Settings UI 保存优先（匹配条目从.runtime_state.json清除）；切换 profile 清空所有运行时覆盖（见 Profiles）。若你手工编辑config.yml而运行时覆盖仍存在，覆盖值仍会在重启后重放；删除.runtime_state.json即可重置为 YAML 定义的默认值。

6.2 摄像头的三种状态：On / Off / Disabled

在Settings → Global configuration → Camera management中，每台摄像头有三种状态：

关闭摄像头（Off）的途径包括：单摄像头视图顶栏电源按钮、仪表盘瓦片右键菜单、Camera management 设置面板、移动端设置抽屉（仅管理员）、MQTT 主题frigate/<camera_name>/enabled/set（载荷ON/OFF）、Home Assistant 集成 的camera.turn_on/camera.turn_offaction。

选择建议：想保留摄像头历史数据（审阅项、跟踪目标、录像）可访问就设为Off；想让摄像头彻底从仪表盘、审阅筛选器等 UI 中消失则设为Disabled（仍保留在 Camera management 中以便日后重新启用；想彻底移除包括配置在内的所有痕迹，请用 Camera management 中的删除操作）。

Restream 行为：对于 Off 与 Disabled 摄像头，go2rtc 仍然运行，但除非存在活跃的外部消费者（如 Home Assistant 的 Advanced Camera Card 使用 go2rtc 源），否则不消耗解码/处理资源。

七、按需录制与快照

单摄像头视图可以按需采集画面：

• Start on-demand recording：开始一段手动录像，基于摄像头的录像保留设置（激活时按钮呈脉动状态）；若该摄像头未启用录制，则只保存一张快照。使用End on-demand recording结束。
• Download instant snapshot：保存当前帧的静态图片。

保留策略配置见 Recording 与 Snapshots；需要永久保留片段请使用 Exports。快照下载的逻辑位于web/src/utils/snapshotUtil.ts（downloadSnapshot、fetchCameraSnapshot、generateSnapshotFilename、grabVideoSnapshot），由LiveCameraView.tsx中的按钮调用。

八、PTZ 云台控制

对于支持的 ONVIF 摄像头，控制面板提供：pan/tilt 方向箭头、zoom（变焦）、focus（对焦）与已保存的presets（预置位）。

你还可以启用click-to-move / drag-to-zoom（点击移动 / 拖拽缩放）覆盖层：

• 点击画面中的某点，摄像头平移使该点居中；
• 拖拽一个方框进行平移与缩放：从左上到右下拖拽 = 放大，反向拖拽 = 缩小。

前端实现中，LiveCameraView.tsx用ptzRect状态跟踪拖拽矩形，通过sendPtz将归一化坐标指令发送到后端 ONVIF 服务（PTZ 后端逻辑见frigate/ptz/onvif.py）。若需要对移动目标进行持续自动跟踪，请参阅 Autotracking。

九、音频支持与流配置要点

9.1 音频编码兼容性

• MSE需要PCMA/PCMU 或 AAC音频；
• WebRTC需要PCMA/PCMU 或 opus音频。

要同时支持 MSE 与 WebRTC，restream 配置需确保两种编码都被启用：

go2rtc: streams: rtsp_cam: # <- 适用于 RTSP 流 - rtsp://192.168.1.5:554/live0 # <- 支持视频与 aac 音频的流 - "ffmpeg:rtsp_cam#audio=opus" # <- 复制流，将音频转码为缺失的编码（通常为 opus） http_cam: # <- 适用于 http 流 - http://192.168.50.155/flv?port=1935&app=bcs&stream=channel0_main.bcs&user=user&password=password - "ffmpeg:http_cam#audio=opus"

若摄像头不支持 AAC 音频或 Live view 出现问题，可直接转码为 AAC：

go2rtc: streams: rtsp_cam: - "ffmpeg:rtsp://192.168.1.5:554/live0#video=copy#audio=aac" # <- 复制视频流并转码音频为 aac - "ffmpeg:rtsp_cam#audio=opus" # <- 为 WebRTC 提供支持

若摄像头没有音频，让 go2rtc 只发送视频：

go2rtc: streams: no_audio_camera: - ffmpeg:rtsp://192.168.1.5:554/live0#video=copy

9.2 摄像头固件推荐设置

使用 go2rtc 时，建议在摄像头固件中做如下调整以获得最佳 Live view 体验：

• 视频编码：H.264——对 Live view 各技术与浏览器兼容性最好；避免 H.264+/H.265+ 等非标准「智能编码」，它们会移除关键帧（I 帧）；
• 音频编码：AAC——对支持音频的浏览器兼容性最好；
• I 帧间隔（关键帧间隔 / GOP 长度）：与帧率一致（Reolink 选择 "1x"）。例如 20fps 输出对应 I 帧间隔 20。高于帧率的值会显著延长起播时间。注意 1x 的 I 帧间隔若同时用于record角色会增加存储占用。

9.3 为 Live UI 配置可选流

live -> streams配置可让 UI 的 Live view 中出现流下拉框，从而在不同设备上手动选择不同流（例如移动端看子码流、桌面端看全分辨率主码流）。该设置按设备保存在浏览器本地存储；在 UI 中创建/编辑摄像头分组时也可为分组仪表盘选择流。

默认的 All Cameras 仪表盘播放直播时总是使用streams中定义的第一条流。

YAML 配置示例（Frigate 0.16+ 支持多流）：

go2rtc: streams: test_cam: - rtsp://192.168.1.5:554/live_main - "ffmpeg:test_cam#audio=opus" # <- 转码音频为 opus 以支持 webrtc test_cam_sub: - rtsp://192.168.1.5:554/live_sub test_cam_another_sub: - rtsp://192.168.1.5:554/live_alt cameras: test_cam: ffmpeg: output_args: record: preset-record-generic-audio-copy inputs: - path: rtsp://127.0.0.1:8554/test_cam # <- 名称须与 restream 中的摄像头名一致 input_args: preset-rtsp-restream roles: - record - path: rtsp://127.0.0.1:8554/test_cam_sub input_args: preset-rtsp-restream roles: - detect live: streams: # <- Frigate 0.16 及以后支持多流 Main Stream: test_cam # <- "友好名称" + go2rtc 流名 Sub Stream: test_cam_sub Special Stream: test_cam_another_sub

注意：streams中只能填写go2rtc 流名，不能填写路径，并且必须使用 Frigate 内置的 go2rtc。也可通过 UI 在Settings > Camera configuration > Live playback中维护。

9.4 WebRTC 额外配置

WebRTC 通过端口8555建立 TCP 或 UDP 连接，需要额外配置：

• 外网访问：路由器将8555端口（TCP 与 UDP）转发到 Frigate 设备；
• 内网/本地访问（未通过 HA App 运行时）：在 go2rtc 配置中设置 WebRTC candidates 列表，例如 Frigate 设备本地 IP 为192.168.1.10：

go2rtc: streams: test_cam: ... webrtc: candidates: - 192.168.1.10:8555 - stun:8555

• Tailscale 访问：必须将 Frigate 系统的 Tailscale IP 添加为 WebRTC candidate（Tailscale IP 以100.开头，属于保留 CIDR100.64.0.0/10）；
• 部分浏览器不支持 H.265（HEVC）；
• 若以 Docker 运行且 WebRTC 难以工作，可尝试network: host（无需端口转发，go2rtc 推荐但建议仅在必要时使用）或network: bridge（需映射端口8555:8555/tcp与8555:8555/udp）；
• 通过 Home Assistant App 安装时通常无需手动配置（Frigate 会通过 Supervisor API 生成 candidate），若 App 日志初始化阶段出现[WARN] Failed to get IP address from supervisor或[WARN] Failed to get WebRTC port from supervisor，建议手动定义 candidates。

9.5 双向对讲（Two-way talk）

使用前提：配置好 WebRTC、通过 https 访问 Frigate（可能需要开放 8971 端口，见 安装文档）、Home Assistant Frigate 卡片按官方指引选择正确的源。Reolink 门铃请使用推荐的 Reolink 配置。另外，为防止 go2rtc 独占摄像头的双向音频通道而阻塞其他应用，需要在流配置中加入#backchannel=0（见 restream 文档 中的双向对讲章节）。

9.6 jsmpeg 流质量

jsmpeg Live view 的分辨率与编码质量可全局或按摄像头调整（仅影响 jsmpeg 播放器，使用 go2rtc 时不生效）：

# 全局默认 live: height: 720 quality: 8 # 单摄像头覆盖 cameras: front_door: live: height: 480 quality: 4

UI 对应入口：Settings > Global configuration > Live playback（全局）或Settings > Camera configuration > Live playback（按摄像头）。

十、播放器错误信息与故障排查

当浏览器播放摄像头流遇到问题时，会在浏览器控制台输出简短错误消息。它们指示的是客户端/浏览器侧的播放、编码或网络问题，而非 Frigate 服务端问题：

10.1 常见 FAQ 速览

• Live view 没有音频？必须使用 go2rtc；确认摄像头发送 PCMA/PCMU 或 AAC 音频，否则用 go2rtc 转码。若 UI 中根本不显示音频控件，请确认 Live view 实际使用的是 go2rtc 流——流名与摄像头名不一致时需通过live -> streams映射，否则 UI 会回退到纯视频的 jsmpeg 播放器。低带宽模式播放器是纯视频流，即使配置了 go2rtc 也不会有声音。
• 仪表盘上取消静音却听不到声音？摄像头正在流式播放（右上角红点或持续流模式）时，浏览器可能因自动播放策略而阻止音频，直到你与页面交互，这是浏览器有意为之的限制。
• Live view 黑屏/不加载，但 debug view 正常？debug view 播放 Frigate 自己处理的detect流，而 Live view 直接播放 go2rtc 流。前者正常后者黑屏，通常是浏览器无法解码摄像头输出（多为 H.265 视频或不兼容的音频轨）。两个高频解法：① 用 go2rtc 的 FFmpeg 模块重新拉流，给源加ffmpeg:前缀（如- ffmpeg:rtsp://user:password@192.168.1.5:554/stream）；② 转码为兼容编码：- ffmpeg:rtsp://user:password@192.168.1.5:554/stream#video=h264#audio=aac#hardware。完整排查见 go2rtc 排障指南。
• 低带宽模式是什么意思？配置 go2rtc 后，Live view 优先尝试更清晰流畅的 MSE；初始超时、低带宽导致缓冲或解码错误时，会回退到detect角色流的 jsmpeg 格式，即「低带宽模式」。智能流模式下活动结束后会自动复位；持续流模式无自动复位，可用Reset强制重新加载。相关错误会记录到浏览器控制台（消息带摄像头名前缀），可用于判断是播放器（MSE vs WebRTC）问题还是摄像头配置问题。
• Live view 延迟/落后实时？起播延迟通常是 I 帧间隔问题——播放必须等到关键帧到来才能开始，间隔大于帧率会显著拖慢起播；按时序落后则是缓冲问题，通常是浏览器解码高分辨率流过载，可换低带宽子码流、减少并发流或改善网络。Frigate 的播放器在缓冲后会自动加速追平实时，停滞过久则回退低带宽模式。
• 为什么 Frigate 优先 MSE 而不是 WebRTC？MSE 是开放标准、所有现代浏览器原生支持、无需额外配置（WebRTC 需要端口转发与 candidate 配置，且部分浏览器不支持 H.265）、无需联网做 NAT 穿透；更重要的是 MSE 走 TCP，每帧按序到达并解码，不会静默丢帧，而 WebRTC 为低延迟在 UDP 上丢弃迟到/不完整帧，在蜂窝网络或信号不佳的 Wi-Fi 上可能产生画面冻结、花屏或缺帧。Frigate 的增强 MSE 播放器具备自适应变速播放，因此默认 MSE，仅在双向对讲等必要场景使用 WebRTC。
• Live view 出现奇怪的斜线但录像正常？通常是detect的宽高设置不正确（或自动检测错误），导致 jsmpeg 渲染引擎轻微变形。把 detect 分辨率放宽到标准宽高比（如 640x352 → 640x360、800x443 → 800x450、2688x1520 → 2688x1512）。仍无法解决再启用摄像头分组仪表盘的「兼容模式」，但兼容模式对多摄像头场景支持有限，仅建议在改配置无效时使用。
• 仪表盘上摄像头画面会切换宽高比？因为智能流在无活动时显示detect流静态图、有活动时切换为 go2rtc 实时流，两个流宽高比不一致就会「跳变」。解决办法是让detect流与 go2rtc 实时流宽高比一致（分辨率不必一致），例如实时流 1920x1080（16:9）时把 detect 设为 640x360 而非 640x352。record流同理：与detect宽高比不一致会导致录像画幅与 Live view 不同。

cameras: front_door: detect: width: 640 height: 360 # 设为 360 而不是 352 ffmpeg: inputs: - path: rtsp://127.0.0.1:8554/front_door # 主码流 1920x1080 roles: - record - path: rtsp://127.0.0.1:8554/front_door_sub # 子码流 640x352 roles: - detect

十一、总结与延伸阅读

Live View 是 Frigate 日常使用频率最高的界面：默认智能流在带宽与实时性之间取得平衡，jsmpeg/MSE/WebRTC 三种技术按场景自动切换；摄像头分组让不同位置、不同设备的观看偏好各得其所；右键菜单、单摄像头视图与管理员开关构成了完整的「看 - 控 - 录」闭环；而.runtime_state.json持久化机制保证了运行时开关状态跨重启稳定。

深入主题可继续阅读当前仓库中的以下文档与源码：

• Live View 配置文档（go2rtc、流选择、WebRTC、音频、jsmpeg 质量、摄像头状态）
• go2rtc 配置 与 Restream
• 前端选型逻辑 use-camera-live-mode.ts、模式定义 live.ts
• 单摄像头视图实现 LiveCameraView.tsx、仪表盘 LiveDashboardView.tsx、布局 DraggableGridLayout.tsx
• 播放器实现 LivePlayer.tsx、MsePlayer.tsx、JSMpegPlayer.tsx
• 运行时状态持久化 runtime_state.py 及测试 test_runtime_state.py、test_dispatcher_runtime_state.py

【免费下载链接】frigateNVR with realtime local object detection for IP cameras项目地址: https://gitcode.com/GitHub_Trending/fr/frigate