HTML5によるリアルタイムコミュニケーション WebRTCの概説
- 5. 途中、皆さまに参加して頂けるデモが 2つあります。 是非参加をお願いします。 後程URLを表示します。 デモ参加のお願い IN FO R M A T IO N IN FO R M A T IO N
- 11. HTML5 = HTML5 + CSS + JS
- 12. HTML5 = HTML5 + CSS + JS 広義 狭義
- 13. HTML5 = HTML5 + CSS + JS 広義 狭義 マークアップ言語の仕様 従来のHTMLの改訂 新しいAPIも含まれる バズワード(マーケティング用語)
- 14. Semantic Elements Multi Media Canvas HTML5 Forms O?ine 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 Noti?- 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-?refox-os/26 より引用
- 18. HTML5 = HTML5 + CSS + JS 本日のコンテキスト これ
- 26. OSの機能をWebに OSの機能が、ブラウザを介してサイト に提供される アドレス帳 ネットワーク情報 バッテリー状態 通知 ストリーム メディアデータ オーディオ ビデオ 字幕 Webカメラ マイク Audioの波形操作 2D(ラスター,ベクター) 3DCG 音声入力 音声合成 暗号化 ファイルシステム データベース スレッド 通信(WebSocket,TCP,UDP) Bluetooth 加速度センサ 傾きセンサ ジャイロ バイブレーション GPS 電子コンパス 温度センサ 湿度センサ 気圧センサ 環境光センサ 近接センサ 磁気センサ etc. ネット接続が前提のもの?仕様策定中のもの?WebOS向けのものも含まれています。
- 31. WebSocket
- 33. DEMO
- 36. WebRTC
- 40. Over The Top 手段の例 市場 ユーザ メリット 事業者 メリット 利用方法 Skype, WebEx (YouTube, Ustream) キャリアに縛られない独自の仕組みを 提供する少数のベンダーが参加可能 世界中の人と無料/安価で会話できる 限定的なAPI提供 一部連携可能 ユーザが組み合わせて利用 http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用
- 42. キャリア型通信 Over The Top Webブラウザ型 手段の例 市場 ユーザ メリット 事業者 メリット 利用方法 固定電話 携帯電話 (TV放送) Skype, WebEx (Youtube, Ustream) WebRTC インフラを持つ キャリアが支配 キャリアに縛られない 独自の仕組みを提供 する少数のベンダー が参加可能 特別な仕組みは不要 誰でも参加可能 世界中の人と 会話できる 世界中の人と無料/ 安価で会話できる 専用アプリ無しで 会話できる × 限定的なAPI提供 一部連携可能 完全にプログラマブル 部品として利用可能 単独で利用 ユーザが組み合わせて 利用 製品/サービスに 組み込んで利用 http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用
- 43. 2つの仕様 Media Capture and Streams (getUserMedia) WebRTC 1.0: Real-time Communication Between Browsers
- 44. Media Capture and Streams (getUserMesia) ブラウザからマイクやカメラにアクセス 利用範囲はWebRTC以外とも 音声処理(with Web Audio API) ボイスチェンジャー etc. 画像処理(with Canvas) 顔検出 etc. 顔認識ができるようになるのも時間の問題か?
- 46. SAMPLE
- 47. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = /You_Kinjoh/html5-real-timecommunicationwebrtc/window.URL .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 48. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = /You_Kinjoh/html5-real-timecommunicationwebrtc/window.URL .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ビデオ要素の表示と Script要素
- 49. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = /You_Kinjoh/html5-real-timecommunicationwebrtc/window.URL .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ユーザメディアの取得開始
- 50. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = /You_Kinjoh/html5-real-timecommunicationwebrtc/window.URL .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 取得するユーザメディアは カメラとマイク
- 51. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = /You_Kinjoh/html5-real-timecommunicationwebrtc/window.URL .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ユーザメディア取得時の動作を指定
- 52. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = /You_Kinjoh/html5-real-timecommunicationwebrtc/window.URL .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ビデオ要素の取得 ユーザメディアの指定 再生開始
- 53. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = /You_Kinjoh/html5-real-timecommunicationwebrtc/window.URL .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 54. WebRTC 1.0: Real-time Communication Between Browsers ブラウザとブラウザを接続 シグナリング 方式については規定されていない SIP XMPP WebSocket <- 今のところ一番使われている etc.
- 55. DEMO
- 57. WebRTC 1.0: Real-time Communication Between Browsers NAT通過? ネゴシエーション ICE(STUN + TURN + α) STUN P2P?UDPホールパンチング TURN サーバ経由
- 58. WebRTC 1.0: Real-time Communication Between Browsers データ通信 MediaStream 音声データ?映像データ DataChannel テキストデータ?バイナリデータ
- 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
- 61. WebRTC 1.0: Real-time Communication Between Browsers APIが複雑でわかりにくい 抽象化した仕様の多い HTML5のAPIの中では 非常に複雑
- 65. 完
- 67. ご清聴 ありがとう ございました