宇树 B2 · 四足机器人远程操控

这是一套面向 宇树 B2 四足机器人的远程操控 H5，运行于 10 英寸横屏平板。前端将运动控制、设备状态、地图导航与音视频交互放在同一套界面中，让操作者在发出指令的同时，查看机器人回传的状态与现场画面。

项目的工作重点是交互与可视化、通信协议接入，以及状态回传与界面反馈的衔接。机器人运动执行、定位与路径规划由机器人侧或后端承担；H5 负责操作输入、地图展示、任务下发和结果反馈。

从操控到设备监测

主操作页以图传为观察窗口，双摇杆分别控制前后与横向移动、机身转向；功能菜单提供步态、站立、锁定、避障与跟随等操作。Canvas 绘制的摇杆支持多点触摸，松手或触摸取消时回中并发送零速度输入，减少操作结束后仍保留旧输入的情况。

设备监测页把机器狗三维模型与状态面板结合起来。四条腿的电机温度、电池温度随模型位置标注，旁侧展示电量、充电状态与机载设备列表。列表共 19 个状态条目，覆盖相机、算力盒、麦克风、测距与定位设备；条目数量不等同于独立自检项目数量。

自检需要确认后启动，通过 MQTT 下发请求，结果回传后更新设备状态。对操作者而言，模型用于定位部件，状态列表用于逐项检查，两种视图各自承担清晰的任务。

控制与状态消息通过 MQTT 接入，连接管理层统一提供主题订阅和指令发送，Zustand 保存业务状态。摇杆运动指令采用 20ms 的发送间隔限制，目标频率为 50Hz；实际发送仍受浏览器调度和链路状态影响，这个参数不代表端到端控制延迟。

高频运动输入、需要防抖的菜单操作与即时指令分别处理。避障策略切换等操作带有请求标识，收到匹配的回执后再更新状态，避免把“已经点击”直接当成“机器人已经执行”。

机器人状态帧超过 5 秒未更新时，前端将设备标记为离线。这个超时用于识别界面数据失效，机器人侧的失联处置仍由其控制系统负责。

导航页用 Three.js 加载 PCD 点云，叠加拓扑节点、连线与机器人位姿。界面上的路径点编号映射到实际节点标识，让用户选择路径点、配置导航任务，并查看任务状态。

除拓扑点导航外，界面也提供任意点的目标位置与朝向选择。前端将用户选取的目标交给导航接口，展示下发结果与后续反馈；路线计算和运动执行在机器人侧或后端完成。

相机图传通过 ZLMediaKit 的 WebRTC 客户端接入，支持相机切换与云台操作；播放组件处理加载、播放、错误与有限次数的退避重连。浏览器限制带声音的自动播放时，先静音重试，让画面能够出现。

远程喊话则接入麦克风采集与 WebSocket 音频传输，并与 MQTT 的业务开关配合。将控制消息、视频播放和语音会话分开管理，便于分别呈现连接状态、释放资源和处理失败。

设备端以 1920×1080 设计稿为布局基准，通过视口单位适配横屏平板。这个尺寸是设计坐标，不是设备物理分辨率。项目同时接入 Android WebView 桥接能力，部分语音与设备功能依赖原生环境。

在线演示使用本地生成的遥测、控制回执和 HTTP 模拟响应，并以录制片段替代实时图传，让浏览器可以体验操控、监测和导航流程。演示模块通过构建开关引入，保持与设备端接入逻辑的边界。

演示不连接真实机器人。 封面视频展示的是设备监测页的三维模型旋转，温度等数值为演示状态；实际控制、实时图传和喊话效果需要对应设备与服务联调验证。