javascript - 桌面共享 Chrome 扩展程序抛出 NavigatorUserMediaError InvalidStateError

Question

我正在为桌面共享编写一个简单的 WebRTC Google Chrome 扩展程序。我尝试使用 getusermedia，但每次调用错误回调函数时返回的错误是:

NavigatorUserMediaError {constraintName: "",
                         message: "",
                         name: "InvalidStateError"} 

我的代码是这样的:

var iconPath = "images/";
var iconCapture = "player_play48.png";
var iconPause = "player_stop48.png";


window.onload = init; //all'avvio
function init() {

        localStorage["capturing"] = "off";
}


chrome.browserAction.onClicked.addListener(function(tab) {
          var currentMode = localStorage["capturing"];
          var newMode = currentMode === "on" ? "off" : "on";
          // start capture
          if (newMode === "on"){

              console.log('running');
              // NB questi messaggi saranno visualizzati sulla pagina
              // di background

              captureDesktop();

          } // stop capture
          else {

              console.log('stopped');
              // NB questi messaggi saranno visualizzati sulla pagina
              // di background
          }

          localStorage["capturing"] = newMode;
          // if capturing is now on, display pause icon -- and vice versa
          var iconFileName = newMode === "on" ? iconPause : iconCapture;
          chrome.browserAction.setIcon({path: iconPath + iconFileName});
          var title = newMode === "on" ?
                              "Click to stop capture"
                            : "Click to start capture";
          chrome.browserAction.setTitle({"title": title});
}); //fine pezzo relativo al click


function captureDesktop(){
    chrome.desktopCapture.chooseDesktopMedia(["screen", "window"],
                                             onAccessApproved);
    console.log('siamo nel captureDesktop');
}

function onAccessApproved(desktop_id) {  
    if (!desktop_id) { //se è nulla, l'utente ha rifiutato la richiesta
        alert('Desktop Capture access rejected.'); // verrà mostrato il 
                                                   // seguente messaggio e si
                                                   // esce
        return;
    }

    console.log('siamo in onAccessApproved'); 

    navigator.webkitGetUserMedia({
        audio: true,
        video: true
        }, gotStream, getUserMediaError);

    function gotStream(stream) {
        if (!stream) {
            alert('Unable to capture Desktop. Note that 
                   Chrome internal pages cannot be captured.');
            return;
        }

        console.log("Received local stream");
        //setupConnection(stream);  // chiama una funzione più giù 
                                    // passandole lo stream catturato
    }

    function getUserMediaError(e) {
        console.log(e);
        alert('getUserMediaError: ' + JSON.stringify(e, null, '---'));
    }
}

而文件 Manifest.json 是这样的:

{
  "manifest_version": 2,

  "name": "WebRTC Desktop Sharing",
  "version": "1.0",
  "description": "Chrome Extension for Desktop Sharing with WebRTC API",

  "browser_action": {
    "default_icon": "images/player_play16.png",
    "default_title" : "Play!"
  },

  "background": {
    "scripts": ["event.js"],
    "persistent": false
  },
  "icons" : {
        "16" : "images/player_play16.png",
        "22" : "images/player_play22.png",
        "29" : "images/player_play29.png",
        "32" : "images/player_play32.png",
        "48" : "images/player_play48.png",
        "128": "images/player_play128.png"
    },

  "permissions": ["desktopCapture", "activeTab", "contextMenus"]
}

非常感谢愿意帮助我的人!

Answer 1

这是三大陷阱。

一方面，您使用了错误的约束条件。您不是要屏幕，而是要常规的旧音频和视频。将您的约束更改为以下内容:

navigator.webkitGetUserMedia({
    audio: false,
    video: {
        mandatory: {
            chromeMediaSource: "desktop",
            maxWidth: 1920,
            maxHeight: 1080
        },
        optional: [{
            googTemporalLayeredScreencast: true
        }]
    }
}, gotStream, getUserMediaError);

然后确保您的站点正在使用 SSL/HTTPS，并且如果您使用的是旧版本的 Chrome，并且您已经使用 --enable-usermedia-screen-capture 标志启动了 Chrome。如果您使用的是新版 Chrome，此 flag has been removed赞成将所有屏幕共享限制为扩展。当它有疑问时，看看是否Google's own example code或 WebRTC-Experiment为你工作。 Google 的示例对我不起作用，但 WebRTC-Experiment 的示例适用。祝你好运!如果我发现其他任何东西或自己让它工作，我会发回。