纯前端HTML页面无法真正防录屏，唯一有效方式是通过HTTPS下EME API调用Widevine L2 DRM保护加密视频流，仅对video元素中符合CENC/AES-128规范的分片内容生效，Canvas、HTML文本、非DRM视频等均不受保护。
纯前端 HTML 页面无法真正防录屏，所谓“防录屏”必须依赖浏览器原生 DRM 能力，且仅对 <video></video> 元素中通过 EME API 播放的加密流生效。静态 HTML、图片、Canvas 渲染内容、非 DRM 视频（如 src 直链 MP4）均不受保护。
Chrome 中启用 Widevine L2 是唯一可行路径
Chrome 桌面版默认支持 Widevine CDM，但只在 L2 安全级别下运行——它不阻止录屏软件捕获显存或 GPU 输出，而是通过操作系统协作（如 Windows 的 Protected Media Path / PMP）禁止未签名进程访问解密后的视频帧。这意味着：
- 必须使用
MediaKeys+MediaKeySession接口发起 EME 流程，不能绕过 CDM - 视频源必须是加密分片（如 DASH 的 CENC 或 HLS 的 AES-128），且
#EXT-X-KEY或ContentProtection元数据需正确声明 DRM 类型 -
navigator.requestMediaKeySystemAccess('com.widevine.alpha', [...])必须成功返回，否则降级为无保护播放 - L2 不保证 100% 阻断所有录屏工具（尤其带驱动级 hook 的专业软件），但可拦截绝大多数桌面录屏应用（OBS、Bandicam、系统自带录屏等）
EME 初始化失败的三个高频原因
即使代码结构正确，requestMediaKeySystemAccess 也常静默失败，导致你以为启用了 DRM，实际走的是明文播放路径：
- 页面未部署在 HTTPS 下（本地
http://localhost除外，Chrome 允许该例外） - 传入的
supportedConfigurations中audioCapabilities/videoCapabilities的contentType与服务端实际提供的加密格式不匹配（例如服务端发的是video/mp4;codecs="avc1.640028"，但 JS 写成了avc1.64001f） - 未设置
robustness: 'SW_SECURE_CRYPTO'（L2 要求）或错误设为'HW_SECURE_ALL'（L1 才支持，桌面 Chrome 不满足）
验证是否真启用：打开 Chrome DevTools → Application → Frames → 点击你的页面 → 查看右侧 “Digital Rights Management” 区域，有 Widevine 条目且状态为 “Active” 才算成功。
立即学习“前端免费学习笔记（深入）”；
DRM 无法保护的内容类型必须提前隔离
开发者常误以为加了 EME 就万事大吉，但以下内容完全不在 DRM 保护范围内：
- 用
canvas.getContext('2d').drawImage(video, ...)截取的帧——CDM 不干预 Canvas 绘制，此时拿到的是已解密像素 - 通过
video.captureStream()创建的 MediaStream —— 它输出的是原始帧流，绕过 CDM 管控 - 所有非
<video></video>元素：HTML 文本、SVG、CSS 动画、WebGL 渲染画面，DRM 对它们无感知 - 视频封面图（
poster属性）、字幕轨道（WebVTT）、水印 DOM 元素——这些是独立资源，需单独防盗链或动态生成
若业务要求更高防护，必须放弃纯 Web 方案，转向 Electron + 自定义渲染器、或专用播放器客户端（如基于 Chromium Embedded Framework 构建），否则任何“防录屏 JS 库”都只是障眼法。
