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 getUserMedia使用HTTPS协议...

你无法播放音频桌面共享方法

更改此行audio：true

audio：false

桌面共享Chrome扩展程序会引发NavigatorUserMediaError InvalidStateError

2 个答案: