使用MediaDevices.getDisplayMedia()捕获屏幕时如何显示彩色边框提示

核心实现原则：提示边框全程可见、不干扰用户正常操作、不会被录入屏幕捕获内容，具体实现步骤如下：

1. 基础HTML结构 #

在页面根节点下添加边框专属DOM元素，默认处于隐藏状态：

<!-- 屏幕捕获提示边框 -->
<div id="capture-indicator" class="capture-border"></div>

2. CSS实现彩色动态边框 #

可以根据需求调整边框粗细、颜色、动画效果，以下是示例样式：

.capture-border {
  display: none;
  position: fixed;
  inset: 0; /* 等同于top/right/bottom/left都设为0，铺满全屏 */
  border: 8px solid;
  /* 彩色渐变边框 */
  border-image: linear-gradient(90deg, #ff0000, #ff9900, #33cc33, #3399ff, #cc33ff) 1;
  animation: border-flow 2s linear infinite;
  z-index: 999999; /* 确保边框在所有页面元素最上层 */
  pointer-events: none; /* 不阻挡用户的点击、输入等操作 */
  display-capture: none; /* 主流浏览器支持该属性，可让当前元素不被录入捕获内容 */
}

/* 边框流动动画 */
@keyframes border-flow {
  0% {
    border-image: linear-gradient(90deg, #ff0000, #ff9900, #33cc33, #3399ff, #cc33ff) 1;
  }
  20% {
    border-image: linear-gradient(90deg, #cc33ff, #ff0000, #ff9900, #33cc33, #3399ff) 1;
  }
  40% {
    border-image: linear-gradient(90deg, #3399ff, #cc33ff, #ff0000, #ff9900, #33cc33) 1;
  }
  60% {
    border-image: linear-gradient(90deg, #33cc33, #3399ff, #cc33ff, #ff0000, #ff9900) 1;
  }
  80% {
    border-image: linear-gradient(90deg, #ff9900, #33cc33, #3399ff, #cc33ff, #ff0000) 1;
  }
  100% {
    border-image: linear-gradient(90deg, #ff0000, #ff9900, #33cc33, #3399ff, #cc33ff) 1;
  }
}

3. JS关联屏幕捕获状态 #

控制边框随捕获的启动、结束切换显隐：

const captureIndicator = document.getElementById('capture-indicator');
let mediaStream = null;

// 启动屏幕捕获
async function startCapture() {
  try {
    mediaStream = await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: false
    });
    // 捕获成功后显示提示边框
    captureIndicator.style.display = 'block';
    // 监听用户手动停止捕获的事件
    mediaStream.getVideoTracks()[0].addEventListener('ended', stopCapture);
  } catch (err) {
    console.error('屏幕捕获失败：', err);
  }
}

// 停止屏幕捕获
function stopCapture() {
  if (mediaStream) {
    mediaStream.getTracks().forEach(track => track.stop());
    mediaStream = null;
  }
  // 隐藏提示边框
  captureIndicator.style.display = 'none';
}

补充说明 #

• 若需要适配不支持display-capture属性的旧浏览器，可以引导用户选择捕获指定应用窗口而非整个屏幕，避免边框被录入捕获内容。
• 可以额外在边框上添加文字提示，比如右上角加“屏幕捕获中”的文字标识，进一步强化提醒效果。

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