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

Question

I am implementing a webpage that simply has a video player that needs to play the stream of the users selected screen. So far I have implemented the chrome extension to run a Listener on the background.js file. Then on the webpage.js I send a message to the chrome extension in which the extension then runs the chooseDestopMedia method and allows the user to select which screen to share. The background.js then returns the corresponding ID to webpage.js via the callback method. The ID is received properly on webpage.js, but once the webpage.js runs the gotStream method it throws an error. So far some reason there is a problem receiving the video stream and I am not sure why. The error that is printed on the console is "NavigatorUserMediaError". I have attached the code below...

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

If you had read the documentation , you would know that in order for a tab to access the media stream, you need to specify which tab you want to give access to when calling chooseDesktopMedia.

And please for the love of all that is good make sure you validate which tab is asking to see the user's desktop before you let it do that.

Part 2 :

The reason your new code doesn't work is that all you're doing with the tabs returned by tabs.query is logging then. Logging something does not magically make it go into the place in the code where it's supposed to go.

You need to pass the tab received by the callback to chooseDesktopMedia yourself. In practice this means moving most of your code inside the callback (or a separate function).

Plus you need to validate the tab properly for security reasons, I hope you left that out for brevity.

Answer 2

I was able to solve this problem by using a content script. The communication between the website, extension, and content-script is much smoother.