如何实现网站防截图/录屏黑屏效果？类似DRM保护功能

首先明确：前端层面无法完全阻止录屏或截图，只能通过一些手段模拟类似的保护效果，以下是几个简单可行的方案：

方案1：利用页面可见性变化事件 #

部分录屏场景会触发页面可见性变更，结合该事件实现全屏黑屏：

// 创建全屏黑色覆盖层
const blackOverlay = document.createElement('div');
blackOverlay.style.cssText = `
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: 999999;
  display: none;
`;
document.body.appendChild(blackOverlay);

// 监听页面可见性变化
document.addEventListener('visibilitychange', () => {
  blackOverlay.style.display = document.visibilityState === 'hidden' ? 'block' : 'none';
});

方案2：监听PrintScreen按键触发黑屏 #

针对手动截图场景，检测键盘的PrintScreen按键：

const blackOverlay = document.createElement('div');
blackOverlay.style.cssText = `
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: 999999;
  display: none;
`;
document.body.appendChild(blackOverlay);

document.addEventListener('keydown', (e) => {
  // 适配不同浏览器的PrintScreen键值
  if (e.key === 'PrintScreen' || e.keyCode === 44) {
    blackOverlay.style.display = 'block';
    // 1秒后自动恢复，避免持续黑屏
    setTimeout(() => {
      blackOverlay.style.display = 'none';
    }, 1000);
  }
});

方案3：基于帧率检测的录屏判断 #

录屏会占用系统资源导致页面帧率骤降，通过requestAnimationFrame检测帧率变化触发黑屏：

const blackOverlay = document.createElement('div');
blackOverlay.style.cssText = `
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: 999999;
  display: none;
`;
document.body.appendChild(blackOverlay);

let lastTime = performance.now();
let frameCount = 0;
const checkFrameRate = () => {
  const currentTime = performance.now();
  frameCount++;
  
  if (currentTime - lastTime >= 1000) {
    const fps = frameCount;
    // 帧率低于20时判定可能被录屏，可根据实际场景调整阈值
    blackOverlay.style.display = fps < 20 ? 'block' : 'none';
    frameCount = 0;
    lastTime = currentTime;
  }
  
  requestAnimationFrame(checkFrameRate);
};

requestAnimationFrame(checkFrameRate);

注意事项 #

• 以上方案仅能实现表层防护，无法覆盖硬件级录屏等场景。
• 方案3存在误判可能，比如页面本身复杂导致帧率下降，需根据实际情况调整参数。

内容的提问来源于stack exchange，提问作者TahaNil