JavaScript 浏览器 Presentation API 投屏控制怎么做

先说一个核心结论：Presentation API 的定位很明确——让网页应用把内容投屏到外部显示设备，同时保持主页面与投屏页之间的双向通信。这不是简单的“镜像当前标签页”，而是启动一个独立的投屏会话，投屏端展示什么、怎么响应，完全由开发者说了算。

不过，这套API的兼容性目前还比较有限——仅在Chromium内核浏览器（Chrome、Edge、Opera）中稳定支持，Firefox和Safari要么尚未实现，要么仅做了部分实验性支持。所以，在实际使用前，必须做一次检测：

• 先确认 navigator.presentation 存在且不是 undefined
• 更稳妥的做法是检查 navigator.presentation.defaultRequest，或者直接尝试创建 new PresentationRequest(url)

检测代码示例如下：

if ('presentation' in navigator && navigator.presentation.defaultRequest) {
  // 支持 API
} else {
  // 不支持，降级方案（如提示用户手动投屏）
}

发起投屏请求（连接外部屏幕）

投屏的第一步，是创建一个 PresentationRequest 实例，并指定一个投屏页面的URL。这里有几个硬性要求：必须同源，且强烈建议使用HTTPS。这个页面将在投屏设备上独立加载运行。

具体流程是：

• 创建 PresentationRequest 实例，传入投屏页路径（比如 '/cast/receiver.html'）
• 调用 .start() 方法，返回一个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('presentationconnectionavailable', e => {...}) 获取连接对象，然后同样使用 send/onmessage 机制

需要注意一点：消息必须是可序列化的值，比如字符串、数字、数组或普通对象。函数和DOM节点是不能传的。

处理连接状态与生命周期

投屏连接不是一成不变的——设备断开、页面关闭、网络中断都可能导致意外断开。因此，必须对连接的生命周期进行管理，关键事件包括：

• onconnect：新连接建立（投屏页首次加载完成）
• onclose：连接被主动关闭（如用户点击断开）或异常终止
• onterminate：投屏页主动调用 connection.close()
• onmessage：接收来自投屏页的消息

强烈建议在 onclose 或 onterminate 回调中清理资源、重置UI状态，甚至可以考虑触发重连逻辑。毕竟，用户不会容忍一个投屏服务突然断开后毫无反应。