How to use Media Stream ID in a webpage iframe?

[Luke Stead]

I'm trying to embed my tab recording website as an iframe in a chrome extension side panel using this guide.

I'm using the chrome.tabCapture.getMediaStreamId method, but when passing the streamId to the iframe and using it as below results in the following error: AbortError - Error starting tab capture.

await navigator.mediaDevices.getUserMedia({

      audio: {
        mandatory: {
          chromeMediaSource: "tab",
          chromeMediaSourceId: message.data,
        },
      },
      video: {
        mandatory: {
          chromeMediaSource: "tab",
          chromeMediaSourceId: message.data,
        },
      },
    });

The usage restrictions here suggests that what I'm trying to do is not possible because my iframe/side panel does not have a tabId associated with it, and because the iframe does not have the same security origin as the extension. I've tried adding a matching host_permission, but that has had no effect. If I instead open my website as a separate tab, then I can use the tabId to obtain a streamId and successfully start recording in the new tab.

Is there anything I can do to make the side panel iframe work? Thanks in advance.

[Luke Stead]

I managed to work around this by using the chrome.tabCapture.capture() method in the extension, and then sending the MediaStream to the iframe using an RTCPeerConnection.