Uncaught (in promise) AbortError: Error starting tab capture

[Dr. Cool]

I am trying to capture an active tab using a chrome extension. My code injects a content script into the given tab and then uses chrome.tabs to send the stream id to that content script.

I am using getUserMedia() function to capture active tab, because I couldn't use tabCapture.capture() function in manifest v3.

Of course I got streamID using tabCapture api, but only capture() function is not available in service worker...

in background.ts file, got streamID and sent to content script, and going to call getUserMedia() function using the streamID like below:

navigator.mediaDevices
    .getUserMedia({
      audio: false,
      video: {
        mandatory: {
          chromeMediaSource: "tab",
          chromeMediaSourceId: streamId
        }
      } as MediaTrackConstraints
    })
    .then((stream) => {
      console.log("stream in content script", stream)
      // Once we're here, the audio in the tab is muted
      // However, recording the audio works!
      const recorder = new MediaRecorder(stream)
      const chunks = []
      recorder.ondataavailable = (e) => {
        chunks.push(e.data)
      }
      recorder.onstop = function () {
        const blob = new Blob(chunks, { type: chunks[0].type })
        const url = URL.createObjectURL(blob)
        console.log("stream1", url)
        const a = document.createElement("a") // Create a new anchor element
        a.style.display = "none" // Hide the anchor element
        a.href = url // Set the href attribute to the Blob URL
        a.download = "recorded_video.webm"
        document.body.appendChild(a)
        a.click()
        window.URL.revokeObjectURL(url)
      }
      recorder.start()
      setTimeout(() => {
        recorder.stop()
      }, 10000)
    })


But this error: 
Uncaught (in promise) AbortError: Error starting tab capture

I am not sure why? Could you help me to solve this problem please ?