调用 getdisplaymedia 失败主因是未满足 https 环境和用户手势触发两大前提，常见报错为 notallowederror 或 typeerror；需确保 localhost/https、click 事件触发、正确配置 options 并妥善管理 mediastream 生命周期。
getDisplayMedia 调用失败：常见报错和权限前提
直接调用 navigator.mediaDevices.getDisplayMedia() 会失败，除非满足两个硬性条件：页面必须运行在 HTTPS（或 localhost）环境下，且用户主动触发（比如点击按钮），不能在页面加载时自动调用。否则你会看到 NotAllowedError: Permission denied 或 TypeError: navigator.mediaDevices.getDisplayMedia is not a function。
后者通常说明浏览器不支持（如旧版 Safari 或 IE），前者多数是协议或触发时机问题。检查地址栏是否显示锁形图标，确保按钮绑定的是 click 事件而非 DOMContentLoaded。
- HTTPS 是强制要求，HTTP 下该 API 直接不可用（即使本地开发也需用
localhost，不能用127.0.0.1或文件协议） - 必须由用户手势触发，
setTimeout延迟调用也会被浏览器拒绝 - Chrome 和 Edge 支持最完整；Firefox 支持但默认禁用屏幕共享（需手动开启
about:config中的media.getusermedia.screensharing.allowed_domains）
捕获窗口 vs 捕获整个屏幕：参数怎么选
getDisplayMedia() 的 options 参数决定你能拿到什么——不是所有浏览器都支持全部选项。最常用的是 { video: true }，但加不加 audio: true、preferCurrentTab: true、logicalSurface: true 会影响行为和兼容性。
例如 Chrome 91+ 支持 logicalSurface: true 表示允许捕获当前标签页内容（如网页播放器画面），而 preferCurrentTab: true 会让弹窗默认聚焦到“当前标签页”选项卡（如果支持）。但 Firefox 不识别这两个字段，传了会被忽略。
-
{ video: true }：基础屏捕获，兼容性最好 -
{ video: { cursor: "always" } }：强制显示鼠标指针（默认是"motion"，只在移动时显示） -
{ video: { frameRate: 15 } }：降低帧率可减少带宽和 CPU 占用，但低于 10 容易卡顿 - 不要传
audio: true除非真要捕获系统声音——它在大多数浏览器中无效（Chrome 仅限部分 Windows 版本支持，且需额外权限）
拿到 MediaStream 后怎么用：别直接塞给 <video></video>
拿到 stream 后，很多人直接赋值给 video.srcObject = stream 就以为完事了。但实际中常遇到黑屏、只有音频没画面、或画面冻结——根本原因是 stream 的轨道（track）可能未就绪，或 video 元素未设置 autoplay 和 muted。
尤其注意：屏幕共享流的 video 轨道默认是 mute 的（即使你没设 audio），但 <video></video> 元素若未静音，在某些浏览器（如 Safari）下会拒绝播放。
- 务必设置
<video autoplay muted playsinline></video>，playsinline防止 iOS 全屏跳转 - 监听
stream.onaddtrack或检查stream.getVideoTracks().length确保轨道存在 - 避免重复调用
srcObject = stream，应先srcObject = null再赋新值，防止内存泄漏 - 如需推流（WebRTC），直接把
stream传给peerConnection.addTrack()，无需经过<video></video>
停止共享后资源没释放：track.stop() 不够
调用 stream.getTracks().forEach(t => t.stop()) 只是停掉轨道，但浏览器可能仍保留采集句柄，导致下次调用 getDisplayMedia() 时弹窗不出现、或返回空流。真正干净释放需要两步。
关键是：除了 stop track，还要把 video.srcObject 设为 null，并确保没有对 stream 的引用残留（比如闭包里存着、全局变量挂着）。否则 GC 不会回收，底层采集设备也不会真正断开。
- 停止时按顺序执行：
video.srcObject = null→stream.getTracks().forEach(t => t.stop())→ 将stream变量置为null - 不要依赖
stream.oninactive，它不一定触发，尤其在用户手动关闭共享窗口时 - 移动端（Android Chrome）有时会在后台自动暂停屏幕共享流，需监听
visibilitychange主动处理
屏幕共享不是普通媒体流，它的生命周期和权限模型更敏感，稍有遗漏就会卡在“已授权但无法再次唤起”的状态。最稳妥的做法，是在每次开始前确认旧流已彻底清理，而不是靠浏览器自动回收。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
