Desktop sharing Chrome extension throws NavigatorUserMediaError InvalidStateError

Question

I'm writing a simple WebRTC Google Chrome extension for desktop sharing. I tried to use getusermedia, but every time the error callback function was called and this is the error returned:

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

My code is this:

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, '---'));
    }
}

while file Manifest.json is this:

{
  "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"]
}

Thanks a lot to who will help me!

Answer 1

These are the big three gotchas.

You're using the wrong constraints, for one thing. You're not asking for a screen, you're asking for regular old audio and video. Change your constraints to the following:

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

Then make sure your site is using SSL/HTTPS and that you have started Chrome with the --enable-usermedia-screen-capture flag, if you are using an old version of Chrome. If you are using a new version of Chrome, this flag has been removed in favor of limiting all screensharing to extensions. When it doubt, see if Google's own example code or WebRTC-Experiment works for you. Google's example does not work for me, but WebRTC-Experiment's does. Good luck! I'll post back if I find anything else or get it working myself.

Answer 2

Do you have an SSL certificate on your page? It is broadcast on the page needs to be able to use HTTPS protocol for your Chrome getUserMedia ...

And you cant broadcast audio desktop sharing method

change this line audio:true

audio:false