Question

我正在实施一个网页，其中只有一个视频播放器需要播放用户所选屏幕的流。到目前为止，我已经实现了chrome扩展，以在background.js文件上运行Listener。然后在webpage.js上我向chrome扩展发送一条消息，然后扩展然后运行chooseDestopMedia方法并允许用户选择要共享的屏幕。然后background.js通过回调方法将相应的ID返回给webpage.js。在webpage.js上正确接收到ID，但是一旦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;
}
);

Answer 1

如果您已阅读the documentation，您就会知道，为了让标签能够访问媒体流，您需要在调用chooseDesktopMedia时指定要授予访问权限的标签。

请为所有有益的事情做好准备，确保在执行此操作之前验证哪个标签要求查看用户的桌面。

第2部分：

您的新代码无法正常工作的原因是您对tabs.query返回的标签的所有操作都在记录。记录某些内容并不会让它进入代码所应该去的位置。

您需要将回调收到的标签传递给chooseDesktopMedia。实际上，这意味着将大部分代码移动到回调（或单独的函数）中。

另外，出于安全原因，您需要正确验证选项卡，我希望您为了简洁而将其留下。

Answer 2

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

网页访问Chrome扩展程序并使用desktopCature

2 个答案: