Recommended
More Related Content
What's hot
What's hot (16)
Viewers also liked
Viewers also liked (14)
Similar to 2013 WebRTC 概説 ＆ ワークショップ
Similar to 2013 WebRTC 概説 ＆ ワークショップ (20)
More from mganeko
More from mganeko (16)
Recently uploaded
Recently uploaded (16)
2013 WebRTC 概説 ＆ ワークショップ
- 1. WebRTC概説＆ワークショップ資料 2013年 技術交流会 WebRTC編 2013.08.27 インフォコム株式会社 技術企画室 がねこ まさし m.ganeko@infocom.co.jp 1
- 2. はじめに • 本資料は以下の情報を参考に、作成しています。 – WebRTC 本家のサイト • http://www.webrtc.org/ – HTML5 ROCKS • http://www.html5rocks.com/en/tutorials/webrtc/basics/ – WebRTC for Beginners Muaz Khan • https://www.webrtc-experiment.com/docs/webrtc-for-beginners.html • https://github.com/muaz-khan/WebRTC-Experiment – WebRTC Conference 2013 Atlanta • http://www.webrtcworld.com/conference/west/default.aspx • http://images.tmcnet.com/expo/webrtc- conference/pdfs/WebRTC%20SG13AtlantaRe-CapSml.pdf – その他の多くのブログ • 本利用に含まれる製品名、商標、ロゴは、各権利者に帰属します。 – ®、TM 等の表記は省略します 2
- 3. What’s WebRTC • Web Real-Time Communication の略称 • Webブラウザ上で、Real-Time Communicationを 可能にするフレームワーク – HTML5の一部 • 複数の技術の連携で成り立っている – 何が含まれるか、分かりますか？ 3
- 4. WebRTCの構成要素 • ユーザーメディア – カメラ – マイク – 画面キャプチャ • ストリーム (MediaStream) • P2P通信 (RTCPeerConnection) • データ通信 (DataChannel) • 関連するAPI、HTML要素 – JavaScript （大前提） – Video, Audio – WebScoket – WebAudio API – Canvas – WebGL – などなど 4
- 5. WebRTCが使えるブラウザ • Windows / Mac – Chrome 26～（カメラ、マイクはOK、画面キャプチャは要設定） – FireFox 22～（カメラ、マイクはOK、画面キャプチャはNG） – Opera 15 ～ （カメラ、マイクはOK、画面キャプチャはNG） ※JavaScriptには方言がある。要注意 Chrome: webkit～, FireFox: moz～ • Android – Chrome 29～ （カメラ、マイクはOK、画面キャプチャはNG） • iOS – なし – Google曰く、現在開発中で近々ライブラリを出す予定とのこと • WebRTC Conference 2013 Atlanta にての発言。 • → いずれChromeに乗るのでは？ と個人的に期待しています。 5
- 6. なぜWebRTCに注目するのか？ 通信手段の破壊的進化 キャリア型通信 固定電話 携帯電話 (TV放送） 手段の例 Over The Top Skype, WebEx (YouTube, USTREAM) Webブラウザ型 WebRTC 世界中の人と会話 できる ユーザメリット 世界中の人と無料/ 安価で会話できる 専用アプリ無しで 会話できる インフラを持つ キャリアが支配 市場 キャリアに縛られない 独自の仕組みを提供 する少数のベンダー が参加可能 特別な仕組みは不要 誰でも参加可能 ×事業者メリット 限定的なAPI提供 一部連携可能 完全にプログラマブル 部品として利用可能 単独で利用利用方法 ユーザが組み合わ せて利用 製品/サービスに 組み込んで利用 コールセンター、ECサイト、情報共有システム、など
- 7. 利用方法のイメージ ■ユーザが組み合わせて利用 → Wordで見積書作成 合計：568,900 システムが合計を 計算、自動で結果 を反映する ■製品/サービスに組み込んで利用 → Excelで見積書作成 合計：568,900 電卓で計算、ワードに手動で転記
- 8. メディア関連 8
- 9. では、やってみよう Chrome編 • 準備 – OS: Windows, Mac OS X – ブラウザ：Chrome 26～ をインストール – Webカメラ、マイクを接続 – お好きなエディタ • 内容 – ユーザーメディアの扱い – ストリームの扱い 9
- 10. 自分撮りカメラ (Chrome) <html> <head><title>WebRTC Camera</title></head> <body> <video id="video1" autoplay="1"></video> </body> <script> var video1 = document.getElementById('video1'); navigator.webkitGetUserMedia({audio:false, video:true}, function(stream) { // success video1.src = window.webkitURL.createObjectURL(stream); }, function(err) { // error console.log(err); } ); </script> </html> 10
- 11. 予定 11
- 12. ローカルでやってみる (file://～) • 何も表示されないはず • JavaScript コンソールを見ると… – NavigatorUserMediaError {code: 1, PERMISSION_DENIED: 1} … – 権限エラー • ローカルファイルからでは、ユーザーメディア にアクセスできない • →ということで、サーバーに置いてみましょう – Apache, nginx, IISなどお好きなサーバーでどうぞ 12
- 13. Webサーバーがない人は • Webサーバのセットアップしたことがない場合 • →簡単なWebサーバー(Windows) – シンプルなWebサーバ 04WebServer の導入 – http://www.vector.co.jp/soft/dl/winnt/net/se305 171.html – サービスにはしない（手動起動）で • サーバー開始 – 04WebServer サーバーコントローラ 13
- 14. 04WebServer 14
- 15. Webサーバーがない人は(2) • 簡単なWebサーバー(Windowsその2) – 簡単WEBサーバーの導入 – http://www.vector.co.jp/soft/dl/winnt/net/se381 431.html • サーバー開始 15
- 16. 改めて、結果 16
- 17. セピアカメラ <html> <head><title>WebRTC Camera</title><head> <body> <video id="video1" autoplay="1" style="-webkit-filter: sepia(80%); "></video> </body> <script> var video1 = document.getElementById('video1'); navigator.webkitGetUserMedia({audio:false, video:true}, function(stream) { // success video1.src = window.webkitURL.createObjectURL(stream); }, function(err) { // error console.log(err); } ); </script> </html> 17
- 18. 結果 18
- 19. ミラーカメラ <html> <head><title>WebRTC Camera</title><head> <body> <video id="video1" autoplay="1" ></video> <video id="video2" autoplay="1" style="-webkit-transform: scaleX(-1);"></video> </body> <script> var video1 = document.getElementById('video1'); var video2 = document.getElementById('video2'); navigator.webkitGetUserMedia({audio:false, video:true}, function(stream) { // success video1.src = window.webkitURL.createObjectURL(stream); video2.src = window.webkitURL.createObjectURL(stream); }, function(err) { // error console.log(err); } ); </script> </html> 19
- 20. 結果 20
- 21. その他のバリエーション 痩せカメラ <video id="video2" autoplay="1" style="-webkit-transform: scaleX(0.5);"></video> 貫禄カメラ <video id="video2" autoplay="1" style="-webkit-transform: scaleX(1.5);"></video> 逆さカメラ <video id="video2" autoplay="1" style="-webkit-transform: scaleY(-1);"></video> 白黒カメラ <video id="video2" autoplay="1" style="-webkit-filter: grayscale(100%);"></video> 傾奇カメラ <video id="video6" autoplay="1" style="-webkit-transform: rotate(-30deg);"></video> 21
- 23. ハウリング体験 <html> <head><title>WebRTC Camera</title><head> <body> <video id="video1" autoplay="1"></video> </body> <script> var video1 = document.getElementById('video1'); navigator.webkitGetUserMedia({audio:true, video:true}, function(stream) { // success video1.src = window.webkitURL.createObjectURL(stream); }, function(err) { // error console.log(err); } ); </script> </html> 23
- 25. ここまでのまとめ • ユーザーメディア（音声、画像） – navigator.webkitGetUserMedia( {audio:true, video:true}, … • ユーザーメディア（画面キャプチャ） – navigator.webkitGetUserMedia( video : { mandatory : { chromeMediaSource : "screen" } }, • セキュリティ（アクセス権限） • メディアストリーム – MediaStream (video, audio) 25
- 27. メディアの階層図 27
- 28. 通信関連 28
- 29. 通信について • RTCPeerConnection – 動画、音声などのMediaStreamを転送する経路 – P2P (Point to Point) → ブラウザとブラウザ – UDP/IP を使用 29 RTCPeerConnection RTCPeerConnection UDP/IP
- 30. P2P通信を始めるには • お互い、相手のIPアドレスを知る必要がある • 使用するポート番号を知る必要がある – 利用するUDPのポートはダイナミックに割り振られる • RTCPeerConnectionの通信を始める前に、何らかの手段で ネゴシエーション、合意が必要 – この手順を”シグナリング：Signaling”と呼びます 30 RTCPeerConnection RTCPeerConnection UDP/IP お互いのIPアドレス 利用するUDPポート
- 31. P2P前のシグナリング • どちらのブラウザからもわかる、中継役が必要 – →普通はシグナリングサーバーを立てる • シグナリングのプロトコルは標準化されていない – 独自の方式 • WebSocket利用(TCP/IP) • Ajax利用(HTTP, HTTPS) – 既存のプロトコル • SIP(VoIP用) with WebSocket(TCP/IP) • XMPP(IM用）with WebSocket(TCP/IP) 31
- 32. シグナリングで交換される情報 • Session Description Protocol (SDP) – セッションが含むメディアの種類（音声、映像）、メディアの形式 （コーデック） – IPアドレス、ポート番号 – P2Pのデータ転送プロトコル → WebRTCでは Secure RTP – 通信で使用する帯域 – セッションの属性（名前、識別子、アクティブな時間、など） • Interactive Connectivity Establishment (ICE) – 通信経路の候補をリストアップするためのプロトコル • P2Pによる直接通信 • STUNによる、NAT通過のためのポートマッピング（→P2Pになる） • TRUNによる、リレーサーバーを介した中継通信 – ネットワーク的に近い経路（上から順）が選ばれる 32
- 36. P2P通信確立までの流れ(1) WebSocketの例 36 PeerConnection socket Application Signaling Server PeerConnection socket Application connect() connect connect() connect createOffer() offer sdp setLocalDescription(sdp) send(sdp) send sdp send sdp onMessage(sdp) setRemoteDescription(sdp) createAnswer() answer sdp send sdp send(sdp) send sdp onMessage(sdp) setRemoteDescription(sdp) setLocalDescription(sdp)
- 37. P2P通信確立までの流れ(2) WebSocketの例 37 PeerConnection socket Application Signaling Server PeerConnection socket Application onIceCandidate(ice) send(ice) send ice send ice onMessage(ice) addIceCandidate(ice) send ice send(ice) send ice onMessage(ice) addIceCandidate(ice) onIceCandidate(ice) onIceCandidate() : end of candidate onIceCandidate() : end of candidate P2P stream transfer P2Pは最後の最後
- 38. P2P型のメリット、デメリット • メリット – サーバを仲介しないので、 オーバーヘッドがない – 高スペックのサーバー不要 • デメリット – 通信相手が多いと組み合 わせ爆発で通信経路が増 える • 2人 → 1経路 • 3人 → 3経路 • 4人 → 6経路 • 5人 → 10経路 • 6人 → 15経路 38 P2P型 サーバー型 P2P型4人 サーバー型4人
- 39. WebRTCで可能な(通信)形態 • 双方向通信 – 1 to 1 の音声通信 – 1 to 1 の映像通信 – 1 to 1 のスクリーンキャプチャ通信 （と音声通信） – n to n の音声通信 – n to n の映像通信 – n to n のスクリーンキャプチャ通信 （と音声通信） 39
- 40. WebRTCで可能な(通信)形態 • 片方向通信 – 1 → 1 の音声通信 – 1 → 1 の映像通信 – 1 → 1 のスクリーンキャプチャ通信 （と音声通信） – 1 → n の音声通信 – 1 → n の映像通信 – 1 → n のスクリーンキャプチャ通信 （と音声通信） 40
- 41. WebRTCで可能な(通信)形態 • ローカルのみ – 音声取得→スピーカーで再生 – 動画取得→動画再生 – 画面キャプチャ取得 – 音声録音 – 動画録画 – 静止画保存（Canvas使用） 41
- 42. WebRTC関連の関連図 42
- 46. データ通信(DataChannel) • RTCPeerConnectionの通信経路を通して、データ交換を実 施 • UDP/IPなので、(TCP/IPと違い)通信レイヤーでのパケット再 送なし – → DataChannelのレベルで、まるごと再送機能を提供 • onOpen, onClose, onMessage のイベントを処理 • テキストチャット、ファイル転送、ゲームなどに利用可能 • DataChannelはP2P、WebSocketはサーバ経由 • DataChannelはUDP/IP、WebSocketはTCP/IP • 仕様はまだ未確定 46
- 47. まとめ • WebRTCはパワフル – カメラ、マイク、画面キャプチャなど、ブラウザの能力を大きく拡 大する – HTML5の他の機能との相乗効果 • Canvas, CSS, WebAudio API, WebGL • WebRTCはフレキシブル – ローカルのみ、1対1、n対n – 双方向、片方向（ブロードキャスト） • WebRTCは破壊的技術 – だれでも市場/アプリに参入できる • WebRTCはプログラマブル – 自分たちの製品/サービスに組み込める 47
- 49. おまけ 49
- 50. ワークショップの続き：静止画 <html> <head><title>WebRTC Camera</title></head> <body> <button onclick="captureImage();">Shot</button><br /> <video id="video1" autoplay="1" style="width:480px; height:360px;"></video> <canvas id="canvas1" style="width:480px; height:360px;"></canvas> </body> <script> var video1 = document.getElementById('video1'); var canvas1 = document.getElementById('canvas1'); navigator.webkitGetUserMedia({audio:false, video:true}, function(stream) { // success video1.src = window.webkitURL.createObjectURL(stream); }, function(err) { // error console.log(err); }); function captureImage(){ var context = canvas1.getContext('2d'); context.drawImage(video1, 0, 0, canvas1.width, canvas1.height); } </script> </html> 50
- 51. ワークショップの続き：静止画(2) <html> <head><title>WebRTC Camera</title></head> <body> <button onclick="captureImage();">Shot</button><br /> <button onclick="saveImage();">Save</button><br /> … </body> <script> … function captureImage(){ var context = canvas1.getContext('2d'); context.drawImage(video1, 0, 0, canvas1.width, canvas1.height); } function saveImage() { // download var data = canvas1.toDataURL('image/png'); data = data.replace('image/png', 'image/octet-stream'); document.location.href = data; }; </script> </html> 51 ※なぜか保存されたpngは、縦方向につぶれてしまう （原因不明）