在嵌入式设备中，Web 管理界面是最主流、最稳妥、最易部署的交互方式：无需安装 App、无需额外客户端，工程师或客户只需通过浏览器输入设备的 IP 地址即可完成配置、监控与维护。我们公司自研的 嵌入式目标识别器 同样采用了这种方案，并基于多年来的边缘 AI 工程落地经验，对页面结构、交互逻辑、语言系统和设备通信方式做了深入设计。

       为便于对嵌入式设备前端感兴趣的朋友了解我们设备的前端结构与交互逻辑，我们在 CSDN 发布了主要的 Web 页面代码（仅省略 reco.html 相关内容）。从本篇开始，我们将以“系列文章”的形式，对整个网页系统的设计理念、代码结构和使用方式进行系统讲解。

代码链接：https://download.csdn.net/download/weixin_44493809/92265472?spm=1001.2014.3001.5503

1. 系统组成：五大业务页面 + 独立 JS SDK

整个 Web 系统采用了清晰的功能拆分方式，主要由五个业务页面组成：

• login.html：登录设备（MD5 加密 + 会话记录）
• reco.html：识别类别/模型管理
• preview.html：实时视频预览
• config.html：设备网络/参数配置、固件升级、模型切换等
• replay.html：历史事件回放、地图轨迹、视频重放

此外，还有：

• `css/`：页面样式
• `js/`：脚本（包含 language-loader.js、tracker.js 等核心函数逻辑）
• `image/`：图标资源

2. 架构设计：纯前端页面 + REST 命令接口

我们采用了 “静态 HTML + API 调用” 的轻量架构：

1. UI 完全由前端构建，基于 Bootstrap + jQuery
2. 所有与设备交互的逻辑放入 统一的 JS SDK：`tracker.js`
3. 语言文本动态加载，方便语言的增减，目前支持 11 种语言
4. 页面内部通过 AJAX / WebSocket 与设备进行数据交换

使用这种方式有三大优势： ·

· 部署轻量

不需要前端框架打包，也不依赖 Node.js。嵌入式设备只需存储静态文件即可。

· 可控性强

所有 API 命令字集中管理，例如：
cmd_getip
cmd_fetchinfo
cmd_playpts
cmd_updatemodel

未来设备端扩展 API 时，只需更新 tracker.js 即可覆盖全站功能。

· 适合嵌入式场景

设备资源有限时，纯前端方案是最稳妥的选择，维护成本可控，运行性能可预测。

3. 页面间的统一设计：导航栏 + 语言系统 + 会话管理

所有业务页面都采用统一的逻辑流程：

1). 读取 sessionStorage 判断是否已登录

2). 加载当前语言（由 language-loader.js 完成）

3). 渲染导航栏文本

4). 调用 fetchInfo / sendCommand 等函数获取设备数据

以上意味着开发者在阅读任何一个页面代码时，都能看到明确的初始化步骤，降低维护难度。

4. 功能亮点

虽然我们采用了非常轻量的架构，但仍然覆盖了嵌入式设备常用的能力：

■ 多语言支持

方便不同国家用户操作，降低使用成本。

■ 实时预览支持 MPEG-TS

通过 `mpegts.js` 解码 WebSocket 流，实现低延迟视频观看。

■ 回放系统（replay）功能完整

包含：

• 轨迹分组管理
• 地图轨迹
• 视频回放与定位
• 备份下载
• 多视角切换（地图、事件列表、统计信息）

在车载嵌入式视频产品中，这是一个较完善、较实用的功能集合。

■ 设备配置覆盖全面

包括网络配置、摄像机接入、GPS、模型升级、固件升级、系统备份/恢复等。

5. 结语：欢迎合作交流

我们将在接下来的几篇文章中逐个解析：

• 五大页面的功能与代码结构
• 语言系统的设计（多国语言包如何组织与切换）
• tracker.js：REST SDK + 会话管理的完整逻辑
• 实时预览与事件回放在嵌入式设备中的实现方法