JavaScript 浏览器 Presentation API 投屏控制如何做

Presentation API 用于网页向外部设备投屏并实现双向通信，仅 Chromium 浏览器稳定支持；需检测 navigator.presentation.defaultRequest，通过 PresentationRequest 启动同源 HTTPS 投屏页，再用 PresentationConnection 的 send/onmessage 通信，同时监听 onconnect/onclose/onterminate 等事件管理生命周期。

浏览器 Presentation API 用于让网页应用将内容投屏到外部显示设备（如智能电视、投影仪、ChromeCast 等），并保持主页面与投屏页面的双向通信。它不是简单“镜像当前标签页”，而是启动一个独立的投屏会话，由开发者控制投屏端的内容和行为。

判断浏览器是否支持 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 {
  // 不支持，降级方案（如提示用户手动投屏）
}

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

需要指定一个投屏页面 URL（必须同源，且建议为 HTTPS），该页面将在投屏设备上独立加载运行：

立即学习“Java免费学习笔记（深入）”；

• 创建 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 状态，并可选择性触发重连逻辑。