Presentation API 可通过异步投屏会话将指定 DOM 区域内容发送至外部设备，但需 Chromium 110+ 等现代浏览器支持，Safari 和 Firefox 不支持；主页面发起连接并发送序列化 HTML，投屏页接收后安全渲染，须同源、控制消息大小、防 XSS 与高频更新。
可以通过浏览器原生 Presentation API 将当前页面的 DOM 内容（非整个标签页，而是指定区域）异步投射到外部显示设备，但需注意：它不直接“复制 DOM 节点”，而是启动一个独立的投屏会话，加载新页面（如 presentation.html），再由该页面主动拉取或接收主页面传来的结构化数据进行渲染。
核心前提：设备与浏览器支持
仅现代 Chromium 内核浏览器（Chrome、Edge 110+）及部分 Android WebView 支持完整 Presentation API；Safari 和 Firefox 不支持。需确认：
-
navigator.presentation存在且非 undefined - 系统已连接 Miracast / Chromecast / 兼容 WiFi Display 的接收器
- 用户已授权投屏权限（首次调用会触发弹窗）
分步实现：从请求到内容同步
主页面负责发起、通信和状态管理；投屏端页面（presentation.html）负责接收并渲染 DOM 结构。
-
1. 启动投屏会话
创建
PresentationRequest，指向你的投屏专用页面：const req = new PresentationRequest('presentation.html');
调用req.start()返回 Promise，成功后获得PresentationConnection实例。 -
2. 建立双向通信通道
主页面通过
connection.send(JSON.stringify({ type: 'dom-data', html: '<h2>实时内容</h2>' }))发送序列化 HTML 字符串；
投屏页监听connection.onmessage，用document.body.innerHTML = data.html渲染（注意 XSS 风险，建议白名单标签或使用DOMParser安全解析）。 -
3. 处理动态更新
若原始 DOM 可变（如实时仪表盘），主页面可监听变更（
MutationObserver），提取关键区域outerHTML并重发；
投屏页建议加防抖（如 100ms 延迟渲染），避免高频重绘卡顿。
关键限制与替代思路
Presentation API 本身不提供“截取当前 DOM 快照并推流”的能力。若需更高保真度或低延迟：
- 用
canvas.captureStream()+ WebRTC 推送到接收端（需额外信令与播放逻辑） - 服务端渲染 DOM 为图片/视频帧，前端轮询或 WebSocket 推送（适合静态为主、更新不频繁场景）
- Android 原生开发中可用
Presentation类绑定副屏Display直接 setContentView，绕过 Web 层限制
不复杂但容易忽略：投屏页必须是同源独立 HTML 文件，不能是 data URL 或 blob URL；通信消息大小建议控制在 64KB 内，超长需分片。
