核心场景：通过网页浏览器实时查看 BM1688 开发板的 AI 推理效果（包括摄像头画面与检测框叠加），实现免登录即开即用的工业级可视化方案

---

🔍 一、项目目标

实现平板浏览器与 BM1688 的无缝交互体验：

1. 硬件层
   • 平板连接 BM1688 WiFi 热点（10.42.0.1）
2. 应用层
   • 浏览器访问 http://板子IP:9000
   • 实时显示三大要素：
     • 摄像头画面（待实现）
     • AI 目标检测框叠加
     • 系统指标（CPU/NPU 使用率、温度、帧率）

---

⚙️ 二、需求全景图

关键维度	要求
前端可视化	浏览器免登录访问，移动端友好
数据来源	BM1688 NPU 推理结果 + ROS 扩展（点云/IMU）
数据格式	Protobuf + MCAP 容器（兼容 ROS2）
数据传输	WebSocket 长连接通信
开源要求	Apache 2.0 协议，持续维护
跨平台	可迁移至 Jetson/RK3588/树莓派

---

🧩 三、框架选型生死局

方案	协议	免登陆	体积	致命问题
✅ Lichtblick	Apache 2.0	支持	~3MB	BMW 官方维护
❌ Foxglove Studio	BUSL-1.1	需账户	~5MB	商业协议限制
❌ Frigate	MIT	支持	~5MB	专注 NVR 场景
❌ 自研 Canvas	自定义	支持	~200KB	开发成本过高

敲黑板：Lichtblick 作为 Foxglove 的 Apache 2.0 开源分支，完美保留核心功能的同时避开商业协议限制

---

🌐 四、数据流架构（全链路解析）

flowchart LR
    subgraph BM1688
        NPU[NPU推理 C++]-->Node[Node.js server.js]
    end
    subgraph 平板浏览器
        Browser[Lichtblick]-->WS[WebSocket]
    end
    Node-.->|HTTP 9000\n静态文件|Browser
    Node==>|WS 8765\n/detections\n/metrics|Browser

协议栈详解：

1. 物理层：WiFi 热点 10.42.0.1
2. 传输层：WebSocket 端口 8765
3. 应用层：
   • foxglove.CompressedImage：后续图像传输
   • JSON encoding：当前 mock 数据格式
   • Protobuf（预留）：体积减少 48%

---

🔧 五、开发实操手册

环境：BM1688 ARM64 / Node.js v18.20 / 内存可用 538MB

5.1 技术栈组合拳

"dependencies": {
   "@foxglove/ws-protocol": "^0.8.0",
   "express": "^4.21.0",
   "protobufjs": "^7.4.0",
   "ws": "^8.18.0"
 }

5.2 死亡踩坑实录

1. 手动拼帧头：二进制数据截断 → ❌
2. Rosbridge 协议：版本不兼容 → ❌
3. 裸文本 WebSocket：协议不匹配 → ❌
4. ✅ 官方方案：FoxgloveServer 一键对接 → 🚀

5.3 核心代码（server.js）

const foxglove = new FoxgloveServer({ name: "BM1688 AI Server" });
const wss = new WebSocketServer({ 
  port: 8765,
  handleProtocols: protocols => foxglove.handleProtocols(protocols) // 协议协商关键
});

wss.on("connection", (conn) => {
  foxglove.handleConnection(conn); 
});

// 注册数据通道（JSON模式）
foxglove.addChannel({ 
  topic: "/detections",
  encoding: "json" 
});

---

🎯 六、成果展示与规划

6.1 已上线功能

功能	状态	效果
前端加载	✅	3秒内完成渲染
WebSocket 连接	✅	平均延迟 < 100ms
/detections 通道	✅	随机检测框动态刷新
/metrics 通道	✅	CPU/NPU 曲线图

6.2 性能优化演进表

指标	当前（JSON）	目标（Protobuf）	降幅
CPU 占用	11.8%	6.2%	⬇️ 47%
带宽	127KB/s	68KB/s	⬇️ 48%

6.3 避坑指南（血泪总结）

1. Upgrade Required 错误
   → 确保浏览器使用 http://ip:9000 初始化而非直连 WS
2. JSON Schema 解析崩溃
   → 补充 schemaEncoding: "jsonschema"
3. 二进制帧错误
   → 弃用手动拼装，改用 foxglove.sendMessage()

---

🚀 七、未来扩展路线

gantt
    title 项目里程碑
    section 核心功能
    摄像头画面推流     :active, p0, 2026-06-15, 3d
    YOLO 模型对接       :active, p0, 2026-06-20, 5d
    section 性能优化
    Protobuf编码切换    :       p1, 2026-07-01, 3d
    MCAP录制系统       :       p1, 2026-07-05, 4d

---

Github项目地址：https://github.com/lichtblick-suite/lichtblick
开源协议：Apache 2.0
开发箴言：能用官方库就别再造轮子！ 💪