跨节点 HTML 投屏与实时开发

在 OpenClaw 节点上远程展示 HTML 内容，支持游戏、可视化大屏、实时重载，适合跨设备投屏开发。

基本信息

• 技能名称?Canvas
• 中文名称?跨节点 HTML 投屏与实时开发
• 作者?lura2
• 分类?专业技能
• 版本?1.0.0
• 标签?remote-display, html-rendering, tailscale, live-reload, webview, cross-platform, http-server, openclaw-ecosystem

使用方法

使用说明
核心功能
Canvas Skill 是 OpenClaw 生态中的远程投屏工具，允许用户在连接的 Mac、iOS、Android 节点上展示自定义 HTML 内容。通过本地 HTTP 服务器（默认端口 18793）托管静态文件，结合 Node Bridge 的 TCP 通信（端口 18790），实现跨网络的内容推送与实时交互。
显著优点

1. 跨平台投屏 ：支持 Tailscale 组网，可在局域网或虚拟专网内的任意设备展示内容，突破 localhost 限制
2. 实时开发体验 ：内置 Live Reload 功能，保存文件后自动刷新所有连接的 Canvas，大幅提升开发效率
3. 灵活的网络绑定 ：四种绑定模式（loopback/lan/tailnet/auto）自动适配网络环境，Tailscale 集成确保远程访问稳定
4. 丰富的交互能力 ：支持 present/hide/navigate/eval/snapshot 五种操作，可执行 JavaScript、截图、动态导航
5. 零客户端配置 ：节点端通过 WebView 渲染，无需额外安装，开箱即用
   潜在局限
   网络依赖性强 ：依赖 Tailscale 或局域网连通性，纯离线场景需手动配置绑定模式
   URL 构造复杂 ：需根据绑定模式选择正确的主机名，localhost 在远程节点上不可用，新手易踩坑
   无原生 A2UI 支持 ：JSON 数据推送仍处于开发阶段，当前只能通过 HTML 文件承载内容
   安全边界模糊 ：HTTP 服务默认暴露，虽可通过 Tailscale 限制访问，但缺乏内置鉴权机制
   调试门槛 ：白屏问题需排查网络绑定、端口占用、路径匹配等多层因素
   适合人群
   需要在大屏/移动设备上实时预览前端项目的开发者
   构建数据可视化仪表盘、交互式游戏展示的技术团队
   已部署 Tailscale 组网、追求内网穿透便捷性的用户
   熟悉 OpenClaw 节点体系、具备网络调试经验的进阶用户
   常规风险
   暴露面风险 ：HTTP 服务默认监听可访问接口，误配置 lan 或 auto 模式可能意外暴露服务
   内容注入 ： eval 操作允许执行任意 JavaScript，若节点端存在敏感权限需警惕
   路径遍历 ：虽通过 /__openclaw__/canvas/ 前缀隔离，但需确认 root 目录权限设置合理
   Tailscale 依赖 ：若 Tailscale 服务异常，自动降级逻辑可能不如预期透明
   总体评价
   Canvas Skill 是 OpenClaw 生态中极具特色的远程渲染能力，将本地开发服务器与分布式节点无缝桥接。适合已打通网络层的用户快速构建跨屏应用，但需仔细处理 URL 构造和网络绑定配置以避免连接失败。