navigator.getUserMedia 抛出错误 NotAllowedError: Invalid state

Question

尝试创建一个可以录制屏幕的 chrome 扩展程序（manifest v.3）。流程是：

• 在弹出窗口中显示录制按钮
• 单击录制按钮会在后台打开一个 html 页面
• html 页面向后台发送请求以显示活动选项卡的桌面选择器
• 用户选择窗口/选项卡并开始录制

这里是代码（https://stackblitz.com/edit/web-platform-mxfsyx?file=index.html）：

在弹出窗口中创建了一个录制按钮

document.querySelector('#startFromBackgroundPage')
    .addEventListener('click', function(event) {
      chrome.runtime.sendMessage(
          { event: 'open-bg-page' }, function(response) { console.log(response); });
    });

背景页面

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  if (message.event === 'open-bg-page') {
    chrome.tabs.create({
      url: 'index.html',
      selected: false,
    });
  }

  if (message.event === 'record') {
    chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
      chrome.desktopCapture.chooseDesktopMedia(
          ["screen", "window"],
          tabs[0],
          function(id, options) {
            chrome.runtime.sendMessage(
              {'mediaId': id, options: options});
          });
    });
  }
});

index.html/app.js

// Send message as soon page is loaded.
setTimeout(() => {
  chrome.runtime.sendMessage(
    { event: 'record' }, function(response) { console.log(response); });
}, 500);

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  console.log('on message', message);
  if (message.mediaId) {
    setTimeout(() => {
      onAccessApproved(message.mediaId, message.options);
    }, 100);
  }
});
// Launch webkitGetUserMedia() based on selected media id.
function onAccessApproved(id, options) {
  if (!id) {
    console.log('Access rejected.');
    return;
  }

  var audioConstraint = {
      mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: id
      }
  };

  if (!options.canRequestAudioTrack)
    audioConstraint = false;

  navigator.getUserMedia({
    audio: audioConstraint,
    video: {
      mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: id,
        maxWidth:screen.width,
        maxHeight:screen.height} }
  }, gotStream, getUserMediaError);
}

function getUserMediaError(error) {
  document.querySelector('#message').innerHTML = error;
  console.log('navigator.getUserMedia() error: ', error);
}

但它的抛出错误：NotAllowedError: Invalid state

如果我在 background.js 中替换 tabs[0] with sender.tab，它工作正常。但随后它在我不想要的背景页面上显示桌面/窗口选择器。我想记录当前的活动标签。我在后台页面处理它，所以即使页面被刷新/关闭，视频录制也会继续。

Answer 1

我在使用 sender.tab 时遇到了同样的问题，请问如何解决它