尝试从屏幕+麦克风录制流时收到“DOMException：由于关闭而失败”

我正在构建一个扩展程序，它也可以记录我的屏幕和麦克风音频。

概述：

我有 content.js 尝试访问navigator.mediaDevices.getUserMedia({...接下来我向background.js发送消息，它再次尝试访问navigator.mediaDevices.getUserMedia({...我在这里录制音频流。除此之外，我还有 popup.html，其中有一个开始按钮，单击我正在录制屏幕的按钮即可。但在整个过程中我收到错误DOMException: Failed due to shutdown.

另外，我知道有人对上述错误提出了疑问（著名的错误Chrome 扩展 - getUserMedia 抛出“NotAllowedError：因关闭而失败” https://stackoverflow.com/questions/50991321/chrome-extension-getusermedia-throws-notallowederror-failed-due-to-shutdown）但对我帮助不大。

内容.js

navigator.mediaDevices.getUserMedia({
   audio: { echoCancellation: true }
   })
    .then((e) => { chrome.runtime.sendMessage({ from: 'success' })})
    .catch((e) => {console.log(e);});

背景.js

var recorder = null;
chrome.runtime.onMessage.addListener(gotMessage);

function gotMessage(message) {
   if(message.from === 'success') {
      navigator.mediaDevices.getUserMedia({
        audio: { echoCancellation: true }
      })
      .then((e) => { 
                var chunks = [];
                var options = {
                    mimeType: 'audio/webm',
                };
                recorder = new MediaRecorder(e, options);
                recorder.ondataavailable = function (event) {
                    if (event.data.size > 0) {
                        chunks.push(event.data);
                    }
                };
                recorder.onstop = function () {
                    var superBuffer = new Blob(chunks, {
                        type: 'audio/webm',
                    });

                    var url = URL.createObjectURL(superBuffer);
                };
                recorder.start();
      })
      .catch((e) => {console.log(e);});
}

弹出.js：

let btnStartTab = document.getElementById('start');
let btnStartTab1 = document.getElementById('stop');

btnStartTab.addEventListener('click', function (event) {
    chrome.runtime.sendMessage({ from: 'start' });
});

btnStartTab1.addEventListener('click', function (event) {
    chrome.runtime.sendMessage({ from: 'stop' });
});

清单.json

{
    "name": "My Recorer",
    "version": "1.0",
    "manifest_version": 2,
    "background": {
        "scripts": ["background.js"],
        "persistent": true
    },
    "browser_action": {
        "default_icon": "test.png"
    },

    "commands": {
        "run-foo": {
            "suggested_key": {
                "default": "Ctrl + Shift + Y",
                "mac": "Command+Shift+Y"
            },
            "description": "Run \"foo\" on the current page."
        },
        "_execute_action": {
            "suggested_key": {
                "default": "Ctrl + Shift + Y",
                "mac": "Command+Shift+Y"
            }
        }
    },
    "permissions": [
        "activeTab",
        "clipboardWrite",
        "declarativeContent",
        "storage",
        "tabs",
        "tabCapture",
        "desktopCapture",
        "alarms",
        "activeTab",
        "downloads",
        "<all_urls>"
    ]
}

经过深入的搜索和SO基金会的帮助，找到了一种方法，达到了分享的解决思路。

所以，我们需要明白background无法控制 DOM，这就是为什么我们需要寻求帮助contentscript.js下面的架构很重要：

• 就我而言，我正在注射contentscript.js来自manifest.json，但可以使用executescript()注入脚本。
• contentscript.js将创建一个没有显示的 iframeiframe.src = chrome.extension.getURL('audiosources.html');以上很重要！！
• Also, audiosources.html在下面web_accessible_resources在清单.json中
• 上述 HTML 的正文将包含<script src="audiosources.js"></script> only.
• audiosources.js是 oe，它将有助于消除我正在访问的错误navigator.mediaDevices.getUserMedia(...)以及所有麦克风设备。如果成功，它将发送消息至background.js.
• Now, background.js将发挥它的魔力tabCapture with navigator.mediaDevices.getUserMedia这里我们需要应用合并逻辑。