Error Capturing Tab Content in Chrome Extension (Manifest V3) using getUserMedia

I am developing a Chrome extension using Manifest V3 that aims to capture and record the content of a specific browser tab. I've ensured that the tabCapture permission is correctly set in the manifest file. Despite this, when I attempt to capture the tab using navigator.mediaDevices.getUserMedia with Chrome-specific constraints, I encounter an error that prevents me from capturing the tab's content.

Here is the relevant part of my code:

const constraints = {
  audio: false,
  video: {
    chromeMediaSource: "tab",
    chromeMediaSourceId: streamId,
  }
} as any;


try {
  let stream = await navigator.mediaDevices.getUserMedia(constraints);
} catch (e) {
  console.log('Error getting display media', e);
  window.close();
  return;
}

With these constraints, I receive an error message: Error getting display media DOMException: Error starting tab capture. Interestingly, when I switch to default constraints:

const constraints = {
  audio: false,
  video: true
} as any;

The code executes without errors, but it captures the webcam stream instead of the browser tab, which is not my goal.

My extension has the tabCapture permission set in the manifest, as follows:

"permissions": [
  "tabCapture"
]

I am trying to understand why I'm facing this issue with tab capture using getUserMedia despite having the correct permissions and constraints. Is there something I'm missing in setting up tab capture for a Chrome extension with Manifest V3? Any advice or suggestions on how to correctly capture a tab's video content using getUserMedia would be greatly appreciated.

P.S: I managed to play the stream of the tab with these constraints that's why it's confusing

const constraints = {
  audio: false,
  video: {
    mandatory: {
      chromeMediaSource: "tab",
      chromeMediaSourceId: streamId,
    }
  } 
} as any

navigator.mediaDevices
    .getUserMedia(constraints)
    .then(async (stream) => {
      setVideoStream(stream)
    })
    .catch((error) => {
      console.error('Error capturing tab:', error)
    })

{videoStream && (
  <video
    width={520}
    height={340}
    autoPlay
    playsInline
      ref={(videoElement) => {
        if (videoElement) videoElement.srcObject = videoStream
      }}
  />
)}

The problem was located in the background script.

I encountered an issue with chrome.tabCapture.getMediaStreamId where the wrong media stream was being captured. The problem stemmed from using both targetTabId and consumerTabId parameters together, which seemed to conflict.

Initially, my code looked like this:

streamId = await new Promise((resolve, reject) => {
  chrome.tabCapture.getMediaStreamId(
    {
      targetTabId: sender?.tab?.id,
      consumerTabId: sender?.tab?.id, // This line was causing the problem
    },
    (id) => {
      if (chrome.runtime.lastError || !id) {
        reject(new Error('Error getting streamId: ' + (chrome.runtime.lastError?.message || 'No ID returned')))
        return
      }
      resolve(id)
    }
  )
})

The issue was resolved by removing consumerTabId: sender?.tab?.id. This allowed the correct constraints to be applied, enabling the recording of the tab's content instead of the webcam stream.

Corrected code:

streamId = await new Promise((resolve, reject) => {
  chrome.tabCapture.getMediaStreamId(
    {
      targetTabId: sender?.tab?.id
    },
    (id) => {
      if (chrome.runtime.lastError || !id) {
        reject(new Error('Error getting streamId: ' + (chrome.runtime.lastError?.message || 'No ID returned')))
        return
      }
      resolve(id)
    }
  )
})

Removing consumerTabId eliminated the conflict, ensuring that chrome.tabCapture.getMediaStreamId worked as expected. For anyone using this API, ensure you're familiar with the parameters you're passing to avoid similar issues. Always check the Chrome documentation for the most up-to-date information on these APIs.

here's the doc that helped me fix my issue: https://developer.chrome.com/docs/extensions/reference/api/tabCapture