navigator.getUserMedia is throwing error NotAllowedError: Invalid state

[Coure 2011]

Trying to create a chrome extension (manifest v.3) that can record screen. The flow is:

• Showing a record button in dialog
• Clicking a record button opens an html page in background
• html page sends request to background to show desktop selector for the active tab
• User selects the window/tab and start recording

Here is the code (https://stackblitz.com/edit/web-platform-mxfsyx?file=index.html):

But its throwing error: NotAllowedError: Invalid state

It works fine If I replace tabs[0] with sender.tab in background.js. But then it shows the desktop/window chooser on the background page which I don't want. I want to record the current active tab. I am handling it in background page so even the page is refresh/closed the video recording continues.

Also posted the question on stackoverflow (1 month ago but no answer) with code snippets https://stackoverflow.com/questions/72470401/navigator-getusermedia-is-throwing-error-notallowederror-invalid-state

thanks

C2