HTML5によるリアルタイムコミュニケーション WebRTCの概説

3,221 views

Published on

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,221
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
27
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

HTML5によるリアルタイムコミュニケーション WebRTCの概説

  1. 1. HTML5による リアルタイムコミュニケーション WebRTCの概説 2014/03/10 WebRTC活用セミナー http://www.ntt-at.co.jp/eventseminar/seminar/2013/detail/s_20140310/ 金城 雄 NTTアドバンステクノロジ 情報機器テクノロジセンタ所属 http://www.ntt-at.co.jp/ http://www.slideshare.net/You_Kinjoh/html5-real-timecommunicationwebrtc
  2. 2. gihyo.jp Jettyで始める WebSocket超入門 自己紹介 きんじょう ゆう 金城 雄 NTTアドバンステクノロジ NTT-AT アプリケーションソリューション事業本部 情報機器テクノロジセンタ所属 http://gihyo.jp/dev/feature/01/websocket
  3. 3. 内容 HTML5の概要 WebRTC
  4. 4. 内容 HTML5の概要 WebSocket <-避けて通れないため WebRTC
  5. 5. 途中、皆さまに参加して頂けるデモが 2つあります。 是非参加をお願いします。 後程URLを表示します。 デモ参加のお願い IN FO R M A T IO N IN FO R M A T IO N
  6. 6. WebSocketのデモです。 スマートフォンをご準備下さい。 参加型デモ1 IN FO R M A T IO N IN FO R M A T IO N iOS Safari Android Chrome Firefox Opera
  7. 7. WebRTCのデモです。 カメラ付きの端末でお願いします。 参加型デモ2 IN FO R M A T IO N IN FO R M A T IO N Android パソコン Chrome Firefox
  8. 8. http://www.w3.org/html/logo/
  9. 9. HTML5の 機能一覧が 何度か出てきますが 全ての機能を 網羅していません。 新しい仕様が今も増え続けています。 C A U T IO N C A U T IO N
  10. 10. 狭義のHTML5 と 広義のHTML5
  11. 11. HTML5 = HTML5 + CSS + JS
  12. 12. HTML5 = HTML5 + CSS + JS 広義 狭義
  13. 13. HTML5 = HTML5 + CSS + JS 広義 狭義 マークアップ言語の仕様 従来のHTMLの改訂 新しいAPIも含まれる バズワード(マーケティング用語)
  14. 14. Semantic Elements Multi Media Canvas HTML5 Forms Offline Support Webm H.264 Micro- Data WebGL Web SQL Indexed DB SVG Server- Sent ev. Web Sockets Web Sockets Geo- location FileAPI Web Storage XHR2 Math ML Web Audio Layout Media Queries HTML5 CSS3~Trans form Anim ation Regions Flex Box HTML5 Parser Mouse, Key ev. Opus ECMA Script ECMA 6th USB CSP SPDY WebCL Web RTC Net Info MP3 Device Storage TCP Socket NFC File Sys Notifi- cation XHTML5 Orien- tation Web Workers Web Messag- ing DOM4 SMIL Vibra- tion Proxi- mity XPath RSS RDF OGP Schema .org WAI- ARIA W3C WHATWG other Khronos ECMA IETF WOFF Battery Status Radio Tel HTML DNT http://www.slideshare.net/dynamis/toward-firefox-os/26 より引用
  15. 15. http://www.slideshare.net/dynamis/toward-firefox-os/22 より引用 Semantic Elements Multi Media HTML5 Forms Offline SupportHTML5HTML5 Parser Mouse, Key ev. XHTML5 WAI- ARIA W3C
  16. 16. http://platform.html5.org/ より引用 (2013/04/04 版)
  17. 17. http://platform.html5.org/ より引用 (2013/04/04 版)
  18. 18. HTML5 = HTML5 + CSS + JS 本日のコンテキスト これ
  19. 19. で、HTML5で 何ができるように なるの?
  20. 20. できることは これまでと 変わらない
  21. 21. これまで ブラウザで できなかったことが できるようになる だけ
  22. 22. 元々はWeb Pageを 閲覧するためのものだった ブラウザで、 Web Applicationを 実行できるように するために、 必要なものを追加
  23. 23. http://platform.html5.org/ より引用 (2013/04/04 版)
  24. 24. 機能一覧には 現れない HTML5の特徴
  25. 25. HTML5 OSの機能がブラウザ上で使える 低レイヤーのAPIがWeb APIで共通化 特許に制限されない 誰もが利用可能 Webプラットフォーム上で統合
  26. 26. OSの機能をWebに OSの機能が、ブラウザを介してサイト に提供される アドレス帳 ネットワーク情報 バッテリー状態 通知 ストリーム メディアデータ オーディオ ビデオ 字幕 Webカメラ マイク Audioの波形操作 2D(ラスター,ベクター) 3DCG 音声入力 音声合成 暗号化 ファイルシステム データベース スレッド 通信(WebSocket,TCP,UDP) Bluetooth 加速度センサ 傾きセンサ ジャイロ バイブレーション GPS 電子コンパス 温度センサ 湿度センサ 気圧センサ 環境光センサ 近接センサ 磁気センサ etc. ネット接続が前提のもの・仕様策定中のもの・WebOS向けのものも含まれています。
  27. 27. Web APIで共通化 低レイヤーのAPIがWeb APIで共通化 される OSに非依存 実行環境に基本的に非依存 環境による制限はありえる センサ未搭載・端末性能等の理由や用途による理由(例:電子書籍)等が 制限として考えられます。
  28. 28. 特許に制限されない Openであることが特徴 パテント・フリー ロイヤリティ・フリー いわゆる業界団体よりもオープン 仕様だけでなく策定過程も公開 特定の組織の利益よりも人類の利益を 市場原理に左右される側面もあり。理想と現実は違う...。
  29. 29. 誰もが利用可能 世界中の誰もが利用可能な機能 限られた組織の限られた人しか使えな い仕様はオープンではない 今も100年後も自由に使えるように... 「古文書の一部が、DRMで保護され ていて見られない」のない未来に(電 子書籍の仕様にも関連しているため) DRMについての議論が始まったそうです。
  30. 30. Web P/F上で統合 これら全てが、OpenWebプラットフ ォーム上で統合 アイディア次第で新しい物が誰にでも 日曜プログラミングで音声合成 夏休みの宿題でビデオチャット作成 これらの知見はWeb上に蓄積
  31. 31. WebSocket
  32. 32. WebSocket 高速・双方向通信が可能 TCPに似ている WebRTCとの関係 シグナリングによく使われる
  33. 33. DEMO
  34. 34. デモ iOS Safari Android Chrome Firefox Opera https://github.com/youkinjoh/color-monoliths
  35. 35. Browser 加速度センサ smartphone server Browser WebGL computer WebSocket Server WebSocket WebSocket
  36. 36. WebRTC
  37. 37. WebRTC リアルタイムコミュニケーションのAPI ボイス・ビデオチャット P2P
  38. 38. http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 より引用
  39. 39. キャリア型通信 手段の例 市場 ユーザ メリット 事業者 メリット 利用方法 固定電話 携帯電話 (TV放送) インフラを持つキャリアが支配 世界中の人と会話できる × 単独で利用 http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用
  40. 40. Over The Top 手段の例 市場 ユーザ メリット 事業者 メリット 利用方法 Skype, WebEx (YouTube, Ustream) キャリアに縛られない独自の仕組みを 提供する少数のベンダーが参加可能 世界中の人と無料/安価で会話できる 限定的なAPI提供 一部連携可能 ユーザが組み合わせて利用 http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用
  41. 41. Webブラウザ型 手段の例 市場 ユーザ メリット 事業者 メリット 利用方法 WebRTC 特別な仕組みは不要 誰でも参加可能 専用アプリ無しで会話できる 完全にプログラマブル部品として 利用可能 製品/サービスに組み込んで利用 http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用
  42. 42. キャリア型通信 Over The Top Webブラウザ型 手段の例 市場 ユーザ メリット 事業者 メリット 利用方法 固定電話 携帯電話 (TV放送) Skype, WebEx (Youtube, Ustream) WebRTC インフラを持つ キャリアが支配 キャリアに縛られない 独自の仕組みを提供 する少数のベンダー が参加可能 特別な仕組みは不要 誰でも参加可能 世界中の人と 会話できる 世界中の人と無料/ 安価で会話できる 専用アプリ無しで 会話できる × 限定的なAPI提供 一部連携可能 完全にプログラマブル 部品として利用可能 単独で利用 ユーザが組み合わせて 利用 製品/サービスに 組み込んで利用 http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用
  43. 43. 2つの仕様 Media Capture and Streams (getUserMedia) WebRTC 1.0: Real-time Communication Between Browsers
  44. 44. Media Capture and Streams (getUserMesia) ブラウザからマイクやカメラにアクセス 利用範囲はWebRTC以外とも 音声処理(with Web Audio API) ボイスチェンジャー etc. 画像処理(with Canvas) 顔検出 etc. 顔認識ができるようになるのも時間の問題か?
  45. 45. DEMO https://developer.mozilla.org/ja/demos/detail/an-ar-game/launch http://www.airtightinteractive.com/demos/js/webcammesh/
  46. 46. SAMPLE
  47. 47. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = window.URL .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  48. 48. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = window.URL .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ビデオ要素の表示と Script要素
  49. 49. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = window.URL .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ユーザメディアの取得開始
  50. 50. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = window.URL .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 取得するユーザメディアは カメラとマイク
  51. 51. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = window.URL .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ユーザメディア取得時の動作を指定
  52. 52. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = window.URL .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ビデオ要素の取得 ユーザメディアの指定 再生開始
  53. 53. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = window.URL .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  54. 54. WebRTC 1.0: Real-time Communication Between Browsers ブラウザとブラウザを接続 シグナリング 方式については規定されていない SIP XMPP WebSocket <- 今のところ一番使われている etc.
  55. 55. DEMO
  56. 56. デモ Android パソコン Chrome Firefox 5分程度で約100MBの通信量が発生します。 http://1meeting.net/
  57. 57. WebRTC 1.0: Real-time Communication Between Browsers NAT通過・ ネゴシエーション ICE(STUN + TURN + α) STUN P2P・UDPホールパンチング TURN サーバ経由
  58. 58. WebRTC 1.0: Real-time Communication Between Browsers データ通信 MediaStream 音声データ・映像データ DataChannel テキストデータ・バイナリデータ
  59. 59. Web Server WebSocket Server ICE Server (STUN) Browser Browser NAT NAT HTML+JS+CSS Global IP/Port signaling HTML+JS+CSS Global IP/Port signaling data
  60. 60. WebRTCData BlackMagic 別資料 https://speakerdeck.com/feross/webrtc-data-black-magic P18 53 をご覧下さい
  61. 61. WebRTC 1.0: Real-time Communication Between Browsers APIが複雑でわかりにくい 抽象化した仕様の多い HTML5のAPIの中では 非常に複雑
  62. 62. WebRTC まとめ ボイス・ビデオチャットが可能 テキスト・バイナリの通信も可能 P2P NAT通過の仕組み 通信制御のAPIが複雑 ライブラリを使うという選択肢も 定番と言われるようなライブラリはまだありません。
  63. 63. HTML5とWebRTC Webプラットフォーム上 APIが抽象化されている 一部例外あり 他のAPIと組み合わせて使える やりたい事が簡単にできる 参入障壁が非常に低い 今後はアイディアが重要に...?
  64. 64. DEMO https://skyway.io/examples/caption-phone/
  65. 65.
  66. 66. 質疑応答 もう一度聞きたいところはありますか? もっと詳しく聞きたいところはありますか?
  67. 67. ご清聴 ありがとう ございました

×