chrome extensionでスクリーンシェアをやってみる
DESCRIPTION
LT資料です https://atnd.org/events/58755TRANSCRIPT
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
毎度おなじみ画面選択ウィンドウが表示される
以上です