chrome无法彻底防投屏，需服务端（如校验ua、drm白名单）与客户端（禁用默认控件、动态设置disableremoteplayback、干扰mediastream）协同降低投屏识别概率。
Chrome 浏览器里 webkitShowPlaybackTargetPicker() 是防投屏的关键入口
这个函数本身不防投屏，而是主动唤出系统投屏选择器——但反过来，**不调用它 + 配合其他限制，才能降低被自动识别为可投屏源的概率**。Chrome 89+ 默认对 <video></video> 元素启用投屏能力（尤其在有 Cast 扩展或 Chromecast 设备在线时），只要视频能播放、页面没明确禁用，就可能出现在手机/系统投屏列表里。
实操上不能“彻底禁止”，因为浏览器未提供 disableCast 这类原生属性；只能通过组合策略提高投屏门槛：
- 移除
controls属性（或自定义控件），避免浏览器默认控件触发投屏按钮渲染 - 给
<video></video>添加disablePictureInPicture和webkit-playsinline（iOS 也需playsinline） - 监听
webkitcurrentplaybacktargetiswirelesschanged事件，在检测到无线目标切换时执行pause() - 慎用
crossorigin="anonymous"：若视频跨域且带凭据，可能因 CORS 策略导致投屏失败，但这不是可靠防护，只是副作用
为什么 disableRemotePlayback 属性经常失效
这个布尔属性本意是告诉浏览器“此视频不支持远程播放”，但它只在部分安卓 WebView 和较新 Safari（iOS 16.4+）中生效；Chrome 桌面版和旧版 Android Chrome 完全忽略它。即使写了 <video disableremoteplayback></video>，投屏菜单依然可能出现。
更麻烦的是：一旦用户手动点过一次投屏按钮，某些 Chrome 版本会缓存该页面的“可投屏”状态，后续刷新也不再询问——此时仅靠 HTML 属性已无能为力。
所以必须配合 JS 干预：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 在
canplay或loadedmetadata后立即调用video.disableRemotePlayback = true（注意这是 DOM 属性，非 HTML 属性） - 在
play事件中再次检查并重置：if (video.remotePlayback.state === 'connecting' || video.remotePlayback.state === 'connected') video.pause() - 不要依赖单次设置——Chrome 的
remotePlaybackAPI 状态可能延迟更新
WebRTC 场景下视频流更难防投屏
如果视频来自 MediaStream（比如摄像头推流、canvas.captureStream()），浏览器会默认将其视为高优先级投屏源，disableRemotePlayback 基本无效。
此时唯一较稳定的手段是破坏流的“可识别性”：
- 避免直接将
stream赋给video.srcObject，改用canvas渲染帧后再captureStream()，中间插入轻微 canvas 变形（如ctx.translate(0.5, 0.5)）可干扰投屏设备的帧分析 - 对 MediaStreamTrack 调用
track.enabled = false后再enabled = true，部分版本 Chrome 会重置其投屏标识 - 不使用
getDisplayMedia()获取屏幕流——这类流天生就是为投屏设计的，几乎无法隐藏
真正起作用的是服务端 + 客户端协同判断
纯前端代码无法 100% 防投屏，因为投屏协议（DIAL、Google Cast）工作在系统层，浏览器 JS 没有权限关闭硬件发现机制。所谓“防”，其实是让投屏设备找不到合法的媒体描述（MIME 类型、CORS 头、DRM 许可证等）。
所以关键动作在服务端：
- 视频分片接口返回
Content-Disposition: attachment，而非inline，让 Chrome 不轻易将其识别为可播媒体 - 对 HLS/DASH 请求校验
User-Agent是否含Cast、GoogleTV等关键词，直接 403 - 启用 FairPlay 或 Widevine，并配置 license server 拒绝来自非白名单设备 ID 的请求——投屏设备拿不到解密密钥，画面就是黑的
前端能做的只是配合：确保 video 元素没有 src 直链（用 srcObject 或 MSE），避免被静态扫描识别；同时别忘了，任何防投屏方案都挡不住录屏软件——这不在浏览器控制范围内。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
