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

作者：袖梨 2026-07-08

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 节点。