Chromeアプリ：screen shareを作りたい（DesktopCapture編）

chromeアプリのscreen shareでよく使われるDesktopCaptureについてメモメモ

とりあえず既にあるものを見てみる。

chrome extensions samples の desktopcaptureからファイルを取得

前回の記事と同じようにchromeの拡張機能に読み込ませて実行すれば使える。

chromeアプリ：アイコンをクリックしたら表示されるアプリ

今日のテーマ：アイコンから実行できるように改良する

1.アイコンから実行できるようにmanifest.jsonに
browser_actionを追加する。またbackgroundも変更する。

manifest.json

{
  "name": "sample app",
  "description": "sample app",
  "version": "0.1",
  "manifest_version": 2,
  "icons": {
    "16": "icon.png",
    "128": "icon.png"
  },
    "background": {
      "scripts": ["background.js"]
  },
  "permissions": [
    "desktopCapture"
  ],
  "browser_action": {
  }
}

2.アイコンがクリックされたら実行される命令をbackground.jsに書く。

background.js

chrome.browserAction.onClicked.addListener(function(){
    chrome.windows.create({
        url: "index.html",
        focused: true,
        type: "popup"
    });
});

クリックされた時，index.htmlに基づいてページが作られる。


3.index.htmlを作る
startボタンを押せば，共有画面選択ページが開き，選択するとhtmlに共有画面が出力されるものを作る。
つまりhtmlではstartボタンとvideoがあればよいので以下のようになる。

index.html

<video id="video" autoplay></video>

<button id="start">Start</button>
<script src="app.js"></script>

ただし，app.jsはstartボタンを押した時のイベントコードが記述されるjsファイルである。


4.app.jsを作る
startボタンをクリックしたら発動する命令は

document.getElementById("start").addEventListener("click", function(e){///}

となる。また共有画面選択ページを表示する命令は

chrome.desktopCapture.chooseDesktopMedia(
        ["screen", "window"], function(streamId) {///選択した画面のIdをstreamIdとして取得している///},エラーのときに実行される関数)

となる。このstreamIdをつかってvideoに情報を渡す。

navigator.webkitGetUserMedia(
{音声：なし，画像：streamIdの情報},
function(stream){id="video"のsrcにstreamで作ったURLをわたす},
エラーのときに実行される);

このときstreamは{音声：なし，画像：streamIdの情報}からの情報を受け取っている。

まとめると

app.js

document.getElementById("start").addEventListener("click", function(e){
    chrome.desktopCapture.chooseDesktopMedia(
        ["screen", "window"], function(streamId) {
            navigator.webkitGetUserMedia(
                {
                    audio: false,
                    video: { mandatory: {
                        chromeMediaSource: "desktop",
                        chromeMediaSourceId: streamId
                        }
                    }
                },
                function(stream){
                    document.getElementById("video").src = URL.createObjectURL(stream);
                },
                function(){alert("error")}
            );  
        }
    );
});

となる。