JavaScript Presentation API实现浏览器投屏控制的详细步骤与代码示例
PresentationAPI支持网页应用投屏到外部设备，实现主页面与投屏页双向通信，但仅稳定兼容Chromium内核。使用前需检测支持，通过PresentationRequest发起连接，利用send()和message事件交换数据，并管理连接状态与生命周期。
首先明确一个核心结论：Presentation API 的定位非常清晰——它允许网页应用将内容投射到外部显示设备，同时保持主页面与投屏页面之间的双向实时通信。这并非简单的“镜像当前标签页”，而是启动一个独立的投屏会话，投屏端展示的内容以及如何响应，完全由开发者自主控制。
不过，目前这套 API 的浏览器兼容性仍然有限——仅在基于 Chromium 内核的浏览器（如 Chrome、Edge、Opera 等）中稳定支持，Firefox 和 Safari 要么尚未完全实现，要么仅提供了实验性支持。因此，在实际调用之前，必须进行特性检测：
- 首先检查
na vigator.presentation是否存在且不为 undefined - 更稳妥的做法是判断
na vigator.presentation?.defaultRequest，或直接尝试创建new PresentationRequest(url)
检测代码示例如下：
if ('presentation' in na vigator && na vigator.presentation.defaultRequest) {
// 支持 API
} else {
// 不支持，降级方案（如提示用户手动投屏）
}
如何发起投屏请求并连接外部屏幕
投屏的第一步是创建一个 PresentationRequest 实例，并指定投屏页面的 URL。这里有几项硬性要求：必须同源，并且强烈建议使用 HTTPS 协议。该页面会在投屏设备上独立加载并运行。
具体操作流程如下：
- 创建
PresentationRequest实例，传入投屏页路径（例如'/cast/receiver.html'） - 调用
.start()方法，返回一个 Promise；用户在弹出窗口中选择目标设备后，该 Promise 才会被解析 - 成功后返回
PresentationConnection对象，包含id、url、state（connected / disconnected / closed）等关键属性
代码实现非常直观：
const request = new PresentationRequest('/cast/receiver.html');
request.start()
.then(connection => {
console.log('投屏已连接', connection);
setupConnectionEvents(connection);
})
.catch(err => console.error('投屏失败', err));
主页面与投屏页间的双向通信机制
连接建立之后，真正的双向通信便开始了。主页面与投屏页通过 PresentationConnection 的 message 事件和 send() 方法完成数据交换：
- 主页面监听
connection.onmessage，接收来自投屏页的数据（例如播放进度、用户交互反馈） - 主页面调用
connection.send(data)，向投屏页发送指令（比如切换幻灯片、开始播放视频） - 投屏页则需要通过
document.addEventListener('presentationconnectiona vailable', e => {...})获取连接对象，然后同样使用 send / onmessage 机制
需要注意一点：发送的消息必须是可序列化的值，比如字符串、数字、数组或普通对象。函数和 DOM 节点无法传递。
连接状态管理与生命周期处理
投屏连接并非一成不变——设备断开、页面关闭、网络中断等都可能导致意外断开。因此，必须妥善管理连接的生命周期，关键事件包括：
- onconnect：新连接建立（投屏页首次加载完成）
- onclose：连接被主动关闭（如用户点击断开）或异常终止
- onterminate：投屏页主动调用
connection.close() - onmessage：接收来自投屏页的消息
强烈建议在 onclose 或 onterminate 回调中清理资源、重置 UI 状态，甚至可以考虑触发重连逻辑。毕竟，用户不会容忍一个投屏服务突然断开后毫无反馈。