尧图网站建设 
Frigate History 视图完全指南全分辨率录像回放、时间轴同步、追踪细节检视与导出分享【免费下载链接】frigateNVR with realtime local object detection for IP cameras项目地址: https://gitcode.com/GitHub_Trending/fr/frigateHistory 是 Frigate 的全分辨率录像查看器与 Live、Review、Explore 不同它没有独立的菜单入口而是从其他视图跳转进入用于回放历史录像、拖动时间轴、切换摄像头、检视被追踪对象Tracked Object的完整生命周期并导出或分享任意时刻的录像片段。本文将以 Frigate 仓库中的 History 使用文档 为主体结合 前端实现源码 深度展开帮助你完整掌握 History 视图的打开方式、时间轴交互、Detail 检视器、Actions 菜单与 AI 摘要等全部能力。本文介绍的是 History 视图的使用方法关于录像的配置保留策略、pre/post 捕获等请参阅 Recording 配置文档。什么是 History 视图History 是 Frigate 提供的全分辨率录像查看器。与 Review事件摘要视图、Explore对象检索视图不同History 直接面向原始录像本身Review将时间上重叠、相邻的活动聚合为审查条目review items用于快速扫描发生了什么Explore用于事后检索某个具体的被追踪对象按标签、时间、区域、描述History则让你以全分辨率、逐帧地回放某台摄像机的录像适合仔细查看事件前后细节、跟踪对象移动过程、截取精确片段用于导出。从实现上看History 视图对应前端仓库中的 RecordingView.tsx 组件其核心播放器为DynamicVideoPlayer它在桌面上以主播放器 侧边面板 次要预览行的布局呈现在移动端则以抽屉Drawer形式组织。打开 History 视图History 没有主菜单入口必须从其他视图进入主要有三种方式入口行为从 Review 进入点击一个审查条目review item会打开该条目的录像并定位到该摄像机上活动开始前的位置从 Live 进入在单摄像头视图点击History按钮打开该摄像头约 30 秒前的录像从分享链接进入打开别人分享的时间戳链接见下文 Actions 菜单 中的Share Timestamp直接跳到指定摄像头与时刻进入 History 后顶栏提供两个导航按钮Back返回返回进入 History 之前的视图。实现上如果是从分享链接直达无历史可回退则跳转到首页见 RecordingView.tsx 中handleBack对recording?.navigationSource shared-link的处理Live直播跳转到当前摄像头主摄像头的实时画面对应代码中的navigate(/#${mainCamera})。:::tip 提示遇到 No recordings found for this time该时间没有录像 最常见的原因有三种该事件发生时对应摄像头未启用录像录像保留期已过相应分段已被清除或存储空间不足Frigate 提前删除了这些分段以释放空间。请检查 Recording 配置 中的保留策略设置。 :::时间轴、事件与 Detail侧边面板的三种模式History 主播放器旁有一个可切换的侧边面板移动端为抽屉通过切换开关可在三种模式间切换。在 RecordingView.tsx 中对应timelineType状态timeline | events | detail类型定义见 types/timeline.ts 的TimelineTypeTimeline时间轴模式展示所选摄像机的可拖动垂直时间轴时间轴中央的水平线表示运动motion线条越长代表该时刻运动越多审查条目以着色区域标出红色表示警报alert橙色表示检测detection无着色背景的空白段表示该时段没有录像代码中通过recordings/unavailable接口拉取无录像区间noRecordingRanges并渲染为间隔。在实现中时间轴由 MotionReviewTimeline.tsx 组件渲染运动数据来自review/activity/motion接口按segmentDuration缩放比例请求审查条目数据来自mainCameraReviewItems。Events事件模式以可滚动列表展示所选时间范围内该摄像机的审查条目点击某个条目会将播放器定位到该条目代码中点击后执行manuallySetCurrentTime(review.start_time - REVIEW_PADDING, true)即在条目开始时间前加一段REVIEW_PADDING缓冲再开始播放该模式下会过滤掉纯运动significant_motion条目。Detail检视模式将侧边面板变为追踪细节检视器详见下文 Detail 视图。:::note 当你在选择导出范围时侧边面板会临时切换回 Timeline 模式代码中exportRange ! undefined debugReplayRange ! undefined ? timelineType : timeline以便用时间轴手柄选择导出区间。 :::拖动时间轴与预览时间轴拖动与缩放拖动时间轴上的手柄handlebar即可在时间中移动主播放器与所有次要摄像头预览会同步拖动保证一切保持同步。这在实现上表现为scrubbing状态下同时调用mainControllerRef.current?.scrubToTimestamp(currentTime)以及遍历previewRefs逐个调用controller.scrubToTimestamp(currentTime)见 RecordingView.tsx。时间轴提供缩放按钮可在三档缩放级别间切换从粗粒度到细粒度分段缩放级别分段时长 segmentDuration时间戳间距 timestampSpread0最粗30 秒15 秒1中等15 秒5 秒2最细5 秒1 秒无录像的时段在时间轴上显示为间隔gaps。次要预览桌面端在桌面上当有多个摄像头可用时主播放器下方/侧方会出现一行次要预览展示同一时刻其他摄像头的画面点击某个预览该摄像头即成为主摄像头并定位到当前时间戳从而可以跨摄像头追踪活动而不丢失进度实现上为onSelectCamera将mainCamera切换为新摄像头并保持currentTime次要预览使用IntersectionObserver懒加载只加载可见的预览并通过PreviewPlayer渲染移动端则使用摄像头抽屉MobileCameraDrawer来切换摄像头。过滤与日历History 支持按摄像头和日期过滤过滤控件与 Review 中的行为一致ReviewFilterGroup参数filters{[cameras, date, general]}日期下划线某天日期下有下划线表示当天存在录像来自recordings/summary接口的RecordingsSummary彩色圆点红色圆点表示当天有未审阅的警报橙色圆点表示有未审阅的检测。Detail 视图追踪细节检视器Detail模式将侧边面板转变为追踪细节检视器对应前端组件 DetailStream.tsx审查条目卡片每个审查条目对应一张卡片展示严重程度severity通过圆点颜色区分红色 alert / 橙色 detection见ReviewGroup中的review.severity判断开始时间涉及的对象标签最多显示 5 个图标iconLabels.slice(0, 5)被追踪对象的数量trackedObject计数来自review.data.detections?.length或review.data?.objects?.length时长getDurationFromTimestamps(review.start_time, review.end_time)。当前播放位置对应的活动卡片会高亮isActive时为shadow-selected outline-selected点击卡片会定位到该条目。展开查看对象生命周期展开一张卡片可以看到每个被追踪对象的生命周期lifecycle——每一行代表一个关键时刻检测到、进入区域、变为活动、变为静止、离开等。这些时刻来自TrackingDetailsSequence类型见 types/timeline.ts并带有随播放位置前进的进度线。悬停某一行显示该时刻的 score置信度、ratio宽高比与 area面积含像素数与百分比见LifecycleItem中 Tooltip 的实现点击某一行将视频定位到该精确时间戳onSeek(item.timestamp annotationOffset / 1000, false)即检测时间加上注释偏移量换算为录像时间。Detail View 设置面板底部是Detail View SettingsDetail 视图设置包含两个选项始终自动展开活动条目Always Expand Active开关控制当前活动条目中的对象是否自动展开useUserPersistence(detailStreamActiveExpanded, true)默认开启注释偏移量Annotation Offset一个用于微调的时间校正值用于在摄像头快照与录像时间戳发生漂移时让边界框bounding-box叠加层与录像画面精确对齐。对应组件为 AnnotationOffsetSlider.tsx。:::tip 注释偏移量的取值范围 从前端常量 const.ts 可以看到最小值ANNOTATION_OFFSET_MIN -10000-10 秒最大值ANNOTATION_OFFSET_MAX 1000010 秒步长ANNOTATION_OFFSET_STEP 5050 毫秒。偏移量的符号含义检测时间戳与录像时间戳之间相差的毫秒数正数表示录像时间晚于检测时间。拖动滑块80ms 节流会即时生效reset可归零。管理员可以点击Save将偏移量保存到摄像头配置底层通过PUT config/set?cameras.${camera}.detect.annotation_offset${annotationOffset}requires_restart: 0写入配置无需重启。该配置项在 config-form 的 detect 配置段 中标记为signed允许负值且属于高级字段。 :::Actions 菜单操作菜单在桌面上Actions 菜单胶片图标对应 ActionsDropdown集中了针对当前录像片段的操作操作说明Export导出将所选时间范围的片段保存为导出export导出内容不会被保留策略删除。对话框默认预选最近一小时代码中now.setHours(now.getHours() - 1)将after设为before前一小时可调整范围或拖动时间轴手柄后再导出。导出文件的下载与管理见 Exports 使用文档Share Timestamp分享时间戳生成指向当前时刻或自定义时间戳的链接供其他 Frigate 用户打开。这是内部链接并非公开分享 URL。实现上通过createRecordingReviewUrl生成带camera与timestamp参数的 URL 并复制到剪贴板见 ShareTimestampDialog.tsx。值得注意的是通过该链接进入 History 时navigationSource被标记为shared-link点击 Back 会直接回到首页Motion Search运动搜索扫描该摄像机的录像在你绘制的区域内查找变化。与 Review 中的运动搜索 为同一工具onMotionSearch(mainCamera)跳转到运动搜索视图Debug Replay调试回放仅管理员将录像范围重新送入 Frigate 的检测流水线回放观察它会被如何处理。对应 DebugReplayDialog代码中只有isAdmin时才提供入口此外你还可以捕捉当前帧的即时快照instant snapshot将某一帧提交给 Frigate仅管理员用于改进模型对应 FrigatePlusDialog。AI 审查摘要当配置了 生成式 AI 审查Generative AI review 时Frigate 可以为审查条目生成标题、描述与威胁分类并在你拖动 History 时间轴时呈现出来。带有 AI 摘要的审查条目会在以下位置显示摘要信息视频上方当该条目出现在画面中时播放器上方弹出摘要对应GenAISummaryChip桌面端在播放器区域渲染移动端在时间轴顶部渲染Events 侧边面板带摘要的条目在缩略图下方显示标题Detail 侧边面板条目卡片在追踪细节旁显示标题见 DetailStream.tsx 中review.data.metadata?.title的渲染带MdAutoAwesome图标。点击以上任意位置的摘要会打开AI AnalysisAI 分析对话框展示生成的详细信息与该条目被标记的任何关注点GenAISummaryDialog。从实现上看只有当config?.cameras?.[mainCamera].review.genai?.enabled_in_config为真时activeReviewItem当前时间点处于其时间范围内的审查条目判断带REVIEW_PADDING缓冲才会被计算并显示摘要见 RecordingView.tsx。小结与最佳实践History 用于看录像当需要以全分辨率回放、逐帧核对事件细节、跨摄像头追踪同一时刻活动时使用 History快速浏览发生了什么优先使用 Review事后检索具体对象则使用 Explore。时间轴是核心交互拖动手柄实现主播放器与预览同步三档缩放配合运动线条、审查条目色块与无录像间隔可以快速定位目标时刻。Detail 检视器是深度工具展开条目查看对象生命周期score / ratio / area配合注释偏移量校准边界框对齐管理员可将校准值保存到摄像头配置detect.annotation_offset。导出与分享用 Export 保护重要片段免遭保留策略删除用 Share Timestamp 生成内部时间戳链接管理员还可使用 Debug Replay 验证检测流水线处理结果。如需深入了解底层原理可继续阅读History 视图主组件 RecordingView.tsx、追踪细节检视器 DetailStream.tsx、运动时间轴 MotionReviewTimeline.tsx以及录像保留配置 record.md。【免费下载链接】frigateNVR with realtime local object detection for IP cameras项目地址: https://gitcode.com/GitHub_Trending/fr/frigate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Frigate History 视图完全指南：全分辨率录像回放、时间轴同步、追踪细节检视与导出分享
Frigate History 视图完全指南全分辨率录像回放、时间轴同步、追踪细节检视与导出分享【免费下载链接】frigateNVR with realtime local object detection for IP cameras项目地址: https://gitcode.com/GitHub_Trending/fr/frigateHistory 是 Frigate 的全分辨率录像查看器与 Live、Review、Explore 不同它没有独立的菜单入口而是从其他视图跳转进入用于回放历史录像、拖动时间轴、切换摄像头、检视被追踪对象Tracked Object的完整生命周期并导出或分享任意时刻的录像片段。本文将以 Frigate 仓库中的 History 使用文档 为主体结合 前端实现源码 深度展开帮助你完整掌握 History 视图的打开方式、时间轴交互、Detail 检视器、Actions 菜单与 AI 摘要等全部能力。本文介绍的是 History 视图的使用方法关于录像的配置保留策略、pre/post 捕获等请参阅 Recording 配置文档。什么是 History 视图History 是 Frigate 提供的全分辨率录像查看器。与 Review事件摘要视图、Explore对象检索视图不同History 直接面向原始录像本身Review将时间上重叠、相邻的活动聚合为审查条目review items用于快速扫描发生了什么Explore用于事后检索某个具体的被追踪对象按标签、时间、区域、描述History则让你以全分辨率、逐帧地回放某台摄像机的录像适合仔细查看事件前后细节、跟踪对象移动过程、截取精确片段用于导出。从实现上看History 视图对应前端仓库中的 RecordingView.tsx 组件其核心播放器为DynamicVideoPlayer它在桌面上以主播放器 侧边面板 次要预览行的布局呈现在移动端则以抽屉Drawer形式组织。打开 History 视图History 没有主菜单入口必须从其他视图进入主要有三种方式入口行为从 Review 进入点击一个审查条目review item会打开该条目的录像并定位到该摄像机上活动开始前的位置从 Live 进入在单摄像头视图点击History按钮打开该摄像头约 30 秒前的录像从分享链接进入打开别人分享的时间戳链接见下文 Actions 菜单 中的Share Timestamp直接跳到指定摄像头与时刻进入 History 后顶栏提供两个导航按钮Back返回返回进入 History 之前的视图。实现上如果是从分享链接直达无历史可回退则跳转到首页见 RecordingView.tsx 中handleBack对recording?.navigationSource shared-link的处理Live直播跳转到当前摄像头主摄像头的实时画面对应代码中的navigate(/#${mainCamera})。:::tip 提示遇到 No recordings found for this time该时间没有录像 最常见的原因有三种该事件发生时对应摄像头未启用录像录像保留期已过相应分段已被清除或存储空间不足Frigate 提前删除了这些分段以释放空间。请检查 Recording 配置 中的保留策略设置。 :::时间轴、事件与 Detail侧边面板的三种模式History 主播放器旁有一个可切换的侧边面板移动端为抽屉通过切换开关可在三种模式间切换。在 RecordingView.tsx 中对应timelineType状态timeline | events | detail类型定义见 types/timeline.ts 的TimelineTypeTimeline时间轴模式展示所选摄像机的可拖动垂直时间轴时间轴中央的水平线表示运动motion线条越长代表该时刻运动越多审查条目以着色区域标出红色表示警报alert橙色表示检测detection无着色背景的空白段表示该时段没有录像代码中通过recordings/unavailable接口拉取无录像区间noRecordingRanges并渲染为间隔。在实现中时间轴由 MotionReviewTimeline.tsx 组件渲染运动数据来自review/activity/motion接口按segmentDuration缩放比例请求审查条目数据来自mainCameraReviewItems。Events事件模式以可滚动列表展示所选时间范围内该摄像机的审查条目点击某个条目会将播放器定位到该条目代码中点击后执行manuallySetCurrentTime(review.start_time - REVIEW_PADDING, true)即在条目开始时间前加一段REVIEW_PADDING缓冲再开始播放该模式下会过滤掉纯运动significant_motion条目。Detail检视模式将侧边面板变为追踪细节检视器详见下文 Detail 视图。:::note 当你在选择导出范围时侧边面板会临时切换回 Timeline 模式代码中exportRange ! undefined debugReplayRange ! undefined ? timelineType : timeline以便用时间轴手柄选择导出区间。 :::拖动时间轴与预览时间轴拖动与缩放拖动时间轴上的手柄handlebar即可在时间中移动主播放器与所有次要摄像头预览会同步拖动保证一切保持同步。这在实现上表现为scrubbing状态下同时调用mainControllerRef.current?.scrubToTimestamp(currentTime)以及遍历previewRefs逐个调用controller.scrubToTimestamp(currentTime)见 RecordingView.tsx。时间轴提供缩放按钮可在三档缩放级别间切换从粗粒度到细粒度分段缩放级别分段时长 segmentDuration时间戳间距 timestampSpread0最粗30 秒15 秒1中等15 秒5 秒2最细5 秒1 秒无录像的时段在时间轴上显示为间隔gaps。次要预览桌面端在桌面上当有多个摄像头可用时主播放器下方/侧方会出现一行次要预览展示同一时刻其他摄像头的画面点击某个预览该摄像头即成为主摄像头并定位到当前时间戳从而可以跨摄像头追踪活动而不丢失进度实现上为onSelectCamera将mainCamera切换为新摄像头并保持currentTime次要预览使用IntersectionObserver懒加载只加载可见的预览并通过PreviewPlayer渲染移动端则使用摄像头抽屉MobileCameraDrawer来切换摄像头。过滤与日历History 支持按摄像头和日期过滤过滤控件与 Review 中的行为一致ReviewFilterGroup参数filters{[cameras, date, general]}日期下划线某天日期下有下划线表示当天存在录像来自recordings/summary接口的RecordingsSummary彩色圆点红色圆点表示当天有未审阅的警报橙色圆点表示有未审阅的检测。Detail 视图追踪细节检视器Detail模式将侧边面板转变为追踪细节检视器对应前端组件 DetailStream.tsx审查条目卡片每个审查条目对应一张卡片展示严重程度severity通过圆点颜色区分红色 alert / 橙色 detection见ReviewGroup中的review.severity判断开始时间涉及的对象标签最多显示 5 个图标iconLabels.slice(0, 5)被追踪对象的数量trackedObject计数来自review.data.detections?.length或review.data?.objects?.length时长getDurationFromTimestamps(review.start_time, review.end_time)。当前播放位置对应的活动卡片会高亮isActive时为shadow-selected outline-selected点击卡片会定位到该条目。展开查看对象生命周期展开一张卡片可以看到每个被追踪对象的生命周期lifecycle——每一行代表一个关键时刻检测到、进入区域、变为活动、变为静止、离开等。这些时刻来自TrackingDetailsSequence类型见 types/timeline.ts并带有随播放位置前进的进度线。悬停某一行显示该时刻的 score置信度、ratio宽高比与 area面积含像素数与百分比见LifecycleItem中 Tooltip 的实现点击某一行将视频定位到该精确时间戳onSeek(item.timestamp annotationOffset / 1000, false)即检测时间加上注释偏移量换算为录像时间。Detail View 设置面板底部是Detail View SettingsDetail 视图设置包含两个选项始终自动展开活动条目Always Expand Active开关控制当前活动条目中的对象是否自动展开useUserPersistence(detailStreamActiveExpanded, true)默认开启注释偏移量Annotation Offset一个用于微调的时间校正值用于在摄像头快照与录像时间戳发生漂移时让边界框bounding-box叠加层与录像画面精确对齐。对应组件为 AnnotationOffsetSlider.tsx。:::tip 注释偏移量的取值范围 从前端常量 const.ts 可以看到最小值ANNOTATION_OFFSET_MIN -10000-10 秒最大值ANNOTATION_OFFSET_MAX 1000010 秒步长ANNOTATION_OFFSET_STEP 5050 毫秒。偏移量的符号含义检测时间戳与录像时间戳之间相差的毫秒数正数表示录像时间晚于检测时间。拖动滑块80ms 节流会即时生效reset可归零。管理员可以点击Save将偏移量保存到摄像头配置底层通过PUT config/set?cameras.${camera}.detect.annotation_offset${annotationOffset}requires_restart: 0写入配置无需重启。该配置项在 config-form 的 detect 配置段 中标记为signed允许负值且属于高级字段。 :::Actions 菜单操作菜单在桌面上Actions 菜单胶片图标对应 ActionsDropdown集中了针对当前录像片段的操作操作说明Export导出将所选时间范围的片段保存为导出export导出内容不会被保留策略删除。对话框默认预选最近一小时代码中now.setHours(now.getHours() - 1)将after设为before前一小时可调整范围或拖动时间轴手柄后再导出。导出文件的下载与管理见 Exports 使用文档Share Timestamp分享时间戳生成指向当前时刻或自定义时间戳的链接供其他 Frigate 用户打开。这是内部链接并非公开分享 URL。实现上通过createRecordingReviewUrl生成带camera与timestamp参数的 URL 并复制到剪贴板见 ShareTimestampDialog.tsx。值得注意的是通过该链接进入 History 时navigationSource被标记为shared-link点击 Back 会直接回到首页Motion Search运动搜索扫描该摄像机的录像在你绘制的区域内查找变化。与 Review 中的运动搜索 为同一工具onMotionSearch(mainCamera)跳转到运动搜索视图Debug Replay调试回放仅管理员将录像范围重新送入 Frigate 的检测流水线回放观察它会被如何处理。对应 DebugReplayDialog代码中只有isAdmin时才提供入口此外你还可以捕捉当前帧的即时快照instant snapshot将某一帧提交给 Frigate仅管理员用于改进模型对应 FrigatePlusDialog。AI 审查摘要当配置了 生成式 AI 审查Generative AI review 时Frigate 可以为审查条目生成标题、描述与威胁分类并在你拖动 History 时间轴时呈现出来。带有 AI 摘要的审查条目会在以下位置显示摘要信息视频上方当该条目出现在画面中时播放器上方弹出摘要对应GenAISummaryChip桌面端在播放器区域渲染移动端在时间轴顶部渲染Events 侧边面板带摘要的条目在缩略图下方显示标题Detail 侧边面板条目卡片在追踪细节旁显示标题见 DetailStream.tsx 中review.data.metadata?.title的渲染带MdAutoAwesome图标。点击以上任意位置的摘要会打开AI AnalysisAI 分析对话框展示生成的详细信息与该条目被标记的任何关注点GenAISummaryDialog。从实现上看只有当config?.cameras?.[mainCamera].review.genai?.enabled_in_config为真时activeReviewItem当前时间点处于其时间范围内的审查条目判断带REVIEW_PADDING缓冲才会被计算并显示摘要见 RecordingView.tsx。小结与最佳实践History 用于看录像当需要以全分辨率回放、逐帧核对事件细节、跨摄像头追踪同一时刻活动时使用 History快速浏览发生了什么优先使用 Review事后检索具体对象则使用 Explore。时间轴是核心交互拖动手柄实现主播放器与预览同步三档缩放配合运动线条、审查条目色块与无录像间隔可以快速定位目标时刻。Detail 检视器是深度工具展开条目查看对象生命周期score / ratio / area配合注释偏移量校准边界框对齐管理员可将校准值保存到摄像头配置detect.annotation_offset。导出与分享用 Export 保护重要片段免遭保留策略删除用 Share Timestamp 生成内部时间戳链接管理员还可使用 Debug Replay 验证检测流水线处理结果。如需深入了解底层原理可继续阅读History 视图主组件 RecordingView.tsx、追踪细节检视器 DetailStream.tsx、运动时间轴 MotionReviewTimeline.tsx以及录像保留配置 record.md。【免费下载链接】frigateNVR with realtime local object detection for IP cameras项目地址: https://gitcode.com/GitHub_Trending/fr/frigate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考