前端 EME DRM 防录屏原理及实战代码

创建 video 标签

首先准备一个标准的 HTML5 视频标签：

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

JavaScript 初始化 EME

我们需要请求支持的 DRM 并配置 CDM。这里以 Widevine 为例：

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"'
    }]
  }];

  try {
    // 请求 DRM 支持
    const access = await navigator.requestMediaKeySystemAccess(keySystem, config);
    const mediaKeys = await access.createMediaKeys();
    await video.setMediaKeys(mediaKeys);
    console.log("EME 初始化成功");
  } catch (error) {
    console.error("EME 初始化失败", error);
  }
}

initEME();

处理 license 请求

当遇到加密内容时，浏览器会触发 encrypted 事件。我们需要模拟从许可证服务器获取许可证并喂给 CDM。

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);
});

设置加密视频源

最后，将加密后的视频地址赋值给 src：

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

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

• 防止用户复制、下载、非法传播音视频内容 如果你需要严格的版权保护，必须实现 EME DRM。这需要后端准备加密内容、部署许可证服务器，并在前端集成相应的 DRM 厂商 SDK。

• 防止用户通过截屏、录屏泄露应用界面 如果你的需求是防止聊天窗口、文档等 UI 界面的泄露，Web 端原生能力有限。此时应寻找操作系统或框架提供的防截屏 API。对于 Web 应用，通常意味着需要将应用打包为 Electron 等桌面应用才能实现更底层的控制。

总结

EME 本质是浏览器访问 DRM 的 API，它本身不直接实现防录屏，真正的防护能力来自 DRM 方案（Widevine / PlayReady / FairPlay）以及设备硬件。

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

构建防盗录系统建议采用组合策略：DRM 加密 + 授权服务器 + 移动端 App 或支持 L1 的浏览器 + 行为水印 / 动态鉴权等配套措施。