javascript - Desktop sharing Chrome extension throws NavigatorUserMediaError InvalidStateError - Stack Overflow

admin管理员组

文章数量:1405170

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!

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!

• javascript
• google-chrome
• google-chrome-extension
• getusermedia

Share Improve this question Follow edited Jul 21, 2015 at 12:20 Xan 77.7k1818 gold badges197197 silver badges217217 bronze badges asked Jun 1, 2014 at 17:21 user3697220user3697220 13111 gold badge22 silver badges44 bronze badges 1

• Try this: stackoverflow./questions/13076272/… – Bill Hoag Commented Jul 16, 2014 at 12:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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.

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

本文标签： javascriptDesktop sharing Chrome extension throws NavigatorUserMediaError InvalidStateErrorStack Overflow