Web rtcの使い方

4,207 views

Published on

Published in: Technology, Business
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,207
On SlideShare
0
From Embeds
0
Number of Embeds
142
Actions
Shares
0
Downloads
32
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Web rtcの使い方

  1. 1. Copyright © NTT Communications Corporation. All right reserved. WebRTCを使って復興支援アプリを作ろう ~WebRTC ハッカソン~ WebRTCについての解説 NTTコミュニケーションズ株式会社 先端IPアーキテクチャセンタ WebコアTechnical Unit 小松健作 2014年6月7日
  2. 2. Copyright © NTT Communications Corporation. All right reserved. 自己紹介 名前:小松健作 所属:NTT communications HTML5の研究開発 標準化活動(W3C) HTML5の啓蒙・コミュニティ運営 Google Developer Expert (HTML5)
  3. 3. 3Copyright © NTT Communications Corporation. All right reserved. WebRTCとは?
  4. 4. 4Copyright © NTT Communications Corporation. All right reserved. ブラウザで p2p での テレビ電話やファイル交換などを 可能にする技術
  5. 5. Copyright © NTT Communications Corporation. All right reserved. WebRTCとは  ブラウザでカメラとマイク、音声と映像を扱える。  ブラウザ間の直接通信、リアルタイム通信が可能になる。  情報が分散型へシフトする。 5 従来のWeb WebRTC カメラやマイ クを利用可 リアルタイ ムに送受信 ブラウザ間 の直接通信 サーバ⇔ク ライアント 間の通信 リクエストと レスポンスの 繰り返し カメラやマイ クの利用不可
  6. 6. Copyright © NTT Communications Corporation. All right reserved. WebRTC Reference App 6 https://apprtc.appspot.com/
  7. 7. Copyright © NTT Communications Corporation. All right reserved. YouTubeと組み合わせたり 7 https://chat.skyway.io/
  8. 8. Copyright © NTT Communications Corporation. All right reserved. Chromecast 8 http://www.google.com/intl/ja_ALL/chrome/devices/chromecast /
  9. 9. Copyright © NTT Communications Corporation. All right reserved. Chromecast (cont.) 9 Home Network 再生指示 via WebRTC Movie file via HTTP Web of Things
  10. 10. Copyright © NTT Communications Corporation. All right reserved. Platform としての WebRTC 10 専用 アプリ 専用 アプリ 専用 ハード 専用 アプリ 専用 ハード ブラウザ ブラウザ ここが共通化・ 標準化されるだけで、 相当嬉しい
  11. 11. Copyright © NTT Communications Corporation. All right reserved. WebRTC SDK, libraries for other env. 11 http://tokbox.com/opentok http://js-platform.github.io/node-webrtc/ https://github.com/alongubkin/phonertc http://www.webrtc.org/reference/native-apis
  12. 12. 12Copyright © NTT Communications Corporation. All right reserved. SkyWayの概要 SkyWayを使えば簡単に WebRTCのアプリを開発できる
  13. 13. Copyright © NTT Communications Corporation. All right reserved. SkyWayの概要 13 WebRTC利用アプリを簡単に開発できるクラウド基盤  2013年12月5日に提供開始  社外の約600名以上の 開発者が利用している  提供内容 • シグナリング等のAPI • ライブラリ • サンプルアプリ • ドキュメント
  14. 14. Copyright © NTT Communications Corporation. All right reserved. WebRTCはWeb開発者にとって難しい技術 14 ブラウザ間で直接通信する前に、サーバ経由で「シグナリング」を 行う必要があり、実装にはネットワークの知識が必要。 14ようやく直接通信できる これらの通信が 完了してから…
  15. 15. Copyright © NTT Communications Corporation. All right reserved. SkyWayの特徴 15 SkyWayのシグナリングAPIとライブラリが複雑な処理を担うので、 開発者は簡単にWebRTC利用アプリを開発できる。 STUN API Signaling API STUN API ライブラリ ライブラリ APIとライブ ラリが複雑な 処理を担う
  16. 16. Copyright © NTT Communications Corporation. All right reserved. まず、localにWebサーバーをたてる  一番簡単なのは、 • $ python –m SimpleHTTPServer • あとは、apacheとか、nginxとか、expressとかsinatraとか やり方は色々(なんでもいいです) 16
  17. 17. Copyright © NTT Communications Corporation. All right reserved. HTMLにライブラリをカキコ <!doctype html> <html> <head> … <script src="https://skyway.io/dist/0.3/peer.min.js"></script> … </head> <body> … </body> </html> 17
  18. 18. Copyright © NTT Communications Corporation. All right reserved. SkyWayのブローカーサーバーに繋げる var peer = new Peer({key: 'APIKEY'}); peer.on(‘open’, function(id){ // これが自分のIDになる <= 重要 }); 今回のイベント用のAPIKEYは http://goo.gl/26aMKE にあります。 18 caller callee ID ID
  19. 19. Copyright © NTT Communications Corporation. All right reserved. ローカルの映像取り込んで、相手に送信 navigator.webkitGetUserMedia({video:true, audio:true}, function(stream) { // stream が映像・音声データを管理するStreamObject var call = peer.call(‘destination-id’, stream); }, function(err) { // 映像取得エラー }); 19 caller callee
  20. 20. Copyright © NTT Communications Corporation. All right reserved. 受信側でAnswer peer.on(‘call’, function(call) { call.answer(stream); }); 20 caller callee
  21. 21. Copyright © NTT Communications Corporation. All right reserved. Call – Answerが終わったら映像受信処理 call.on(‘stream’, function(stream) { var url = window.URL.createObjectURL(stream); $(“#you”).attr(“src”, url); $(“#you”)[0].play(); }); 21 caller callee
  22. 22. Copyright © NTT Communications Corporation. All right reserved. document http://nttcom.github.io/skyway/docs/ 22
  23. 23. Copyright © NTT Communications Corporation. All right reserved. Sample source 23 http://cdn.peerjs.com/demo/videoch at/ https://github.com/nttcom/peerjs/tre e/master/examples/videochat
  24. 24. 24Copyright © NTT Communications Corporation. All right reserved. Thank you!! 24

×