前端真的能防录屏？EME（加密媒体扩展） DRM 反录屏原理 + 实战代码

🌷 古之立大事者，不惟有超世之才，亦必有坚忍不拔之志
🎐 个人CSND主页——Micro麦可乐的博客
🐥《Docker实操教程》专栏以最新的Centos版本为基础进行Docker实操教程，入门到实战
🌺《RabbitMQ》专栏19年编写主要介绍使用JAVA开发RabbitMQ的系列教程，从基础知识到项目实战
🌸《设计模式》专栏以实际的生活场景为案例进行讲解，让大家对设计模式有一个更清晰的理解
🌛《开源项目》本专栏主要介绍目前热门的开源项目，带大家快速了解并轻松上手使用
🍎 《前端技术》专栏以实战为主介绍日常开发中前端应用的一些功能以及技巧，均附有完整的代码示例
✨《开发技巧》本专栏包含了各种系统的设计原理以及注意事项，并分享一些日常开发的功能小技巧
💕《Jenkins实战》专栏主要介绍Jenkins+Docker的实战教程，让你快速掌握项目CI/CD，是2024年最新的实战教程
🌞《Spring Boot》专栏主要介绍我们日常工作项目中经常应用到的功能以及技巧，代码样例完整
👍《Spring Security》专栏中我们将逐步深入Spring Security的各个技术细节，带你从入门到精通，全面掌握这一安全技术
如果文章能够给大家带来一定的帮助！欢迎关注、评论互动～

前端真的能防录屏？EME（加密媒体扩展） DRM 反录屏原理 + 实战代码

• 什么是 Encrypted Media Extensions（EME）
• EME是如何实现浏览器防截屏 / 防录屏
• EME播放加密媒体的代码示例
  • 创建 video 标签
  • JavaScript 初始化 EME
  • 处理 license 请求
  • 设置加密视频源
• 如何为你的应用选择方案？
• 总结

什么是 Encrypted Media Extensions（EME）

相信小伙伴在上一些视频网站的时候，在你截屏或录屏的时候， 图片是黑屏或视频区域是黑色，为什么这些视频网站能防录屏？可能有小伙伴要说了，可以监听用户快捷键啊，我只能说想得还是太简单了～ 如果仅仅是靠一些JS，那可绕过的方法实在太多了！

必须是浏览器原生支持的API才可行，这个就是 Encrypted Media Extensions

Encrypted Media Extensions 是 W3C Web API，用于让浏览器播放受 DRM（Digital Rights Management 数字版权保护）加密的媒体。
用通俗一点的话来说：EME 就是一套 JS API，用来控制浏览器的 DRM 解密模块

更多详细的介绍可以参考官方文档：https://www.w3.org/TR/encrypted-media/

常见 DRM：

EME是如何实现浏览器防截屏 / 防录屏

在浏览器层面，EME + DRM 可以实现防截屏 / 防录屏：

媒体文件是加密的
内容本身是 加密视频（如 Widevine Modular 加密）

浏览器通过 CDM 模块解密
浏览器内置一个 CDM（Content Decryption Module）

例如 Chrome 内置 Widevine CDM
CDM 运行在沙箱，不暴露密钥

禁止系统级截屏（取决于 DRM）

例如在 Chrome 上播放 Netflix 时：
用系统截图键 → 图片是黑屏
用屏幕录制 → 视频区域是黑色

这是因为：

Widevine L1（硬件级）支持防截屏
DRM 解密后的视频帧不会进入 CPU 层，而是直接通过 GPU 的保护路径输出
截屏 API 无法捕获受保护的视频帧

禁止浏览器扩展抓取视频帧
DRM 视频帧在受保护的视频管线（Video Pipeline）中，扩展无法获取

禁止调试工具记录媒体流
媒体解密密钥不会暴露在 JS 中

EME播放加密媒体的代码示例

我们知道EME是一套W3C标准化的JavaScript API，它在不暴露密钥和明文数据的前提下，充当网页应用、浏览器和底层DRM系统（CDM）之间的“安全信使”！

以下示例展示一个 使用 EME 播放加密 DASH（mpd）视频 的完整流程

注意：需要服务器提供 License Server 才能真正播放。

创建 video 标签

<videoid="video"controlswidth="600"></video>

JavaScript 初始化 EME

const video = document.getElementById("video");asyncfunctioninitEME(){// 请求支持的DRM，如Widevineconst keySystem ="com.widevine.alpha";// 配置const config =[{ initDataTypes:["cenc"], videoCapabilities:[{ contentType:'video/mp4; codecs="avc1.64001E"'}]}];// 请求 DRM 支持const access =await navigator.requestMediaKeySystemAccess(keySystem, config);const mediaKeys =await access.createMediaKeys();await video.setMediaKeys(mediaKeys); console.log("EME 初始化成功");}initEME();

处理 license 请求

模拟从许可证服务器获取许可证

video.addEventListener("encrypted",async(event)=>{const session = video.mediaKeys.createSession(); session.addEventListener("message",async(e)=>{// 向授权服务器发送的消息const license =awaitfetch("/license",{ method:"POST", body: e.message }).then(r=> r.arrayBuffer());// 将license喂给 CDMawait session.update(license);});// 初始化 CDMawait session.generateRequest(event.initDataType, event.initData);});

设置加密视频源

video.src ="https://example.com/encrypted.mpd";// 加密视频

如何为你的应用选择方案？

如果你的核心需求是防止用户复制、下载、非法传播视频/音频内容，那么你需要实现 EME DRM。这需要后端准备加密的内容、部署许可证服务器，并前端集成相应的DRM厂商（如Widevine）的SDK。

如果你的核心需求是防止用户通过截屏、录屏泄露应用界面（如聊天窗口、文档、软件界面），那么你应该寻找操作系统或框架提供的防截屏API。对于Web应用，这通常意味着你需要将应用打包为Electron等桌面应用才能实现。

总结

EME 本质是浏览器访问 DRM 的 API，本身不实现防录屏。
真正的防录屏能力来自 DRM（Widevine / PlayReady / FairPlay）以及设备硬件。
在 L1 级设备上，可完全禁止系统级截屏与录屏；在 PC 浏览器（L3）上基本无法防。
如果你计划构建一个防盗录系统，应采用：

DRM 加密 → 授权服务器
移动端 App 或支持 L1 的浏览器
加上行为水印 / 动态鉴权等配套策略

如果你在实践过程中有任何疑问或更好的扩展思路，欢迎在评论区留言，最后希望大家一键三连给博主一点点鼓励！

前端技术专栏回顾：

01【前端技术】 ES6 介绍及常用语法说明
02【前端技术】标签页通讯localStorage、BroadcastChannel、SharedWorker的技术详解
03 前端请求乱序问题分析与AbortController、async/await、Promise.all等解决方案
04 前端开发中深拷贝的循环引用问题：从问题复现到完美解决
05 前端AJAX请求上传下载进度监控指南详解与完整代码示例
06 TypeScript 进阶指南 - 使用泛型与keyof约束参数
07 前端实现视频文件动画帧图片提取全攻略 - 附完整代码样例
08 前端函数防抖（Debounce）完整讲解 - 从原理、应用到完整实现
09 JavaScript异步编程 Async/Await 使用详解：从原理到最佳实践
10 前端图片裁剪上传全流程详解：从预览到上传的完整流程
11 前端大文件分片上传详解 - Spring Boot 后端接口实现
12 前端实现图片防盗链技术详解 - 原理分析与SpringBoot解决方案
13 视频续播功能实现 - 断点续看从前端到 Spring Boot 后端
14 前端拖拽排序实现详解：从原理到实践 - 附完整代码
15 前端Base64格式文件上传详解：原理、实现与最佳实践
16 一文看懂Proxy与Object.defineProperty深度解析 - JavaScript的拦截艺术
17 前端实现B站视频画中画功能 - 完整代码实现主页面和小窗同步视频控制功能
18 前端引入的JS加载失败页面功能无法使用？JS加载失败的终极解决方案
19 别再用 html2canvas 了！Snapdom 才是网页截图与海报生成的王者