OPC/mediamtx
2
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

设计原生轻量 RTSP 管理页面原型 #2

New Issue
Closed
opened 2026-08-28 10:25:56 +08:00 by ila · 3 comments
ila commented 2026-08-28 10:25:56 +08:00
Owner
Copy Link
Copy Source

原始需求

  • 来源：Codex 对话
  • 提出时间：2026-08-28（Asia/Shanghai）
  • 用户关键原话：“之前讨论的 native html and simple and light 可视化页面的需求解决方案，建工单，先做原型让我审核。”

目标

为 MediaMTX 定制版设计一套可审核的原生、轻量管理页面原型，确认后续生产实现的页面结构、主要交互、状态、权限和错误处理。

本工单交付

  • 需求与技术解决方案基线。
  • 可访问、可识别版本的 Quant-UX 交互原型。
  • 原型覆盖说明和审核入口。
  • 原型验证结果。
  • 用户审核后记录确认意见；本工单不写生产代码。

非目标

  • 不修改 MediaMTX Go 产品代码。
  • 不调用真实 Control API，不连接真实摄像头。
  • 不提交或展示真实 RTSP URL、用户名、密码或 Token。
  • 不做录像、告警、转码、用户管理、完整全局配置或 VMS 功能。
  • 不在本工单导出或提交本地 HTML；用户明确要求“导出原型 #2”后另行执行。

需求方案

产品定位

单页运维工具，面向受控局域网管理员。页面由 MediaMTX 自身托管，生产实现使用原生 HTML/CSS/JavaScript，无 Node、前端框架、数据库或单独 Web 服务。

信息架构

  1. 顶栏：产品名、服务/API 状态、刷新、添加 RTSP 源。
  2. 概览：总路径、在线、离线、拉流中。
  3. 路径列表：名称、状态、源类型/脱敏地址、传输方式、读者数和操作。
  4. 添加/编辑抽屉或对话框：路径名、RTSP URL、传输方式、按需拉流。
  5. 预览对话框：优先 WebRTC，可切换 HLS，展示输出地址。
  6. 删除确认：显示路径名，明确影响和取消入口。
  7. 空、加载、权限失败、API 不可用、RTSP 离线状态。

后续技术边界

  • 管理页建议由 API HTTP 服务在 /admin/ 提供。
  • 配置 CRUD 使用当前 /v3/config/paths/*。
  • 运行状态使用 /v3/paths/list。
  • WebRTC/HLS 媒体直接连接 :8889 / :8888，不经过管理页面。
  • 管理路由与变更请求必须受 action: api 权限保护。

设计原则

  • 原生、清晰、内容优先、桌面管理台；适配 375 / 768 / 1280+ 宽度。
  • 一个主要操作：“添加 RTSP 源”。
  • 颜色不是唯一状态信号；状态同时有文本和形状。
  • 所有输入有可见标签、就地错误和恢复路径。
  • 键盘可操作、焦点清楚、触控目标至少 44px。
  • 删除必须二次确认；异步提交有加载、成功和失败反馈。
  • 不使用外部字体、图片、图表库或图标依赖；生产实现优先内联 SVG。

前置工单

  • #1 DevHarness 增量接入：尚待验收。
  • 允许并行：本工单只创建线上原型和设计证据，不修改 #1 文件，也不依赖 #1 关闭才能完成审核。正式生产实现必须在 #1 验收并关闭后另建工单。

风险

  • Control API 暴露可能导致未授权配置修改。
  • RTSP URL 可能包含凭据，列表必须脱敏，日志和原型不得保存真实值。
  • WebRTC/HLS 浏览器编码兼容性不同，预览必须有切换与明确错误信息。
  • 过度复制第三方 UI 会产生许可证和长期维护风险，本原型重新设计，不复制 seekwhencer 源码。

回退

删除本次 Quant-UX 草稿或标记版本废弃即可；不会触碰产品代码、配置或 Wiki 长期事实。删除原型需用户明确授权。

验收标准

  • 原型可访问且版本可识别。
  • 覆盖列表、添加、编辑、预览、删除确认。
  • 覆盖空、加载、API 不可用、权限失败和离线状态的表达方式。
  • 主要交互已连线并通过原型一致性验证。
  • 桌面主视图和窄屏响应式方案清楚。
  • 未使用真实敏感数据。
  • 用户明确审核并记录确认范围或修改意见。

设计证据

  • 状态：待制作。
  • 工具：Quant-UX。
  • 审核版本、链接、确认人、时间和覆盖范围将在原型完成后追加。

文档影响

审核通过后，长期需求和已确认架构才更新 Wiki；原型草稿和单次审核证据保留在本工单，不直接编辑 Wiki 镜像。

## 原始需求 - 来源：Codex 对话 - 提出时间：2026-08-28（Asia/Shanghai） - 用户关键原话：“之前讨论的 native html and simple and light 可视化页面的需求解决方案，建工单，先做原型让我审核。” ## 目标 为 MediaMTX 定制版设计一套可审核的原生、轻量管理页面原型，确认后续生产实现的页面结构、主要交互、状态、权限和错误处理。 ## 本工单交付 - 需求与技术解决方案基线。 - 可访问、可识别版本的 Quant-UX 交互原型。 - 原型覆盖说明和审核入口。 - 原型验证结果。 - 用户审核后记录确认意见；本工单不写生产代码。 ## 非目标 - 不修改 MediaMTX Go 产品代码。 - 不调用真实 Control API，不连接真实摄像头。 - 不提交或展示真实 RTSP URL、用户名、密码或 Token。 - 不做录像、告警、转码、用户管理、完整全局配置或 VMS 功能。 - 不在本工单导出或提交本地 HTML；用户明确要求“导出原型 #2”后另行执行。 ## 需求方案 ### 产品定位 单页运维工具，面向受控局域网管理员。页面由 MediaMTX 自身托管，生产实现使用原生 HTML/CSS/JavaScript，无 Node、前端框架、数据库或单独 Web 服务。 ### 信息架构 1. 顶栏：产品名、服务/API 状态、刷新、添加 RTSP 源。 2. 概览：总路径、在线、离线、拉流中。 3. 路径列表：名称、状态、源类型/脱敏地址、传输方式、读者数和操作。 4. 添加/编辑抽屉或对话框：路径名、RTSP URL、传输方式、按需拉流。 5. 预览对话框：优先 WebRTC，可切换 HLS，展示输出地址。 6. 删除确认：显示路径名，明确影响和取消入口。 7. 空、加载、权限失败、API 不可用、RTSP 离线状态。 ### 后续技术边界 - 管理页建议由 API HTTP 服务在 `/admin/` 提供。 - 配置 CRUD 使用当前 `/v3/config/paths/*`。 - 运行状态使用 `/v3/paths/list`。 - WebRTC/HLS 媒体直接连接 `:8889` / `:8888`，不经过管理页面。 - 管理路由与变更请求必须受 `action: api` 权限保护。 ## 设计原则 - 原生、清晰、内容优先、桌面管理台；适配 375 / 768 / 1280+ 宽度。 - 一个主要操作：“添加 RTSP 源”。 - 颜色不是唯一状态信号；状态同时有文本和形状。 - 所有输入有可见标签、就地错误和恢复路径。 - 键盘可操作、焦点清楚、触控目标至少 44px。 - 删除必须二次确认；异步提交有加载、成功和失败反馈。 - 不使用外部字体、图片、图表库或图标依赖；生产实现优先内联 SVG。 ## 前置工单 - #1 DevHarness 增量接入：尚待验收。 - 允许并行：本工单只创建线上原型和设计证据，不修改 #1 文件，也不依赖 #1 关闭才能完成审核。正式生产实现必须在 #1 验收并关闭后另建工单。 ## 风险 - Control API 暴露可能导致未授权配置修改。 - RTSP URL 可能包含凭据，列表必须脱敏，日志和原型不得保存真实值。 - WebRTC/HLS 浏览器编码兼容性不同，预览必须有切换与明确错误信息。 - 过度复制第三方 UI 会产生许可证和长期维护风险，本原型重新设计，不复制 seekwhencer 源码。 ## 回退 删除本次 Quant-UX 草稿或标记版本废弃即可；不会触碰产品代码、配置或 Wiki 长期事实。删除原型需用户明确授权。 ## 验收标准 - [ ] 原型可访问且版本可识别。 - [ ] 覆盖列表、添加、编辑、预览、删除确认。 - [ ] 覆盖空、加载、API 不可用、权限失败和离线状态的表达方式。 - [ ] 主要交互已连线并通过原型一致性验证。 - [ ] 桌面主视图和窄屏响应式方案清楚。 - [ ] 未使用真实敏感数据。 - [ ] 用户明确审核并记录确认范围或修改意见。 ## 设计证据 - 状态：待制作。 - 工具：Quant-UX。 - 审核版本、链接、确认人、时间和覆盖范围将在原型完成后追加。 ## 文档影响 审核通过后，长期需求和已确认架构才更新 Wiki；原型草稿和单次审核证据保留在本工单，不直接编辑 Wiki 镜像。
ila commented 2026-08-28 10:31:12 +08:00
Author
Owner
Copy Link
Copy Source

原型 V1 已提交，待用户审核

  • Quant-UX 应用：MediaMTX Stream Console · 原型 V1
  • App ID：6a90f1d7191a826306a7f403
  • 起始画布：流列表 · 桌面
  • 当前状态：私有在线原型；未导出本地 HTML；未修改 MediaMTX 产品代码

覆盖范围

共 9 个画布、176 个组件、29 条交互连线：

  1. 桌面路径列表与状态统计
  2. 添加 RTSP 源
  3. 编辑 RTSP 源
  4. WebRTC 预览
  5. HLS 预览及协议切换
  6. 删除确认
  7. 空状态与加载状态
  8. API 不可达与 HTTP 403 权限错误
  9. 手机端卡片列表

主要入口已经连通：添加、编辑、预览、删除、异常示例、返回列表、WebRTC/HLS 切换；错误状态均有明确恢复动作。

设计基线

  • 原生 HTML/CSS/JS 可实现的轻量单页结构
  • 中性蓝灰配色和紧凑运维界面
  • 字段标签常驻、密码遮盖、状态不只依赖颜色
  • 错误信息靠近问题并提供恢复路径
  • 键盘焦点与最小 44px 操作目标纳入后续实现
  • 手机端改用卡片，避免表格横向溢出
  • 所有地址均为保留测试网段 192.0.2.x，没有真实凭据

自动校验

Quant-UX consistency verification：PASS

  • screens: 9
  • widgets: 176
  • flows: 29
  • runtime errors: 0
  • layer/navigation/input/toggle checks: passed
  • unsupported widget types: 0

审核建议

请重点确认：

  • 首页信息密度是否合适
  • 添加/编辑字段是否够用
  • 预览默认采用 WebRTC、HLS 作为回退是否符合预期
  • 删除确认和异常恢复是否清楚
  • 手机端是否需要保留编辑/删除入口

本工单保持开启，等待用户审核。通过后另建生产实现工单；在此之前不落地产品代码。

## 原型 V1 已提交，待用户审核 - Quant-UX 应用：`MediaMTX Stream Console · 原型 V1` - App ID：`6a90f1d7191a826306a7f403` - 起始画布：`流列表 · 桌面` - 当前状态：私有在线原型；未导出本地 HTML；未修改 MediaMTX 产品代码 ### 覆盖范围 共 9 个画布、176 个组件、29 条交互连线： 1. 桌面路径列表与状态统计 2. 添加 RTSP 源 3. 编辑 RTSP 源 4. WebRTC 预览 5. HLS 预览及协议切换 6. 删除确认 7. 空状态与加载状态 8. API 不可达与 HTTP 403 权限错误 9. 手机端卡片列表 主要入口已经连通：添加、编辑、预览、删除、异常示例、返回列表、WebRTC/HLS 切换；错误状态均有明确恢复动作。 ### 设计基线 - 原生 HTML/CSS/JS 可实现的轻量单页结构 - 中性蓝灰配色和紧凑运维界面 - 字段标签常驻、密码遮盖、状态不只依赖颜色 - 错误信息靠近问题并提供恢复路径 - 键盘焦点与最小 44px 操作目标纳入后续实现 - 手机端改用卡片，避免表格横向溢出 - 所有地址均为保留测试网段 `192.0.2.x`，没有真实凭据 ### 自动校验 Quant-UX consistency verification：**PASS** - screens: 9 - widgets: 176 - flows: 29 - runtime errors: 0 - layer/navigation/input/toggle checks: passed - unsupported widget types: 0 ### 审核建议 请重点确认： - 首页信息密度是否合适 - 添加/编辑字段是否够用 - 预览默认采用 WebRTC、HLS 作为回退是否符合预期 - 删除确认和异常恢复是否清楚 - 手机端是否需要保留编辑/删除入口 本工单保持开启，等待用户审核。通过后另建生产实现工单；在此之前不落地产品代码。
ila commented 2026-08-28 10:34:28 +08:00
Author
Owner
Copy Link
Copy Source

补充线上审核入口

该链接对应本工单当前待审核的 V1 版本。

## 补充线上审核入口 - 正式入口：[MediaMTX Stream Console · 原型 V1](https://qux.ilapage.cn/#/apps/6a90f1d7191a826306a7f403.html) - QuantUX App ID：`6a90f1d7191a826306a7f403` - 访问边界：私有应用，需要使用已有 QuantUX 账号登录。 该链接对应本工单当前待审核的 V1 版本。
ila commented 2026-08-28 10:41:37 +08:00
Author
Owner
Copy Link
Copy Source

原型验收结论

  • 验收人：用户
  • 验收时间：2026-08-28（Asia/Shanghai）
  • 结论：用户明确确认“原型通过审核”。
  • 审核版本：MediaMTX Stream Console · 原型 V1
  • Quant-UX App ID：6a90f1d7191a826306a7f403
  • 在线入口：https://qux.ilapage.cn/#/apps/6a90f1d7191a826306a7f403.html
  • 确认范围：桌面路径列表、添加、编辑、WebRTC/HLS 预览、删除确认、空/加载、API 不可达、HTTP 403 权限错误、手机端卡片布局。
  • 校验基线：9 个画布、176 个组件、29 条交互连线，Quant-UX PASS。

长期记录

  • Product-Requirements-Overview Wiki revision：25cac76e23ecd34307cf19aa7bbbd80ad671d2f3
  • 本地只读镜像提交：1502281e，已推送至 origin/main

设计工单验收完成。后续生产实现另建单元工单，并受 #1 DevHarness 接入验收状态约束；关键交互变更需重新确认原型。

## 原型验收结论 - 验收人：用户 - 验收时间：2026-08-28（Asia/Shanghai） - 结论：用户明确确认“原型通过审核”。 - 审核版本：`MediaMTX Stream Console · 原型 V1` - Quant-UX App ID：`6a90f1d7191a826306a7f403` - 在线入口：https://qux.ilapage.cn/#/apps/6a90f1d7191a826306a7f403.html - 确认范围：桌面路径列表、添加、编辑、WebRTC/HLS 预览、删除确认、空/加载、API 不可达、HTTP 403 权限错误、手机端卡片布局。 - 校验基线：9 个画布、176 个组件、29 条交互连线，Quant-UX `PASS`。 ### 长期记录 - Product-Requirements-Overview Wiki revision：`25cac76e23ecd34307cf19aa7bbbd80ad671d2f3` - 本地只读镜像提交：`1502281e`，已推送至 `origin/main` 设计工单验收完成。后续生产实现另建单元工单，并受 #1 DevHarness 接入验收状态约束；关键交互变更需重新确认原型。
ila closed this issue 2026-08-28 10:41:37 +08:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
admin ila
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: OPC/mediamtx#2