Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Chrome Extensionで 
スクリーンシェアをやってみる 
WebRTC Meetup Tokyo #5 
https://atnd.org/events/58755
自己紹介 
• なかゆうすけ(Twitter : @Tukimikage) 
 所属 
– NTTコミュニケーションズ技術開発部 
 オフィシャルワーク 
– HTML5 Experts.jp(HTML5 Experts Works) 副編...
スクリーンシェア 
• Chrome M36(だっけな)からJSのみでは利用 
できなくなりました 
• ChromeだとExtensionやAppsを別途用意する 
必要あり
Chrome Extension作ってみました
Demo
仕組み 
Extension 
Background.js 
2.StreamIDくれ! 3. StreamIDくれ! 
Extension 
Bridge.js 
1.スクリーンくれ! 
WebApp ScreenShare.js 
post...
ScreenShare.js
getUserMediaのOptions 
maxWidth、maxHeight、maxFrameRateはオプション
Bridge.js
Background.js 
重要な部分はこち 
https://developer.chrome.com/extensions/desktopCapture#type-DesktopCaptureSourceType 
・SourceType...
chrome.desktopCapture 
毎度おなじみ画面選択ウィンドウが表示される
以上です
Upcoming SlideShare
Loading in …5
×

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

3,108 views

Published on

LT資料です
https://atnd.org/events/58755

Published in: Internet
  • Be the first to comment

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

  1. 1. Chrome Extensionで スクリーンシェアをやってみる WebRTC Meetup Tokyo #5 https://atnd.org/events/58755
  2. 2. 自己紹介 • なかゆうすけ(Twitter : @Tukimikage)  所属 – NTTコミュニケーションズ技術開発部  オフィシャルワーク – HTML5 Experts.jp(HTML5 Experts Works) 副編集長 – WebRTC開発者向けフレームワーク「SkyWay」の開発  コミュニティワーク – html5j 自動車部部長 – html5j エンタープライズ部スタッフ
  3. 3. スクリーンシェア • Chrome M36(だっけな)からJSのみでは利用 できなくなりました • ChromeだとExtensionやAppsを別途用意する 必要あり
  4. 4. Chrome Extension作ってみました
  5. 5. Demo
  6. 6. 仕組み Extension Background.js 2.StreamIDくれ! 3. StreamIDくれ! Extension Bridge.js 1.スクリーンくれ! WebApp ScreenShare.js post Message post Message 6. getUserMedia 5. ほいさっ! 4.StreamIDとったどー ストリームゲット! 7. ストリームを表示 フロントのJavaScriptとExtensionとのやりとりの方法は詳しくないので、 もっとスマートなやり方があれば教えて下さい。
  7. 7. ScreenShare.js
  8. 8. getUserMediaのOptions maxWidth、maxHeight、maxFrameRateはオプション
  9. 9. Bridge.js
  10. 10. Background.js 重要な部分はこち https://developer.chrome.com/extensions/desktopCapture#type-DesktopCaptureSourceType ・SourceTypeにはscreenとwindowが利用可能(2014/11/26現在) ・Cancelした場合の処理も実装する必要あり
  11. 11. chrome.desktopCapture 毎度おなじみ画面選択ウィンドウが表示される
  12. 12. 以上です

×