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免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 创建 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 状态，并可选择性触发重连逻辑。
