如何使用JS检测屏幕录制工具？全屏看视频时能否触发黑屏？

核心结论 #

可以实现部分场景的检测与黑屏切换，但无法做到100%覆盖所有屏幕录制工具——尤其是系统级或第三方独立录制软件，受限于浏览器的安全权限限制，JavaScript无法直接获取系统进程信息。

一、检测屏幕录制的可行方法（均有局限性） #

• 帧率异常检测：通过requestAnimationFrame统计浏览器渲染帧率，正常场景下刷新率约为60fps，部分录制工具会导致帧率下降。但该方法误判率极高，设备性能不足、后台进程过多等情况也会引发帧率降低。
• 屏幕共享API检测：利用MediaDevices.getDisplayMedia()，当用户通过浏览器发起屏幕共享时会触发相关事件，但仅能检测浏览器内的屏幕共享行为，对独立录屏工具无效。
• Canvas指纹对比：部分录制工具会修改Canvas的渲染像素数据（比如禁用硬件加速），可以通过绘制随机内容并对比渲染前后的像素差异来判断。但现代浏览器和录屏工具多已针对此类检测做了优化，误判或漏判概率高。

二、全屏视频的检测方法 #

通过标准全屏API判断当前是否处于全屏状态，且全屏元素为视频：

function isFullscreenVideo() {
  const fullscreenEl = document.fullscreenElement || 
                       document.webkitFullscreenElement || 
                       document.mozFullScreenElement;
  return fullscreenEl && fullscreenEl.tagName === 'VIDEO';
}

三、黑屏切换的实现逻辑 #

当满足「检测到录制」+「全屏视频」的条件时，创建一个覆盖全屏的黑色div，退出条件满足时移除：

// 创建/移除黑屏层
function toggleBlackScreen(show) {
  let blackScreen = document.getElementById('recording-black-screen');
  if (show) {
    if (!blackScreen) {
      blackScreen = document.createElement('div');
      blackScreen.id = 'recording-black-screen';
      blackScreen.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #000;
        z-index: 99999;
        pointer-events: none; /* 不干扰视频的播放控制 */
      `;
      document.body.appendChild(blackScreen);
    }
  } else {
    if (blackScreen) {
      blackScreen.remove();
    }
  }
}

四、完整示例（结合检测与黑屏逻辑） #

// 检测全屏视频
function isFullscreenVideo() {
  const fullscreenEl = document.fullscreenElement || 
                       document.webkitFullscreenElement || 
                       document.mozFullScreenElement;
  return fullscreenEl && fullscreenEl.tagName === 'VIDEO';
}

// Canvas指纹检测（仅供参考，误判率高）
async function detectPossibleRecording() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = 100;
  canvas.height = 100;

  // 绘制随机色块
  const randomColor = `rgb(${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)})`;
  ctx.fillStyle = randomColor;
  ctx.fillRect(0, 0, 100, 100);

  // 获取原始像素数据
  const originalData = new Uint32Array(ctx.getImageData(0, 0, 100, 100).data.buffer);

  // 尝试重新绘制并对比
  try {
    const img = new Image();
    img.src = canvas.toDataURL();
    await new Promise(resolve => img.onload = resolve);
    
    ctx.drawImage(img, 0, 0);
    const capturedData = new Uint32Array(ctx.getImageData(0, 0, 100, 100).data.buffer);

    // 统计像素差异
    let diffCount = 0;
    for (let i = 0; i < originalData.length; i++) {
      if (originalData[i] !== capturedData[i]) diffCount++;
    }
    // 差异超过10%则判定为可能在录制
    return diffCount > originalData.length * 0.1;
  } catch (err) {
    return false;
  }
}

// 定期检查并处理
async function checkRecordingStatus() {
  const isRecording = await detectPossibleRecording();
  const isFullscreenVid = isFullscreenVideo();
  
  toggleBlackScreen(isRecording && isFullscreenVid);
}

// 每2秒检测一次
setInterval(checkRecordingStatus, 2000);

// 监听全屏变化事件
['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange'].forEach(event => {
  document.addEventListener(event, checkRecordingStatus);
});

// 黑屏切换函数
function toggleBlackScreen(show) {
  let blackScreen = document.getElementById('recording-black-screen');
  if (show) {
    if (!blackScreen) {
      blackScreen = document.createElement('div');
      blackScreen.id = 'recording-black-screen';
      blackScreen.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #000;
        z-index: 99999;
        pointer-events: none;
      `;
      document.body.appendChild(blackScreen);
    }
  } else {
    if (blackScreen) blackScreen.remove();
  }
}

五、关键局限性说明 #

1. 无法检测系统级/独立录屏工具：比如Windows自带的Xbox录屏、OBS、Snagit等，这些工具运行在浏览器外部，JavaScript无法获取系统进程或屏幕捕获状态。
2. 检测方法存在误判：帧率下降、Canvas渲染异常可能由其他因素导致，无法精准定位到屏幕录制行为。
3. 浏览器安全限制：现代浏览器严格限制JavaScript访问系统级信息，确保用户隐私，因此不存在100%可靠的检测方案。

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