使用getDisplayMedia API截图后，窗口/Chrome标签页无法恢复焦点

问题原因 #

当选择Chrome标签页或独立窗口作为共享源时，浏览器会自动将焦点切换到被选中的目标窗口/标签页；而选择「整个屏幕」时不会触发该焦点切换行为，因此截图完成后焦点无法自动回到你的应用标签页。

解决方案 #

在截图流程中主动添加焦点恢复逻辑，调用window.focus()将焦点切回当前应用标签页。最佳时机是在成功获取媒体流之后，或者在截图处理完成的最后阶段。

修改后的代码 #

const handleCameraClick = async (e) => {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: {
        cursor: 'always',
        displaySurface: 'window',
      },
      audio: false,
    });

    // 主动恢复应用标签页焦点
    window.focus();
    
    const video = document.createElement('video');
    video.srcObject = stream;
    video.onloadedmetadata = () => {
      video.play();
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      stream.getTracks().forEach((track) => track.stop());
      video.srcObject = null;
      canvas.toBlob((blob) => {
        const file = new File([blob], 'screenshot.png', {
          type: 'image/png',
        });
        setFiles([file]); // setting state in react
        // 可选：若上面的focus未生效，在此处再次尝试
        // window.focus();
      }, 'image/png');
    };
  } catch (err) {
    console.error('error capturing screen:', err);
  }
};

额外优化 #

如果直接调用window.focus()未生效，可能是浏览器焦点切换的延迟导致，可以尝试用setTimeout添加微小延迟：

setTimeout(() => window.focus(), 100);

或者使用requestAnimationFrame确保在DOM更新周期内执行焦点恢复：

requestAnimationFrame(() => window.focus());

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