おはようございます。暑くなってきたので、息子二人をお風呂に入れるのも楽になって来ました。先日は長男に手こずらされたりしましたが。@kjunichiです。
はじめに
WebRTCでWebカメラの代わりにデスクトップキャプチャーを扱えることを知り、Atom Shellと組み合わせて前回の記事を書いたが、その際に、通常のWebページベースの方法は将来的に廃止予定とのことで、Chromeでは機能拡張を使うことでこれを実現することになるとの事だった。
そんな訳で、はじめてChromeの機能拡張を書いて試してみた。こんなことが出来るようになったのも、JavaScript修行をさせてもらっているjsdo.itのおかけだ。ありがとう！
manifest.json
{
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"name": "Desktop Capture Example",
"description": "Show desktop media picker UI",
"version": "1",
"manifest_version": 2,
"externally_connectable": {
"matches": [ "*://localhost/*" ]
},
"icons": {
"16": "icon.png",
"128": "icon.png"
},
"permissions": [
"desktopCapture"
]
}
機能拡張本体 background.js
chrome.runtime.onMessageExternal.addListener( function(request, sender, sendResponse) { console.log("Got request", request, sender); console.dir(sender.tab); chrome.desktopCapture.chooseDesktopMedia( ["screen", "window"], sender.tab, function(streamId) { sendResponse({ mediaid: streamId}); }); return true; // Preserve sendResponse for future use } );
アイコン
適当に用意する。
オレオレ機能拡張のインストール
前述の3ファイルを適当なフォルダに入れ、Chromeを立ち上げ、機能拡張の設定を開いてインストールする。
httpsでブラウザからアクセスするHTML
extIdの部分は各自の環境に合わせる必要がある。
<html>
<video id="video" autoplay></video>
<button onclick="test();">test</button>
<script>
var extId = "koappjbkidkgidchgpgcejnfjnaocgdf";
function getUserMediaError(err) {
console.log("getUserMedia() failed.");
console.dir(err);
}
function gotStream(stream) {
console.log("Received local stream");
var video = document.querySelector("video");
video.src = URL.createObjectURL(stream);
localstream = stream;
stream.onended = function() { console.log("Ended"); };
}
function test() {
chrome.runtime.sendMessage(extId, { getStream: true},
function(response) {
console.log("Response from extension: " + response);
console.dir(response);
console.log(response.mediaid);
navigator.webkitGetUserMedia({
audio:false,
video: { mandatory: { chromeMediaSource: "desktop",
chromeMediaSourceId: response.mediaid } }
}, gotStream, getUserMediaError);
});
}
</script>
</html>
動かす
httpsサーバーを起動して前述のhtmlをアクセス可能にして、Chromeで開く
注意点
httpsでindex.htmlにアクセスする必要がある。
