WebRTCで変わるWebの未来

2013/04/23QCon  Tokyo  2013

Toru  Yoshikawa  (@yoshikawa_̲t)

Who?

Google  Developer  Experts  (Chrome)

html5j.org/HTML5とか勉強会スタッフ

⽇日本jQuery  Mobileユーザー会 　管理理⼈人

Sublime  Text  2  Japan  Users  Group 　管理理⼈人

allWebクリエイター塾/jQuery  Mobile担当講師

Blog:  http://d.hatena.ne.jp/pikotea/

吉川  徹  /  Toru  Yoshikawa@yoshikawa_̲t

http://d.hatena.ne.jp/pikotea/http://d.hatena.ne.jp/pikotea/

AgendaWebRTCとは？

WebRTCのアーキテクチャ

getUserMedia

WebRTC

その他のTips

今後の仕様策定と展望

WebRTCとは？

WebRTC=

Web  Real-‐‑‒Time  Communications

WebRTCブラウザ上でリアルタイムコミュニケーションを実現するための仕様

双⽅方向性のあるコミュニケーションを必要とする様々なアプリケーションを開発できる

ビデオ／⾳音声チャット

テキストの共同編集

ゲーム

etc...

Demo

https://apprtc.appspot.com/

https://apprtc.appspot.com/https://apprtc.appspot.com/

WebSocketとWebRTCWebSocketは、リアルタイムな双⽅方向通信を実現する仕様

Ajaxのように単⽅方向、単⼀一データのやり取りではなく、⼀一度度コネクションを確⽴立立すれば⾃自由にデータをやり取りできる

WebSocketで既にリアルタイム双⽅方向通信は実現しているが、WebRTCとの違いは何か？

WebSocket

WebRTC

WebSocketとの違いWebRTCは、P2P通信を利利⽤用して端末間の相互接続が可能

サーバーを経由しないため、⾼高速な通信ができる

WebRTCでは、データ通信⽅方式がUDPのため品質よりもリアルタイム性を重視したデータに適している（再送制御は可能なため、正確なデータ通信ができないわけではない）

WebRTCのアーキテクチャ

Architecture

WebRTCの2つの仕様

Media  Capture  and  Streams（getUserMedia）

WebRTC  1.0:  Real-‐‑‒time  Communication  Between  Browsers

Media  Capture  and  Streams（getUserMedia）

Media  Capture  and  Streams（getUserMedia）

ローカルのカメラやマイクからストリームデータを取得する仕様

通信時のストリームについても定義されている

カメラから画像や⾳音声を取得して、加⼯工するだけでもいろいろな応⽤用が可能

Demo

http://webcamtoy.com/ja/

http://webcamtoy.com/ja/http://webcamtoy.com/ja/

getUserMediaのサンプルコードnavigator.webkitGetUserMedia({audio: true, video:true}, function(stream) { videoElement.src = webkitURL.createObjectURL(stream);});

Canvasと連携して画像処理理

Web  Audio  APIと連携して⾳音声処理理

顔認識識、ジェスチャー

etc...

※Webkit(Chrome,  Safari,  Android)の記述

Demo

http://www.movikantirevo.com/

http://www.movikantirevo.comhttp://www.movikantirevo.com

WebRTC  1.0:  Real-‐‑‒time  Communication  Between  Browsers

WebRTC  1.0:  Real-‐‑‒time  Communication  Between  Browsers

主にP2P通信のための仕様が定義されている

端末間の相互接続を開始するためのネゴシエーションを⾏行行う

P2Pによるデータ通信（Data  channel）などもある

APIは、複雑で難解  ;-‐‑‒(

Demo

https://developer.mozilla.org/ja/demos/detail/bananabread

https://developer.mozilla.org/ja/demos/detail/bananabreadhttps://developer.mozilla.org/ja/demos/detail/bananabread

WebRTCによるP2P通信を始めるための事前準備

最初のネゴシエーションを仲介するためのサーバーを⽤用意しよう（WebサーバーでOK）

NAT越えするためのICEサーバーを⽤用意しよう（公開されているものでもOK）

Network構成

突然ですが、ネットワークに関するお話です

NAT  traversal（NAT越え）の問題

P2P通信を開始するためには、お互いの端末のグローバルアドレスを知る必要がある

しかし、各端末の前にはファイアウォールなどがあるので、⼀一筋縄ではいかない

そのために必要なのが、ICEと呼ばれる仕組み

ICEで取得したグローバルIPアドレスとポート番号を通信するホスト間で交換する

ICE

Interactive  Connectivity  Establishment

STUNやTURNなどのNAT越えの⼿手順をまとめたもの

STUNで対応できないホストには、TURNを利利⽤用する

STUNSimple  Traversal  of  UDP  through  NATs

NAT越えの⽅方法のひとつ

通信するホストがSTUNサーバーにUDP接続を⾏行行い、NATが割り当てたグローバルIPアドレスとポート番号を取得する

STUNで対応できるNATは、フルコーン型、制限コーン型、ポート制限コーン型の3つ

NATの種類フルコーン型

1つのTCP/UDPポートを1台のPCに割り当て

制限コーン型

内部ホストがパケット送信した外部ホストのみと通信可能（UDPホールパンチングなどで対応）

ポート制限コーン型

制限コーン型には、さらにポートの制限を加えたもの

対称型

外部ホストごとに別々のアドレス変換テーブルを持つ

TURNTraversal  Using  Relay  NAT

NAT越えの⽅方法のひとつ

対称型や多段NATにも対応できる

要は、すべての通信をTURNを経由して⾏行行うので、速度度的なメリットはほとんどない

サーバー的にも⾼高負荷・⾼高コスト

APIのほとんどがこの部分を解決するためのネゴシエーション

Sequence

サンプルコードは参考程度度に

デモ（http://rtcdc.komasshu.info）リポジトリ（https://github.com/KensakuKOMATSU/rtc_datachannel）

http://rtcdc.komasshu.info/http://rtcdc.komasshu.info/https://github.com/KensakuKOMATSU/rtc_datachannelhttps://github.com/KensakuKOMATSU/rtc_datachannel

RTCPeerConnection

PeerConnection00は、Deprecatedなので利利⽤用しないように

Firefoxは、nightly以外は、about:configでmedia.peerconnection.enabledをtrueに設定する

new  RTCPeerConnection()var pc = new RTCPeerConnection({ "iceServers": [ {"url": "STUNサーバーのアドレス"}, {"url": "TURNサーバーのアドレス"} ]});

stun:stun.l.google.com:19302stun:23.21.150.121

addStream  (local)// getUserMediaで取得したストリームデータを追加pc.addStream(localStream);

onicecandidate/addICECandidatepc.onicecandidate = function(e) {

// リモートへICE候補を送信する sendMessage(JSON.stringify({ "candidate": e.candidate }));};

// リモートからのICE候補を受信した場合function receiveMessage(message){

var candidate = new RTCIceCandidate({ "candidate": message.candidate }); pc.addICECandidate(candidate);}

Send  Offer// オファーを作成pc.createOffer(function(description){ pc.setLocalDescription(description);

// Send Offer sendMessage(JSON.stringify({ "sdp": description }));});

Send  Answerfunction reciveMessage(message) { // RTCPeerConnectionを作成していなければ、作成しストリームデータを追加しておく pc.setRemoteDescription(new RTCSessionDescription(message.sdp), function(){

if (pc.remoteDescription.type == "offer") { pc.createAnswer(function(description){ pc.setLocalDescription(description);

// Send Answer sendMessage(JSON.stringify({ "sdp": description })); }); } });}

addStream  (remote)pc.onaddstream = function(e) { video.src = URL.createObjectURL(e.stream);}

Data  Channel

P2Pでバイナリ、テキストデータが送れる

APIは、WebSocketとほぼ同じ

Chrome  27より前は、起動オプションが必要

-‐‑‒-‐‑‒enable-‐‑‒data-‐‑‒channels

Canary  Buildは、現在v27なのでそのまま利利⽤用可能

Data  Channelvar channel = pc.createDataChannel("labelName");channel.onopen = function(e) { // データチャネルオープン}channel.onmessage = function(e) { // テキストデータの受信 console.log(e.data);}channel.onclose = function(e) { // データチャネルクローズ}

// テキストデータの送信channel.send(message);

APIの扱いは難しいので、簡単に始めたい場合は、ライブラリを

利利⽤用しましょう

WebRTCのライブラリ

simpleWebRTC  (https://github.com/HenrikJoreteg/SimpleWebRTC)

Peer.js  (http://peerjs.com/)

webRTC.io  (https://github.com/webRTC/webRTC.io)

https://github.com/HenrikJoreteg/SimpleWebRTChttps://github.com/HenrikJoreteg/SimpleWebRTChttps://github.com/HenrikJoreteg/SimpleWebRTChttps://github.com/HenrikJoreteg/SimpleWebRTChttp://peerjs.com/http://peerjs.com/https://github.com/webRTC/webRTC.iohttps://github.com/webRTC/webRTC.iohttps://github.com/webRTC/webRTC.iohttps://github.com/webRTC/webRTC.io

Peer.js

Data  Channelのみのサポート

ブローカーサーバーが提供されている（API  Keyの申請が必要）

connect()メソッドだけでP2Pのネゴシエーションを完了了

その他のTips

ブラウザ同⼠士でWebRTC

Hello  Chrome,  itʼ’s  Firefox  calling!https://hacks.mozilla.org/2013/02/hello-‐‑‒chrome-‐‑‒its-‐‑‒firefox-‐‑‒calling/

http://blog.chromium.org/2013/02/hello-‐‑‒firefox-‐‑‒this-‐‑‒is-‐‑‒chrome-‐‑‒calling.html

https://hacks.mozilla.org/2013/02/hello-chrome-its-firefox-calling/https://hacks.mozilla.org/2013/02/hello-chrome-its-firefox-calling/https://hacks.mozilla.org/2013/02/hello-chrome-its-firefox-calling/https://hacks.mozilla.org/2013/02/hello-chrome-its-firefox-calling/

モバイルでWebRTC

HTML5でテレビ電話、Chrome  Beta  for  AndroidでWebRTCを試す  

http://d.hatena.ne.jp/jovi0608/20130307/1362645489

http://d.hatena.ne.jp/jovi0608/20130307/1362645489http://d.hatena.ne.jp/jovi0608/20130307/1362645489

実装状況

機能 Chrome Firefox Opera Safari IE

Media  Capture

Peer-‐‑‒to-‐‑‒peer  connections

Data  Channel

◯ ◯ ◯ − −

◯ ◯ − − −

△ △ − − −

※Operaは今後、Chromeと同様になります

Microsoft  WebRTC  Proposal

Microsoft  pushes  ahead  with  its  own  take  on  WebRTC  (http://gigaom.com/2013/01/17/microsoft-‐‑‒cu-‐‑‒webrtc-‐‑‒prototype/)

Customizable,  Ubiquitous  Real-‐‑‒Time  Communication  (http://html5labs.interoperabilitybridges.com/cu-‐‑‒rtc-‐‑‒web/cu-‐‑‒rtc-‐‑‒web.htm)

http://gigaom.com/2013/01/17/microsoft-cu-webrtc-prototype/http://gigaom.com/2013/01/17/microsoft-cu-webrtc-prototype/http://gigaom.com/2013/01/17/microsoft-cu-webrtc-prototype/http://gigaom.com/2013/01/17/microsoft-cu-webrtc-prototype/http://html5labs.interoperabilitybridges.com/cu-rtc-web/cu-rtc-web.htmhttp://html5labs.interoperabilitybridges.com/cu-rtc-web/cu-rtc-web.htmhttp://html5labs.interoperabilitybridges.com/cu-rtc-web/cu-rtc-web.htmhttp://html5labs.interoperabilitybridges.com/cu-rtc-web/cu-rtc-web.htmhttp://html5labs.interoperabilitybridges.com/cu-rtc-web/cu-rtc-web.htmhttp://html5labs.interoperabilitybridges.com/cu-rtc-web/cu-rtc-web.htm

今後の仕様策定と展望

今後の仕様策定ストリームデータ以外でもテキストやバイナリデータをやり取りするためのData  Channel  APIが定義されており、既にChromeとFirefoxで実験的に実装されている

その他、トーン信号（プッシュ信号）を送信するためのDTMF（Dual-‐‑‒Tone  Multi-‐‑‒Frequency）についても定義されている

将来的には、ストリームのレコーディングも可能となる⾒見見込み（Media  Recording  API）

商業化の流流れ

TenHandsというベンチャー企業では、今年年に⼊入ってWebRTCを利利⽤用したサービスの提供を開始

同じくベンチャー企業のPlivoは、WebRTCと既存のSIPラインと接続するためのSDKを提供しており、WebRTCを固定電話と繋げることも可能になっている

WebRTCには多くの企業が注⽬目しており、既に新たなサービスの創出や業界への参⼊入が活発化している

まとめ

これまでは、ビデオチャット（ビデオ会議）と⾔言えば、専⽤用のネットワーク、専⽤用のハードウェアとソフトウェアを利利⽤用するというプロプライエタリな環境だった

WebRTCによって標準化され、オープンとなることで、様々なネットワーク、デバイスが既存のインフラを含めてシームレスに接続するようになる

今後の新しいソリューションやビデオチャットに限らず、新しいサービスが産まれてくることが期待される

皆さんの⼿手で、新しいWebの未来を作っていきましょう

Thank  you!!(@yoshikawa_̲t)

ResourcesCommunity

http://www.webrtc.org/

Sample  Source

https://code.google.com/p/webrtc-‐‑‒samples/source/browse/trunk/apprtc/

Interoperability  (Chrome  and  Firefox)

https://code.google.com/p/webrtc-‐‑‒samples/source/browse/trunk/apprtc/js/adapter.js

http://www.webrtc.org/http://www.webrtc.org/https://code.google.com/p/webrtc-samples/source/browse/trunk/apprtc/https://code.google.com/p/webrtc-samples/source/browse/trunk/apprtc/https://code.google.com/p/webrtc-samples/source/browse/trunk/apprtc/https://code.google.com/p/webrtc-samples/source/browse/trunk/apprtc/https://code.google.com/p/webrtc-samples/source/browse/trunk/apprtc/js/adapter.jshttps://code.google.com/p/webrtc-samples/source/browse/trunk/apprtc/js/adapter.jshttps://code.google.com/p/webrtc-samples/source/browse/trunk/apprtc/js/adapter.jshttps://code.google.com/p/webrtc-samples/source/browse/trunk/apprtc/js/adapter.js

SpecificationsW3C

WebRTC  1.0:  Real-‐‑‒time  Communication  Between  Browsers  (http://www.w3.org/TR/webrtc/)

Media  Capture  and  Streams  (http://www.w3.org/TR/mediacapture-‐‑‒streams/)

Media  Recoding  API  (http://lists.w3.org/Archives/Public/public-‐‑‒media-‐‑‒capture/2012Dec/att-‐‑‒0159/RecordingProposal.html)

IETF

Web  Real-‐‑‒Time  Communication  (WebRTC):  Media  Transport  and  Use  of  RTP  (http://tools.ietf.org/html/draft-‐‑‒ietf-‐‑‒rtcweb-‐‑‒rtp-‐‑‒usage)

WebRTC  Data  Channel  Protocol  (http://tools.ietf.org/html/draft-‐‑‒jesup-‐‑‒rtcweb-‐‑‒data-‐‑‒protocol)

Javascript  Session  Establishment  Protocol  (http://tools.ietf.org/html/draft-‐‑‒ietf-‐‑‒rtcweb-‐‑‒jsep)

http://www.w3.org/TR/webrtc/http://www.w3.org/TR/webrtc/http://www.w3.org/TR/webrtc/http://www.w3.org/TR/webrtc/http://www.w3.org/TR/mediacapture-streams/http://www.w3.org/TR/mediacapture-streams/http://lists.w3.org/Archives/Public/public-media-capture/2012Dec/att-0159/RecordingProposal.htmlhttp://lists.w3.org/Archives/Public/public-media-capture/2012Dec/att-0159/RecordingProposal.htmlhttp://lists.w3.org/Archives/Public/public-media-capture/2012Dec/att-0159/RecordingProposal.htmlhttp://lists.w3.org/Archives/Public/public-media-capture/2012Dec/att-0159/RecordingProposal.htmlhttp://tools.ietf.org/html/draft-ietf-rtcweb-rtp-usagehttp://tools.ietf.org/html/draft-ietf-rtcweb-rtp-usagehttp://tools.ietf.org/html/draft-ietf-rtcweb-rtp-usagehttp://tools.ietf.org/html/draft-ietf-rtcweb-rtp-usagehttp://tools.ietf.org/html/draft-jesup-rtcweb-data-protocolhttp://tools.ietf.org/html/draft-jesup-rtcweb-data-protocolhttp://tools.ietf.org/html/draft-jesup-rtcweb-data-protocolhttp://tools.ietf.org/html/draft-jesup-rtcweb-data-protocolhttp://tools.ietf.org/html/draft-ietf-rtcweb-jsephttp://tools.ietf.org/html/draft-ietf-rtcweb-jsephttp://tools.ietf.org/html/draft-ietf-rtcweb-jsephttp://tools.ietf.org/html/draft-ietf-rtcweb-jsep

CommunicationsW3C  ML

http://lists.w3.org/Archives/Public/public-‐‑‒webrtc/

IETF  ML

http://www.ietf.org/mail-‐‑‒archive/web/rtcweb/current/maillist.html

http://lists.w3.org/Archives/Public/public-webrtc/http://lists.w3.org/Archives/Public/public-webrtc/http://www.ietf.org/mail-archive/web/rtcweb/current/maillist.htmlhttp://www.ietf.org/mail-archive/web/rtcweb/current/maillist.html

ArticlesグループビデオチャットのTenHandsがChromeのWebRTCで実装–プラグイン不不要に  (http://jp.techcrunch.com/archives/20130205real-‐‑‒time-‐‑‒communications-‐‑‒platform-‐‑‒tenhands-‐‑‒now-‐‑‒uses-‐‑‒webrtc-‐‑‒on-‐‑‒chrome-‐‑‒for-‐‑‒plugin-‐‑‒free-‐‑‒video-‐‑‒chats/)

WebRTCとSIPを結びつけるSDKをPlivoがローンチ…Webと固定電話の通話も可能に  (http://jp.techcrunch.com/archives/20130115plivo-‐‑‒launches-‐‑‒the-‐‑‒first-‐‑‒sdk-‐‑‒that-‐‑‒lets-‐‑‒developers-‐‑‒connect-‐‑‒webrtc-‐‑‒and-‐‑‒sip/)

http://jp.techcrunch.com/archives/20130205real-time-communications-platform-tenhands-now-uses-webrtc-on-chrome-for-plugin-free-video-chats/http://jp.techcrunch.com/archives/20130205real-time-communications-platform-tenhands-now-uses-webrtc-on-chrome-for-plugin-free-video-chats/http://jp.techcrunch.com/archives/20130205real-time-communications-platform-tenhands-now-uses-webrtc-on-chrome-for-plugin-free-video-chats/http://jp.techcrunch.com/archives/20130205real-time-communications-platform-tenhands-now-uses-webrtc-on-chrome-for-plugin-free-video-chats/http://jp.techcrunch.com/archives/20130205real-time-communications-platform-tenhands-now-uses-webrtc-on-chrome-for-plugin-free-video-chats/http://jp.techcrunch.com/archives/20130205real-time-communications-platform-tenhands-now-uses-webrtc-on-chrome-for-plugin-free-video-chats/http://jp.techcrunch.com/archives/20130205real-time-communications-platform-tenhands-now-uses-webrtc-on-chrome-for-plugin-free-video-chats/http://jp.techcrunch.com/archives/20130205real-time-communications-platform-tenhands-now-uses-webrtc-on-chrome-for-plugin-free-video-chats/http://jp.techcrunch.com/archives/20130115plivo-launches-the-first-sdk-that-lets-developers-connect-webrtc-and-sip/http://jp.techcrunch.com/archives/20130115plivo-launches-the-first-sdk-that-lets-developers-connect-webrtc-and-sip/http://jp.techcrunch.com/archives/20130115plivo-launches-the-first-sdk-that-lets-developers-connect-webrtc-and-sip/http://jp.techcrunch.com/archives/20130115plivo-launches-the-first-sdk-that-lets-developers-connect-webrtc-and-sip/http://jp.techcrunch.com/archives/20130115plivo-launches-the-first-sdk-that-lets-developers-connect-webrtc-and-sip/http://jp.techcrunch.com/archives/20130115plivo-launches-the-first-sdk-that-lets-developers-connect-webrtc-and-sip/