getUserMedia media streams capturing issue in MV3 (chrome extension) with respect to constraints

Bug Description

When using the getUserMedia API in Chrome to capture audio from specific Chrome tabs using the chromeMediaSource and chromeMediaSourceId constraints, the API is not behaving consistently. The issue manifests as the error "Uncaught (in promise) DOMException: Invalid state error."

To Reproduce

Steps to reproduce the behavior:

Get the streamId from the desktopCapture API

chrome.desktopCapture.chooseDesktopMedia(
      ["tab", "audio"],
      tab,
      (streamId, options) => {});

Here, tab` argument consists of the tab info

Use the getUserMedia API to get the streams

navigator.mediaDevices.getUserMedia({
  audio: {
    mandatory: {
      chromeMediaSource: "desktop",
      chromeMediaSourceId: streamId,
    },
  },
  video: {
    optional: [],
    mandatory: {
      chromeMediaSource: "desktop",
      chromeMediaSourceId: streamId,
    },
  },
}).then((streams)=>{});

Here, the "Uncaught (in promise) DOMException: Invalid state error." will occur

Expected behavior

The getUserMedia API should consistently capture audio from Chrome tabs using the specified chromeMediaSource and chromeMediaSourceId constraints without resulting in an "Invalid state error."

Screenshots

These are the expected beahavior :

Desktop

OS : iOS Browser : chrome Version : 119.0.6045.199 Additional context I am working on the chrome extension (Manifest Version-3) so using the getUserMedia API to get the streams from the particular streamId and as mentioned above facing the Issues while capturing the media.

For reference use the below doc for more info on the errors for the different constraints of the getUserMedia API tried getUserMedia-DOC

w3c / mediacapture-screen-share