如何阻止特定网页被屏幕共享并替换为空白画面？

要实现特定页面在屏幕共享时替换为空白内容（避免无限循环），可以利用浏览器的捕获检测API结合前端DOM操作，以下是具体实现步骤：

核心思路 #

通过检测页面是否被屏幕共享捕获，动态显示全屏空白覆盖层并隐藏原页面内容，达到共享时仅展示空白的效果。

具体实现 #

1. 添加空白覆盖层样式与DOM元素 #

在页面的CSS中添加全屏覆盖层样式，默认隐藏：

#share-blocker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff; /* 可根据需求改为黑色或其他颜色 */
    z-index: 999999; /* 确保覆盖所有页面内容 */
    display: none;
}

在HTML的<body>末尾添加该覆盖层元素：

<div id="share-blocker"></div>

2. 捕获状态检测与逻辑处理 #

使用现代浏览器支持的Capture Handle API（最可靠方案），搭配兼容降级逻辑：

// 仅在目标页面执行该逻辑（替换为你的特定页面路径）
const targetPaths = ['/watch', '/live-stream']; // 示例路径
if (!targetPaths.includes(window.location.pathname)) return;

const blocker = document.getElementById('share-blocker');

// 现代浏览器：使用Capture Handle API检测捕获状态
if ('oncapturehandlechange' in document) {
    document.addEventListener('capturehandlechange', () => {
        if (document.captureHandle) {
            // 页面被捕获（共享）：显示空白层，隐藏原内容
            blocker.style.display = 'block';
            document.body.style.visibility = 'hidden';
        } else {
            // 停止捕获：恢复原内容
            blocker.style.display = 'none';
            document.body.style.visibility = 'visible';
        }
    });
} else {
    // 兼容降级：通过媒体流Track检测（准确性稍低）
    const checkCaptureStatus = () => {
        let isCaptured = false;
        // 遍历页面所有媒体元素，检查是否有屏幕捕获流
        document.querySelectorAll('video').forEach(video => {
            if (!video.srcObject) return;
            const tracks = video.srcObject.getTracks();
            if (tracks.some(t => t.kind === 'video' && t.label.includes('screen'))) {
                isCaptured = true;
            }
        });

        if (isCaptured) {
            blocker.style.display = 'block';
            document.body.style.visibility = 'hidden';
        } else {
            blocker.style.display = 'none';
            document.body.style.visibility = 'visible';
        }
    };

    // 定时检查（每2秒一次，可调整频率）
    setInterval(checkCaptureStatus, 2000);
    // 初始检查一次
    checkCaptureStatus();
}

3. 关键注意事项 #

• 目标页面适配：修改targetPaths数组为你需要生效的页面路径，确保仅在特定页面触发逻辑。
• 浏览器兼容性：Capture Handle API支持Chrome 105+、Edge 105+，降级逻辑可覆盖旧版浏览器。
• 样式自定义：可修改share-blocker的background-color为黑色或其他空白色调，匹配你的网站风格。

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