Chrome Extensionでスクリーンシェアをやってみる

WebRTC Meetup Tokyo #5

https://atnd.org/events/58755

自己紹介

• なかゆうすけ（Twitter : @Tukimikage）

所属

– NTTコミュニケーションズ 技術開発部

オフィシャルワーク

– HTML5 Experts.jp（HTML5 Experts Works） 副編集長

– WebRTC開発者向けフレームワーク「SkyWay」の開発

コミュニティワーク

– html5j 自動車部部長

– html5j エンタープライズ部スタッフ

スクリーンシェア

• Chrome M36（だっけな）からJSのみでは利用できなくなりました

• ChromeだとExtensionやAppsを別途用意する必要あり

Chrome Extension作ってみました

Demo

仕組み

ExtensionBackground.js

ExtensionBridge.js

ScreenShare.jsWebApp

1.スクリーンくれ！

postMessage

4.StreamIDとったどー5. ほいさっ！6. getUserMediaストリームゲット！

7. ストリームを表示

フロントのJavaScriptとExtensionとのやりとりの方法は詳しくないので、もっとスマートなやり方があれば教えて下さい。

2.StreamIDくれ！ 3. StreamIDくれ！

postMessage

ScreenShare.js

getUserMediaのOptions

maxWidth、maxHeight、maxFrameRateはオプション

Bridge.js

Background.js

重要な部分はこちhttps://developer.chrome.com/extensions/desktopCapture#type-DesktopCaptureSourceType

・SourceTypeには screenとwindowが利用可能（2014/11/26現在）・Cancelした場合の処理も実装する必要あり

chrome.desktopCapture

毎度おなじみ画面選択ウィンドウが表示される

以上です