奥别产搁罢颁の话
- 1. 奥别产搁罢颁の话 2014/06/25 kawasaki.rb #013 金城 雄 (きんじょう ゆう) Twitter : @youkinjoh GitHub : @youkinjoh このスライドは http://www.slideshare.net/You_Kinjoh/fundamentals-andapplicationsofhtml5secondedition からの抜粋です。
- 3. WebRTC
- 7. Over The Top 手段の例 市場 ユーザ メリット 事業者 メリット 利用方法 Skype, WebEx (YouTube, Ustream) キャリアに縛られない独自の仕組みを 提供する少数のベンダーが参加可能 世界中の人と無料/安価で会話できる 限定的なAPI提供 一部連携可能 ユーザが組み合わせて利用 http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用
- 9. キャリア型通信 Over The Top Webブラウザ型 手段の例 市場 ユーザ メリット 事業者 メリット 利用方法 固定電話 携帯電話 (TV放送) Skype, WebEx (Youtube, Ustream) WebRTC インフラを持つ キャリアが支配 キャリアに縛られない 独自の仕組みを提供 する少数のベンダー が参加可能 特別な仕組みは不要 誰でも参加可能 世界中の人と 会話できる 世界中の人と無料/ 安価で会話できる 専用アプリ無しで 会話できる × 限定的なAPI提供 一部連携可能 完全にプログラマブル 部品として利用可能 単独で利用 ユーザが組み合わせて 利用 製品/サービスに 組み込んで利用 http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用
- 10. WebRTC 2つの仕様 Media Capture and Streams (getUserMedia) WebRTC 1.0: Real-time Communication Between Browsers
- 11. Media Capture and Streams (getUserMedia) ブラウザからマイクやカメラにアクセス 利用範囲はWebRTC以外とも 音声処理(with Web Audio API) ボイスチェンジャー etc. 画像処理(with Canvas) 顔検出 etc. 顔認識ができるようになるのも時間の問題か?
- 12. DEMO
- 13. SAMPLE
- 14. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = /slideshow/20140627-story-ofwebrtc/36293601/window.URL .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 15. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = /slideshow/20140627-story-ofwebrtc/36293601/window.URL .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ビデオ要素の表示と Script要素
- 16. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = /slideshow/20140627-story-ofwebrtc/36293601/window.URL .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ユーザメディアの取得開始
- 17. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = /slideshow/20140627-story-ofwebrtc/36293601/window.URL .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 取得するユーザメディアは カメラとマイク
- 18. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = /slideshow/20140627-story-ofwebrtc/36293601/window.URL .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ユーザメディア取得時の動作を指定
- 19. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = /slideshow/20140627-story-ofwebrtc/36293601/window.URL .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ビデオ要素の取得 ユーザメディアの指定 再生開始
- 20. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = /slideshow/20140627-story-ofwebrtc/36293601/window.URL .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 21. WebRTC 1.0: Real-time Communication Between Browsers ブラウザとブラウザを接続 シグナリングの仕組みは別途必要 SIP XMPP WebSocket <- 今のところ一番使われている etc.
- 22. DEMO
- 23. WebRTC 1.0: Real-time Communication Between Browsers NAT通過? ネゴシエーション ICE(STUN + TURN + α) STUN P2P?UDPホールパンチング TURN サーバ経由
- 24. WebRTC 1.0: Real-time Communication Between Browsers SDP セッション開始に必要な情報を記述 DTLS UDP版TLS
- 25. WebRTC 1.0: Real-time Communication Between Browsers データ通信 DTLSで全て暗号化される MediaStream (SRTP?SRTCP) 音声データ?映像データ DataChannel (SCTP) テキストデータ?バイナリデータ
- 26. WebRTC 1.0: Real-time Communication Between Browsers SRTP?SRTCP リアルタイムデータ転送プロトコル SCTP TCPに似たプロトコル 設定で、信頼性と引き換えにリアルタ イム性の向上が可能
- 27. 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
- 29. WebRTC 1.0: Real-time Communication Between Browsers APIが複雑でわかりにくい 抽象化した仕様の多い HTML5の他のAPIと比べると 非常に複雑 それでも、従来のリアルタイム通信の 処理よりは断然楽 ジッタやパケットロス等の対策は、 ブラウザが全て対応してくれる