尝试从屏幕+麦克风录制流时出现“DOMException：因关机而失败”

Posted 2023-04-24

【中文标题】尝试从屏幕+麦克风录制流时出现“DOMException：因关机而失败”

【英文标题】：getting `DOMException: Failed due to shutdown` when trying to record stream from screen+microphone

【发布时间】：2021-10-30 20:06:44

【问题描述】：

我正在构建一个扩展程序来记录我的屏幕和麦克风音频。

概述：

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

另外，我知道有关于上述错误的问题（著名的Chrome Extension - getUserMedia throws "NotAllowedError: Failed due to shutdown"）但对我没有多大帮助。

content.js

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

Background.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););

popup.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' );
);

ma​​nifest.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>"
    ]

【问题讨论】：

哪个脚本抛出错误？你可以发布你的弹出JS吗？旁注：最好放弃 Chrome 扩展并改为构建 standards extension（这也适用于 Chrome）

@Mitya，我已经更新了上面的帖子及其给出错误的 background.js。

您的内容脚本是如何加载的？通过清单还是通过注入？如果是后者，能不能展示一下代码？

您需要通过executeScript() 注入您的内容脚本（请求权限的脚本），正如我所说的。如果您这样做，而不是通过清单加载它，它将在扩展程序的上下文中运行，而不是当前页面。从这一点来看，我只能建议你研究一下我的 screenrock.com 扩展背后的代码，看看它是如何工作的。

meet.google.com，嗯？这是一个使用 getUserMedia 和 getDisplay 媒体本身的网络应用程序。您需要排除您的网络扩展程序与meet 中的代码之间的冲突。

【参考方案1】：

经过 SO 基金会的深入搜索和帮助，找到了一种方法来达成共享的解决方案。

所以，我们需要了解 background 无法控制 DOM，这就是为什么我们需要从 contentscript.js 那里获得帮助，以下架构很重要：

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

【讨论】：

谢谢！！！！！！！！！！！！！！！！！！