Help us understand the problem. What is going on with this article?

Chromeアプリ:screen shareを作りたい(エラー編)

More than 5 years have passed since last update.

chrome extensionのdesktopcaptureを使って,自分のパソコンの画面が他のパソコンの画面でも見えるような拡張機能を作りたいと思っています。

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

index.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){
            console.log(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拡張のbridge.js

bridge.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

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を使って作っています。

simanezumi1989
大学時代に微分方程式の定性的理論に関する研究が国際誌に掲載せれたことが自慢です。
http://fromalgorithm.jimdo.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away