Javascript 访问Chrome扩展和使用desktopCature的网页

我正在实现一个网页，只是有一个视频播放器，需要播放用户选择的屏幕流。到目前为止，我已经实现了chrome扩展来在background.js文件上运行侦听器。然后在webpage.js上，我向chrome扩展发送一条消息，该扩展在其中运行chooseDestopMedia方法，并允许用户选择要共享的屏幕。然后background.js通过回调方法将相应的ID返回给webpage.js。该ID在webpage.js上正确接收，但一旦webpage.js运行gotStream方法，它就会抛出一个错误。到目前为止，由于某种原因，接收视频流时出现问题，我不确定原因。控制台上打印的错误为“NavigatorUserMediaError”。我已经附上下面的代码

manifest.json

{
"name": "Class Mate Manifest",
"description": "Extension that allows for user to share their screen",
"version": "1",
"manifest_version": 2,

"externally_connectable": {
"matches": [ "https://localhost/PresenterPage/presenterpage.html" ]
},
"background": {
  "scripts": ["background.js"]
},
"permissions": [
"desktopCapture",
"tabs",
"https://localhost/PresenterPage/presenterpage.html"
],
"browser_action": {
  "default_icon": "icon.png",
"default_popup": "index.html"
    }
}

webpage.js

function gotStream(stream) {
console.log("Received local stream");
var video = document.querySelector("video");
video.src = URL.createObjectURL(stream);
localstream = stream;
stream.onended = function() { console.log("Ended"); };
}

function getUserMediaError(err) {
console.log("getUserMedia() failed." + err);
}

function onAccessApproved(id) {
if (!id) {
console.log("Access rejected.");
return;
}


navigator.webkitGetUserMedia({
  audio:false,
  video:
  { 
    mandatory: 
    {
        chromeMediaSource: 'desktop', 
        chromeMediaSourceId: id 
    }
  }
}, gotStream, getUserMediaError);

}
var editorExtensionId = "phdabcobbnbidjflhchajebbldjblmjf";
chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: "yes"},onAccessApproved);

background.js

chrome.runtime.onMessageExternal.addListener(function(message, sender, sendResponse) {
console.log(sender.tab);
chrome.desktopCapture.chooseDesktopMedia(
  ["screen", "window"],
  sender.tab,
  function(id) {
  console.log(id);
    sendResponse({"id": id});
    console.log(id);
  } 
  );
  return true;
}
);

如果您读过，您就会知道，为了让选项卡访问媒体流，您需要指定在调用chooseDesktopMedia时要授予访问权限的选项卡

为了所有的好处，请确保在你允许哪个选项卡查看用户的桌面之前验证它

第2部分：

您的新代码不起作用的原因是，您对

tabs.query

返回的选项卡所做的一切都是日志记录。记录某些东西并不会神奇地使它进入代码中应该进入的位置

您需要将回调收到的选项卡传递给自己来选择EsktopMedia。实际上，这意味着将大部分代码移动到回调（或单独的函数）中

---

另外，出于安全原因，您需要正确验证该选项卡，我希望您为了简洁起见将其忽略。

我能够通过使用内容脚本解决此问题。网站、扩展和内容脚本之间的通信更加顺畅。

因此我添加了选项卡，但仍然没有成功。因此，我再次更新了代码，使用了一种更简单的方式传递选项卡。我也不知道你说的正确验证标签是什么意思。你能解释一下吗？谢谢你的帮助。这样行吗？我所说的验证标签的意思是，您现在所做的基本上是让internet上的任何网站与您的扩展进行通信。在允许整个internet访问用户桌面之前，您应该确保它是您的特定网站（它第一次显示提示，但是否有“不再询问”按钮？）直接在分机中调用

webkitGetUserMedia

而不是网页是否有帮助？抱歉，我不这样做聊天。您正在尝试从iframe访问媒体流吗？