桌面共享 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);

如果您使用的是旧版 Chrome，请确保您的网站使用 SSL/HTTPS，并且您已使用 --enable-usermedia-screen-capture 标志启动 Chrome。如果您使用的是新版本的 Chrome，请flag has been removed 支持将所有屏幕共享限制为扩展程序。如有疑问，请查看 Google's own example code 或 WebRTC-Experiment 是否适合您。谷歌的例子对我不起作用，但 WebRTC-Experiment 的例子对我有用。祝你好运！如果我发现任何其他内容或让我自己工作，我会回复。

Answer 2

您的页面上有 SSL 证书吗？它在页面上广播需要能够为您的 Chrome 使用 HTTPS 协议 getUserMedia ...

而且你不能广播音频桌面分享方法

更改此行音频：true

音频：假