6091


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

> 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ファイル

[code]

    <!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>
    
[/code]

chrome拡張のbridg.js

[code]

    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}, '*');
    });
    
[/code]

chrome拡張機能のbackground.js

[code]

    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});
                });
            }
        });
    });
    
[/code]

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

※manifest.jsonファイル

[code]

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


CC BY-SA 3.0
2015-02-06T22:39:51.917
6074
2015-02-08T22:29:13.727
2015-02-08T19:21:28.020
8100
8100
question
google-chrome
chrome extensionを使ってscreenshareをしたい


考えられる原因が多すぎますので、私としては推測するしかありませんが、まずは、コード中の

[code]

    chromeMediaSource: "desktop",
    chromeMediaSourceId: event.data.streamid},
    
[/code]

の `event.data.streamid`
にきちんと値が入っているかを確かめてください。また、テストするときに、ローカルサーバであっても、リモートサーバであっても、 SSL
通信を使うようにしてください。

`manifest.json` の設定もとくにパーミッションについて注意して見直してください。

* * *

**追記:** (2/9)

ソースを見直したら見落としていたところがありました。２つ気になるところを挙げます。

_manifest.json_ :

[code]

    "content_scripts": [ {
        "js": [ "bridge.js" ],
        "all_frames": true,
        "run_at": "document_start",
    ...
    
[/code]

として、 Chrome Extension 中の

_background.js_ : (old)

[code]

    chrome.desktopCapture.chooseDesktopMedia(["screen", "window"], function( streamId ){
    
[/code]

となっているところを、

_background.js_ : (new)

[code]

    chrome.desktopCapture.chooseDesktopMedia(["screen", "window"], port.sender.tab, function( streamId ){
    
[/code]

にしてから chrome 拡張をリロードしてください。 `port.sender.tab,`
が追加点。エラー内容と発生箇所が変わるようであったら先に進めます。


CC BY-SA 3.0
2015-02-07T07:57:05.180
6091
2015-02-08T22:29:13.727
2015-02-08T22:29:13.727
4978
4978
6074
answer