chrome extensionでスクリーンシェアをやってみる
Post on 09-Jul-2015
805 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
毎度おなじみ画面選択ウィンドウが表示される
以上です
top related