前端真的能防录屏？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：

平台 DRM

Chrome、Android Google Widevine

Edge/Windows Microsoft PlayReady

Safari/iOS/macOS Apple FairPlay

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 标签

<video id="video" controls width="600"></video>

看看AI怎么写

html

1

JavaScript 初始化 EME

const video = document.getElementById("video");

async function initEME() {

  // 请求支持的DRM，如Widevine

  const 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();

看看AI怎么写

js

处理 license 请求

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

video.addEventListener("encrypted", async (event) => {

  const session = video.mediaKeys.createSession();

  session.addEventListener("message", async (e) => {

    // 向授权服务器发送的消息

    const license = await fetch("/license", {

      method: "POST",

      body: e.message

    }).then(r => r.arrayBuffer());

    // 将license喂给 CDM

    await session.update(license);

  });

  // 初始化 CDM

  await session.generateRequest(event.initDataType, event.initData);

});

看看AI怎么写

js

设置加密视频源

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

看看AI怎么写

js

1

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

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

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

总结

EME 本质是浏览器访问 DRM 的 API，本身不实现防录屏。

真正的防录屏能力来自 DRM（Widevine / PlayReady / FairPlay）以及设备硬件。

在 L1 级设备上，可完全禁止系统级截屏与录屏；在 PC 浏览器（L3）上基本无法防。

如果你计划构建一个防盗录系统，应采用：

DRM 加密 → 授权服务器

移动端 App 或支持 L1 的浏览器

加上行为水印 / 动态鉴权等配套策略

————————————————

版权声明：本文为CSDN博主「Micro麦可乐」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/lhmyy521125/article/details/155675307