maverickosama92
maverickosama92

Reputation: 2725

Focus tab after screenshot capture getDisplayMedia API

I am trying to capture a screenshot through my app. It works correctly for the 'Entire Screen' option, but for anything selected in the window or Chrome Tab, then the focus doesn't return to my tab after a screenshot.

const handleCameraClick = async (e) => {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: {
        cursor: 'always',
        displaySurface: 'window',
      },
      audio: false,
    });
    
    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
      }, 'image/png');
    };
  } catch (err) {
    console.error('error capturing screen:', err);
  }
};

enter image description here

FYI: claude.ai has the same functionality and it works there.

Can you help me achieve that?

Upvotes: 0

Views: 15

Answers (0)

Related Questions