前端真的能防录屏？EME加DRM 反录屏原理 + 实战代码录屏为什么防不住？录屏，就是把你屏幕上显示的内容录下来。对于

录屏为什么防不住？

录屏，就是把你屏幕上显示的内容录下来。对于普通网页，前端几乎无法阻止。因为浏览器最终要把画面渲染到屏幕上，任何录屏软件都能轻松捕获这个画面。

常见的“防录屏”方法，比如检测 window 对象变化、监听鼠标事件，其实都很容易被绕过。它们更像是一种“君子协议”，防不住真正想录的人。

那么，像一些主流平台，它们的付费视频是怎么防止被盗录的呢？答案就是 DRM。

DRM 和 EME 是什么？

DRM 的全称是 数字版权管理。它的目标很明确：保护数字内容不被非法复制和传播。

在 Web 上，实现 DRM 的关键技术叫做 EME，也就是 加密媒体扩展。你可以把它理解成浏览器提供的一套标准接口，让网页能和专门的 DRM 模块“对话”。

这个 DRM 模块，通常是一个独立的、受操作系统保护的“黑盒子”，比如：

• Widevine (Google)
• PlayReady (Microsoft)
• FairPlay (Apple)
它们的工作流程，和我们平时用的 HTTPS 有点像，但更复杂。

工作原理：一次安全的“交接”

想象一下，你要把一份秘密文件交给一个朋友，但又怕路上被人偷看。你会怎么做？

1. 你把文件锁进一个保险箱（加密内容）。
1. 你把保险箱交给朋友。
1. 你通过一个绝对安全的通道，把钥匙（解密密钥）单独发给他。
1. 他用钥匙打开保险箱，取出文件（解密并播放）。

EME DRM 的过程也类似：

1. 准备阶段：加密内容与密钥
- • 视频服务商（比如 Netflix）会先用一个密钥把视频文件加密。加密后的视频，没有密钥谁也打不开。
- • 这个密钥本身，也会被加密保护起来，放在一个叫 许可证服务器 的地方。
2. 请求播放：申请许可证
- • 当你在浏览器里打开一个受保护的视频时，播放器（比如 video.js 或 Shaka Player）会通过 EME 接口，向浏览器里的 DRM 模块（如 Widevine）说：“我要播这个视频，需要许可证。”
- • DRM 模块会生成一个“许可证请求”，里面包含了你的设备信息、当前视频的 ID 等。
3. 获取钥匙：与许可证服务器通信
4. 安全解密与播放：在黑盒子里完成
- • 浏览器的 DRM 模块收到加密的许可证。
- • 最关键的一步来了：解密许可证、取出密钥、再用密钥解密视频数据，所有这些操作都在 DRM 模块这个“黑盒子”里完成。操作系统会保护这个进程，防止其他程序（包括录屏软件）窃取解密后的视频数据或密钥。
- • 解密后的视频数据，会被直接送到显卡进行渲染，显示在屏幕上。

注意：这个“黑盒子”非常关键。它意味着，即使录屏软件截获了屏幕画面，它得到的也只是最终渲染出的像素，而无法拿到最原始、清晰的视频源文件。而且，一些高级的 DRM 系统甚至能对输出到显示器的信号进行处理，让录屏得到花屏或黑屏。

所以，EME DRM 防录屏的核心，不是阻止画面被看到，而是阻止高清、原始的媒体数据被轻易获取和复制。

播放一个受保护视频

理论说完了，我们来看看代码。下面是一个使用原生 HTMLMediaElement 和 EME API 播放受 Widevine DRM 保护内容的极简示例。

1. HTML 结构

很简单，就是一个 video 标签。

<!DOCTYPE html>
<html>
<head>
    <title>EME DRM 播放示例</title>
</head>
<body>
    <video id="videoPlayer" controls width="720"></video>
    <script src="player.js"></script>
</body>
</html>

2. JavaScript 核心逻辑 (player.js)

// 1. 获取视频元素
const videoElement = document.getElementById('videoPlayer');

// 2. 设置视频源（这里是一个示例的加密视频URL和DRM信息）
const videoSrc = 'https://example.com/path/to/your/encrypted-video.mp4';
// DRM 配置：指定使用的密钥系统和许可证服务器地址
const drmConfig = {
    // Widevine 的系统标识符
    audioRobustness: 'SW_SECURE_CRYPTO',
    videoRobustness: 'SW_SECURE_DECODE',
    // 许可证服务器的URL
    licenseServerUrl: 'https://license.example.com/wv'
};

// 3. 尝试为视频元素设置DRM（密钥系统）
async function setupDRM() {
    try {
        // 检查浏览器是否支持我们需要的DRM系统（Widevine）
        const config = [{
            initDataTypes: ['cenc'], // 通用的加密初始化数据类型
            audioCapabilities: [{
                contentType: 'audio/mp4; codecs="mp4a.40.2"',
                robustness: drmConfig.audioRobustness
            }],
            videoCapabilities: [{
                contentType: 'video/mp4; codecs="avc1.42E01E"',
                robustness: drmConfig.videoRobustness
            }]
        }];

        // 请求访问指定的DRM系统
        const access = await navigator.requestMediaKeySystemAccess('com.widevine.alpha', config);

        // 创建 MediaKeys 对象并关联到 video 元素
        const mediaKeys = await access.createMediaKeys();
        await videoElement.setMediaKeys(mediaKeys);

        console.log('DRM 系统设置成功。');
        return mediaKeys;
    } catch (error) {
        console.error('设置 DRM 失败:', error);
        throw error;
    }
}

// 4. 监听需要许可证的事件，并向服务器请求
function setupLicenseRequest(mediaKeys) {
    const session = mediaKeys.createSession();
    videoElement.addEventListener('encrypted', async (event) => {
        try {
            // event.initData 包含了生成许可证请求所需的信息
            await session.generateRequest(event.initDataType, event.initData);

            // 监听许可证消息事件，当DRM模块准备好请求时触发
            session.addEventListener('message', async (messageEvent) => {
                try {
                    // 将许可证请求发送到我们的许可证服务器
                    const licenseResponse = await fetchLicense(messageEvent.message, drmConfig.licenseServerUrl);
                    // 将服务器返回的许可证提供给DRM模块
                    await session.update(licenseResponse);
                    console.log('许可证更新成功，可以开始播放。');
                } catch (updateError) {
                    console.error('获取或更新许可证失败:', updateError);
                }
            });
        } catch (genError) {
            console.error('生成许可证请求失败:', genError);
        }
    });
}

// 5. 模拟向许可证服务器发送请求的函数
async function fetchLicense(licenseRequest, serverUrl) {
    // 在实际项目中，这里需要根据DRM供应商的要求构造正确的请求头和请求体
    const response = await fetch(serverUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/octet-stream'
        },
        body: licenseRequest // 将DRM模块生成的请求数据发过去
    });

    if (!response.ok) {
        throw new Error(`许可证服务器响应错误: ${response.status}`);
    }

    // 返回服务器响应的数据（即许可证）
    return await response.arrayBuffer();
}

// 6. 初始化播放流程
async function initPlayer() {
    try {
        const mediaKeys = await setupDRM();
        setupLicenseRequest(mediaKeys);

        // 设置视频源并开始加载
        videoElement.src = videoSrc;
        // 可以在这里调用 videoElement.play() 自动播放，但通常由用户点击触发
        console.log('播放器初始化完成，等待用户操作或自动播放。');
    } catch (error) {
        console.error('播放器初始化失败:', error);
        alert('无法播放受保护的内容，可能因为浏览器不支持或DRM配置错误。');
    }
}

// 页面加载后初始化
window.addEventListener('DOMContentLoaded', initPlayer);

要点解释

• navigator.requestMediaKeySystemAccess：这是 EME 的入口。它询问浏览器：“你支持 ‘Widevine’ 这个 DRM 系统吗？如果支持，请给我访问它的权限。”
• encrypted 事件：当浏览器检测到视频数据是加密的时候，会触发这个事件。这是我们开始 DRM 流程的信号。
• MediaKeySession：代表一次具体的 DRM 授权会话。它负责生成许可证请求、处理服务器响应。
• generateRequest 和 update：generateRequest 让 DRM 模块生成一个发给许可证服务器的请求；update 则把服务器回来的“钥匙”（许可证）交给 DRM 模块。
• fetchLicense 函数：这里模拟了与许可证服务器的通信。请注意，实际生产环境中，请求头、请求体格式、可能需要的额外认证（如 Token）都非常复杂，完全由 DRM 供应商和你的后台服务决定。

重要提醒与限制

看到这里，你可能很兴奋。但先别急，有几点必须清楚：

1. 这不是一个完整的、可直接运行的生产代码。它省略了：
- • 真实的视频源和许可证服务器地址。
- • 与具体 DRM 供应商（Widevine/PlayReady/FairPlay）深度集成的细节。
- • 错误处理、重试逻辑、不同清晰度流的适配等。
2. 你需要 DRM 供应商的授权和后台服务。使用 Widevine、PlayReady 或 FairPlay 不是免费的，你需要联系它们（或通过云服务商）获取授权，并搭建对应的许可证服务器。
3. 它主要保护视频流，对网页其他部分无效。DRM 只保护通过 MediaKeys 解密的媒体内容。你网页上的普通文字、图片，依然可以被截图或录屏。
4. 浏览器和操作系统支持是关键。如果用户的浏览器或操作系统不支持 EME 或特定的 DRM 模块，视频就无法播放。这就是为什么网站通常会有降级方案。

总结

所以，回到最初的问题：前端能防录屏吗？

• 对于普通网页内容：不能，只能增加一些干扰和检测。
• 对于流媒体视频/音频：可以，通过 EME DRM 技术实现。它的原理是把解密过程锁进一个安全的“黑盒子”（DRM 模块），让录屏软件只能录到“盒子”输出的最终画面，而拿不到原始数据。

实现它需要一整套后端基础设施（加密打包、许可证服务器）和前端对 EME API 的调用。虽然代码看起来不复杂，但背后的商业授权、系统集成才是真正的门槛。