javascript - 访问Chrome扩展并使用desktopCature的网页

Question

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

list .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"
    }
}

网页.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);

背景.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;
}
);

Answer 1

如果您已阅读 the documentation ，您会知道，为了让选项卡访问媒体流，您需要在调用 ChooseDesktopMedia 时指定要授予访问权限的选项卡。

出于对所有美好事物的热爱，请确保在允许它执行此操作之前验证哪个选项卡要求查看用户的桌面。

第 2 部分:

您的新代码不起作用的原因是您对 tabs.query 返回的选项卡所做的所有操作都是记录日志。记录某些内容并不会神奇地使其进入代码中应该进入的位置。

您需要将回调收到的选项卡传递给自己的chooseDesktopMedia。实际上，这意味着将大部分代码移至回调(或单独的函数)内。

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