前端防录屏原理：EME 与 DRM 技术解析及实战

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

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

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

创建 video 标签

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

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

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

设置加密视频源

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 的浏览器 加上行为水印 / 动态鉴权等配套策略