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

Question

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

\n

概述：

\n

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

\n

另外，我知道对上述错误存在疑问（著名的Chrome 扩展 - getUserMedia 抛出“NotAllowedError：因关闭而失败”），但 \xe2\x80\x99 对我没有多大帮助。

\n

内容.js

\n

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

\n

背景.js

\n

var recorder = null;\nchrome.runtime.onMessage.addListener(gotMessage);\n\nfunction gotMessage(message) {\n   if(message.from === \'success\') {\n      navigator.mediaDevices.getUserMedia({\n        audio: { echoCancellation: true }\n      })\n      .then((e) => { \n                var chunks = [];\n                var options = {\n                    mimeType: \'audio/webm\',\n                };\n                recorder = new MediaRecorder(e, options);\n                recorder.ondataavailable = function (event) {\n                    if (event.data.size > 0) {\n                        chunks.push(event.data);\n                    }\n                };\n                recorder.onstop = function () {\n                    var superBuffer = new Blob(chunks, {\n                        type: \'audio/webm\',\n                    });\n\n                    var url = URL.createObjectURL(superBuffer);\n                };\n                recorder.start();\n      })\n      .catch((e) => {console.log(e);});\n}\n\n

\n

弹出.js：

\n

let btnStartTab = document.getElementById(\'start\');\nlet btnStartTab1 = document.getElementById(\'stop\');\n\nbtnStartTab.addEventListener(\'click\', function (event) {\n    chrome.runtime.sendMessage({ from: \'start\' });\n});\n\nbtnStartTab1.addEventListener(\'click\', function (event) {\n    chrome.runtime.sendMessage({ from: \'stop\' });\n});\n\n

\n

清单.json

\n

{\n    "name": "My Recorer",\n    "version": "1.0",\n    "manifest_version": 2,\n    "background": {\n        "scripts": ["background.js"],\n        "persistent": true\n    },\n    "browser_action": {\n        "default_icon": "test.png"\n    },\n\n    "commands": {\n        "run-foo": {\n            "suggested_key": {\n                "default": "Ctrl + Shift + Y",\n                "mac": "Command+Shift+Y"\n            },\n            "description": "Run \\"foo\\" on the current page."\n        },\n        "_execute_action": {\n            "suggested_key": {\n                "default": "Ctrl + Shift + Y",\n                "mac": "Command+Shift+Y"\n            }\n        }\n    },\n    "permissions": [\n        "activeTab",\n        "clipboardWrite",\n        "declarativeContent",\n        "storage",\n        "tabs",\n        "tabCapture",\n        "desktopCapture",\n        "alarms",\n        "activeTab",\n        "downloads",\n        "<all_urls>"\n    ]\n}\n\n\n

\n

Answer 1

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

\n

因此，我们需要了解backgroundxe2x80x99 无法控制 DOM，这就是为什么我们需要从contentscript.js以下架构中获取帮助，这一点很重要：

\n

\n

\n
• 就我而言，我contentscript.js从 manifest.json 注入，但可以用来executescript()注入脚本。
\n
• contentscript.js将创建一个带有显示的 iframe，iframe.src = chrome.extension.getURL(\'audiosources.html\');上面的内容都不重要！
\n
• 另外，在manifest.jsonaudiosources.html下web_accessible_resources
\n
• 上面的 HTML 正文只有<script src="audiosources.js"></script>。
\n
• audiosources.js是 oe，它将有助于消除这里的错误，我可以访问navigator.mediaDevices.getUserMedia(...)所有麦克风设备。如果成功，它将向 发送消息background.js。
\n
• 现在，将发挥withbackground.js的魔力，在这里我们需要应用合并逻辑。tabCapturenavigator.mediaDevices.getUserMedia
\n

\n