chrome extensionのdesktopcaptureを使って，自分のパソコンの画面が他のパソコンの画面でも見えるような拡張機能を作りたいと思っています。
Chrome Extensionでスクリーンシェアをやってみる を参考資料に作ってみましたがローカル環境でも本番環境でも

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

というエラーが出ました。このエラーが何を意味しているのか，そしてどうすれば解決できるのかを知りたいです。おねがいします。

基本的な構造は
サイトの"send"をクリックしたら，

　　　サイトのjavascript=>chrome拡張のbridge.js=>background.js

の順に連絡が届きます。background.jsのchrome.desktopCapture.chooseDesktopMediaで共有画面を選択し，そのchromeMediaSourceIdを

　　　background.js=>bridge.js=>サイトのjavascript

の順番で渡します。エラーが出た場所はサイトのjavascriptのnavigator.webkitGetUserMedia()です。以下実際のコードを書きます。

サイトのhtmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
</head>
<body>
    <div id="message">send</div>
<video id="video" autoplay></video>

<script>
window.addEventListener( 'message', function ( event ){
    if ( event.data.type != 'gotStreamId' ){
        return;
    };    
    navigator.webkitGetUserMedia(
        {
            audio: false,
            video: { mandatory: {
                chromeMediaSource: "desktop",
                chromeMediaSourceId: event.data.streamid},
                optional: [{
                    googTemporalLayeredScreencast: true
                }, {
                googLeakyBucket: true
                }]
            }
        },
        function(stream){
            document.getElementById("video").src = URL.createObjectURL(stream);
        },
        function(e){
            console.error(e);
        }
    );
});

document.getElementById("message").addEventListener("click", function(){
    console.log("1")
    window.postMessage({type:"getStreamId"}, "*");
});
</script>
</body>
</html>

chrome拡張のbridg.js

var port = chrome.runtime.connect();

window.addEventListener( 'message', function ( event ){
    if ( event.source != window ){
        return;
    };
    if( event.data.type == 'getStreamId' ){
        port.postMessage('getStreamId', function(response){
            console.log(response);
        });
    }
});

port.onMessage.addListener( function( request, sender, sendResponse ){
    window.postMessage({type: 'gotStreamId', streamid: request.streamid}, '*');
});

chrome拡張機能のbackground.js

chrome.runtime.onConnect.addListener( function( port ){
    port.onMessage.addListener( function( message ){
        if(message == 'getStreamId'){
            chrome.desktopCapture.chooseDesktopMedia(["screen", "window"], function( streamId ){
                console.log(streamId);

                port.postMessage({streamid:streamId});
            });
        }
    });
});

ブラウザはmacのchromeで，sinatraを使って作っています。

※manifest.jsonファイル

{
    "name": "Screen Sharing",
    "description": "This extension allows you to share your screen",
    "version": "1.1",
    "manifest_version": 2,
    "minimum_chrome_version": "34",
    "icons": {
        "128": "logo_icon_128.png"
    },
    "background": {
        "scripts": ["background.js"]
    },
    "content_scripts": [ {
        "js": [ "bridge.js" ],
        "matches": [
            "*://localhost/*"
        ]
    }],
     "permissions": [
        "desktopCapture"
    ]
}