Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebRTC Training

WebRTC Training

WebRTCに関する基本的な説明から、実装方法に関する研修テキストで、実際の研修ではスマホとPCをWebRTCで接続したビデオチャットの実習にチャレンジします

More Decks by NTTテクノクロス株式会社

Other Decks in Technology

Transcript

  1. 3 目次(1/2) 1 WebRTC概説 1.1 WebRTCとは 1.2 WebRTCの特徴 1.3 対応ブラウザ、プラットフォーム

    2 IP電話について 2.1 IP電話はそもそもどうやってつながるか? 2.2 SIP/SDP 2.3 音声コーデック(PCMU/Opus)、映像コーデック(VP8)の概要説明 2.4 P2P vs B2BUA 2.5 NAT問題 2.6 NAT越え技術(STUN,TURN,ICE) WebRTC研修 Copyright© 2016 NTT Software Corporation
  2. 4 目次(2/2) 3 WebRTC詳細 3.1 アーキテクチャ図 3.2 処理の流れ 3.3 WebSocket

    3.4 getUserMedia 3.5 RTCPeerConnection 3.5.1 createOffer(RTCPeerConnectionのメソッド) 3.5.2 createAnswercreateOffer(RTCPeerConnectionのメソッド) 3.5.3 setLocalDescriptioncreateOffer(RTCPeerConnectionのメソッド) 3.5.4 setRemoteDescriptioncreateOffer(RTCPeerConnectionのメソッド) 3.6 SRTP 4 参考情報 4.1 DataChannelについて 4.2 画面共有について 4.3 ORTC 4.4 Stats API 4.5 sipML5 Asteriskを利用した実装例 4.6 WebRTCをサポートした当社の製品 4.7 その他有用なリンク WebRTC研修 Copyright© 2016 NTT Software Corporation
  3.  1.WebRTCは「Web Real-Time Communication」の略称。「Webの世界でプラ グインなしでリアルタイムコミュニケーションを実現するための技術」。W3C (World Wide Web Consorthium)で規定するこの機能に関連したブラウザのAPI をWebRTC

    APIと呼ぶ。(WebRTCといった場合にAPIのことを指す場合とこのA PIを利用して実現できる技術の総称を指す場合がある。)  2.これまでは、ブラウザそのものが音声通話・ビデオ通話を実現する能力はもっ てなかった(これまではプラグインをインストール)が、プラグインなしで実現できる  3.上記により、ブラウザが「電話」になる! 6 1.1 WebRTCとは WebRTC研修 Copyright© 2016 NTT Software Corporation
  4. 8 1.2 WebRTCの特徴  クライアント側はインストールレス  ブラウザがあればよい。(アプリケーションのインストールやブラウザへのプ ラグインのインストールは不要)。呼処理ロジックは、サーバからJavaScript としてダウンロードします。このため、機能追加にはサーバ側が対応すれば よい。(クライアントの変更不要。クライアントプログラムの開発費の低減)

     オープンな仕様  標準化予定の技術であるため、特定のベンダの製品に囲い込まれる可能 性は低い。  番号計画は自由  電話番号(0ABJ)がなくても、相手との接続が可能。既存の番号を利用する ことも可能。  SRTPサポート 強固なセキュリティ  NAT越えをサポート  データチャネル/画面共有  Webコンテンツとの融合  ブラウザがあれば、主要なコミュニケーション(音声・ビデオ・チャット・プレゼ ンス)が可能  ネットゲームへの音声・ビデオ通信の拡張  キネクトのような処理が可能(ビデオカメラ入力をインプットとしブラウザにダ ウンロードしたJavaScriptで画像を処理することが可能) WebRTC研修 Copyright© 2016 NTT Software Corporation
  5. 9 1.使えるか使えないかはブラウザの実装次第 IE, iOSが使えないのが痛い。。 (IEについてはORTCとして実装中) インストールが不要であるため、低リテラシーな利用者(年配の方、子供等)に 向けては、よい技術であるはずだが、動作するプラットフォームに縛りがある のはキビシイ 2.明日うごかなくなる可能性 ブラウザのWebRTC機能は安定しているとはいえ、動きがいきなり変わります。

    主には、W3C仕様の変更によりブラウザのインタフェース名が変更になる、 HTTPでうごいていたものが、HTTPSでないと動かなくなる #事前に開発版で先行リリースされているので、十分検証する必要有り 3.保守が案外大変 1つのブラウザだけでもバージョンにより動作が変わる。ブラウザ同士でも 実装のスピードが異なる。ブラウザの組み合わせ、バージョンの組み合わせ。。 4.WebRTCでつながる、というだけでは売れない フリーのプラットフォームも、多く、ただWebRTCでつながります、というだけでは 売り物にならない。具体的なサービス(WebRTCを使って、どう便利になるか)まで を求められる状況 1.2 WebRTCの特徴(マイナス面) WebRTC研修 Copyright© 2016 NTT Software Corporation
  6. 10 1.3 対応ブラウザ、プラットフォーム  標準化活動  W3C ブラウザ上のプログラミングAPIを規定 WebRTC 1.0

    (Editor’s Draft)  IETF 通信プロトコルを規定 議論は継続中  クライアント(ブラウザ) Googleが強いリーダシップを発揮し、ブラウザ側での実装を推進しています  Google ビデオ通信可能(Android版でも動作)  FireFox ビデオ通信可能(Android版でも動作)  Opera ビデオ通信可能(Android版でも動作)  Internet Explorer ORTC(後述)として実装を開始  Safari 実装の動きなし 注:Operaはバージョン15以降でレンダリングエンジンとしてWebKit/Blinkを採用。このため基本 的な機能がChromeと同じものとなっている。  サーバ  PRISM (TROPO社)  Asterisk (Digium社) Asterisk11でサポート済み(SIP over websocket)  SkyWay(NTT Com)  PeerJS(OSS)  他多数 WebRTC研修 Copyright© 2016 NTT Software Corporation
  7. 14 2.2 SIP/SDP IP電話を実現するためのプロトコルとしてはH.323, MGCP, Megacoなど、歴史的に 様々なプロトコルが存在しているが、現在広く使われているのはIETFが策定した SIP(Session Initiation Protocol)である(SIPは基本プロトコルの容易さ、高い拡張性

    という観点で他のプロトコルよりも優れていた。現状SIPの拡張仕様は多岐にわたる ため、これらを複数組みあわせた場合にトータルとして仕様自体は複雑となっている 場合がある)。 SIP (Session Initiation Protocol): 基本となるプロトコル仕様はRFC3261で規定される。 端末(SIP UA)のSIPネットワークへの登録(REGISTER)や他UAとの通信の確立 (INVITE)・終了(BYE)などの信号・手順を規定する。音声・映像のみならずプレゼ ンスやIMの拡張が可能であり、他のRFCで規定が行われている。 本プロトコルはあくまでの通信(セッション)の開始・終了などを規定するのみであり、 実際の通信の内容(音声であるか映像であるか、通信コーデックや通信ポート等) については規定しない。(この部分はSDPに記述される) ⇒WebRTCでは呼制御プロトコルは規定がないので、SIPを利用してもよいし別の プロトコルを利用してもよい。 SDP (Session Description Protocol): RFC4566で規定している。通信(セッション)でUA同士がやりとりする際の方式 (メディアの種類、コーデック、通信ポート番号、IPアドレス等)を交換する。 ⇒WebRTCでもピア間のやりとりで利用する。 WebRTC研修 Copyright© 2016 NTT Software Corporation
  8. 15 SIPメッセージ(INVITE) RFC3261から抜粋 INVITE sip:[email protected] SIP/2.0 Via: SIP/2.0/UDP pc33.atlanta.com;branch=z9hG4bK776asdhds Max-Forwards:

    70 To: Bob <sip:[email protected]> From: Alice <sip:[email protected]>;tag=1928301774 Call-ID: [email protected] CSeq: 314159 INVITE Contact: <sip:[email protected]> Content-Type: application/sdp Content-Length: 142 【参考】SIPメッセージの例、SDPメッセージの例 SDPメッセージ例 RFC4566から抜粋 v=0 o=jdoe 2890844526 2890842807 IN IP4 10.47.16.5 s=SDP Seminar i=A Seminar on the session description protocol u=http://www.example.com/seminars/sdp.pdf [email protected] (Jane Doe) c=IN IP4 224.2.17.12/127 t=2873397496 2873404696 a=recvonly m=audio 49170 RTP/AVP 0 m=video 51372 RTP/AVP 99 a=rtpmap:99 h263-1998/90000 WebRTC研修 Copyright© 2016 NTT Software Corporation
  9. 16 Alice SIPサーバ Bob 【参考】 SIPシーケンス(NAT越えや認証・セキュリティ、B2BUAなどを除いたシンプル例) RTP REGISTER 200 OK

    REGISTER 200 OK INVITE(with SDP(Offer)) INVITE 180 Ringing 180 Ringing 200 OK (with SDP (Answer)) 200 OK ACK WebRTC研修 Copyright© 2016 NTT Software Corporation
  10. 17 2.3 音声コーデック(PCMA/PCMU/Opus) 映像コーデック(VP8) の概要説明 ドラフトバージョンのRTCWeb仕様(IETF)では、音声について以下をサポートすることが 必須となっている。 ・PCMA/PCMU(ITU-T G.711 alaw/ulaw)

    非常に普及しているコーデック(特にulaw)。 ・Opus (RFC 6716) 最新の音声コーデック。低遅延 ・DTMF(RFC 4733) 音声信号でプッシュ信号(0~9、*, #)を送受信するフォーマット WebRTCをサポートするブラウザ同士では、少なくとも上記のような音声コーデック を利用した音声通信は可能である。(Chrome/FireFoxは使える) ビデオコーデックについては、IETF91でVP8とH.264の両方を実装することと決定された。 ⇒Chromeは現状、VP8のみ実装、FireFoxはVP8/H.264の両方を実装 既存の電話網の映像通信についてはH.264が利用されている場合が多いため、電話網とのビデオ を利用した相互接続時には、FireFoxの方が有利といえる。 WebRTC研修 Copyright© 2016 NTT Software Corporation
  11. 2.4 P2P vs B2BUA SIPで異なるピア間で通信を行う場合に、ピア同士が直接メディアをやりとりする方式 をP2P(Peer to Peer)と呼びます。これとは対照的に、メディアパスにサーバが介在する 方式も存在します。この場合、サーバはB2BUA(Back to

    Back User Agent)と呼ばれる 方式で動作します。 例えば、2つのSIPのネットワークがあり、SIPプロトコルやコーデックに差分がある場合 にB2BUAで変換処理を行うことにより、端末に影響・変更を与えずに2つのピア間での 通信を実現することができます。このような使い方をする際にこのSIPサーバはSIP-GW あるいはSBC(Session Border Controller)と呼ばれます。 18 WebRTC研修 Copyright© 2016 NTT Software Corporation
  12. 21 2.6 NAT越え技術(STUN,TURN,ICE) 192.168.1.100 192.168.1.101 SIPサーバ NATルーター 10.10.10.1 STUNを用いてNAT越えする場合 前述の問題を回避するためには、SIP-UAがデバイスのローカルのアドレスのみでなく

    NATの外のアドレスを意識してSDPに含める必要がある。このときに、利用するのがSTUN サーバである。 NATルーター 20.20.20.1 Publicな STUNサーバ NATルーター 10.10.10.1 192.168.1.100 Publicな STUNサーバ ①STUN binding request NATの外の アドレスを 教えてください。 ②STUN binding response NATの外の アドレスは 10.10.10.1 ですよ。 STUNの動作原理 WebRTC研修 Copyright© 2016 NTT Software Corporation
  13. 22 2.6 NAT越え技術(STUN,TURN,ICE) (続き) 192.168.1.100 192.168.1.101 SIPサーバ NATルーター 10.10.10.1 TURNサーバを用いたNAT越え

    前ページのSTUNサーバを利用したNAT越えは有効な解決策であるが、ある種類の構成で はNATを越えられない場合がある。このような場合にはメディアをリレーするTURN サーバをもちいる場合がある。ただし、TURNサーバを利用すると一般的に遅延が増加する ことやサーバの運用費がますことに注意が必要である。 NATルーター 20.20.20.1 TURNサーバ WebRTC研修 Copyright© 2016 NTT Software Corporation
  14. 24 WebRTCはHTML5で規定されるaudio要素、video要素を実現する技術の名称であり、以下の3 つの機能から成り立ちます。 ①getUserMedia機能(PCローカルなカメラ、マイク、スピーカデバイスアクセス) ②PeerConnection機能(他ブラウザと①のデータをU-planeで通信する機能) ③DataChannel機能(ピア間でのセキュアなデータ通信機能) これらの機能はWebRTCを実装するブラウザにプラグインなしで実装されます。上記の機能はブラ ウザがAPIとして公開しており、アプリケーション部から呼び出しが可能です。C-plane処理はアプ リケーション部で実行されます。アプリケーション部はJavaScriptとしてサーバからのダウンロード が可能です。

    Webブラウザ (HTML5クライアント) WebRTC アプリケーション部 (Javascript) プログラミング可能 Webブラウザ (HTML5クライアント) WebRTC アプリケーション部 (Javascript) プログラミング可能 RTC-Web サーバ U-plane処理(ICE、SRTP) (②PeerConnection機能) C-plane処理(SIP over websocket他) PCローカルのカメラ/マイクへのアクセス (①getUserMedia機能) データ通信機能 (③DataChannel機能) 3.1 アーキテクチャ 以降では、①②について中心にのべます。 ③は参考。 API API 24 WebRTC研修 Copyright© 2016 NTT Software Corporation
  15. 25 以下に大まかな処理の流れを述べます(ICE処理は割愛)。 1.画面ロードあるいはボタン押下などをトリガに、getUserMediaを呼び出しローカルのカメラ・マイクへのアクセ スを取得し、自画面に表示します。 2.PeerConnectionオブジェクトを生成し、メディア情報(Offer SDP)を作成します。ローカルSDPに本情報をセッ トします。 3.2で作成したメディア情報(Offer SDP)をRTC-Webサーバ経由で相手に送ります。 4.Offerを受信したら、PeerConnectionを生成します。受信したSDPをリモートSDPにセットしたあとで、Answer

    SDPを生成してRTC-Webサーバを使って相手に送ります。Answer SDPはローカルSDPにセットします。 5.受信したAnswerをリモートSDPにセットします。 Webブラウザ (HTML5クライアント) アリス WebRTC アプリケーション部 (Javascript) プログラミング可能 Webブラウザ (HTML5クライアント) ボブ WebRTC アプリケーション部 (Javascript) プログラミング可能 RTC-Web サーバ U-plane処理(ICE、SRTP) (②PeerConnection機能) C-plane処理(SIP over websocket他) PCローカルのカメラ/マイク へのアクセス(①getUserMedia機能) 3.2 処理の流れ Offer Ans wer 25 WebRTC研修 Copyright© 2016 NTT Software Corporation
  16. 午後はWebRTCのサンプル構築を3つのステップ(演習1、演習2、演習3)に分けて進めます。 演習1では、SDP情報を運ぶために利用するWebSocketの仕組み(SDPはのせません。まずは 純粋なトランスポートとしての利用方法について学びます) 演習2では、ローカルメディアへのアクセス(getUserMedia) 演習3では、演習1で利用したWebSocketにSDP(Offer,Answer)をのせて実際にWebRTCの動作 を行います。 演習の予告(演習1、演習2) 26 Webブラウザ (HTML5クライアント)

    WebRTC アプリケーション部 (Javascript) プログラミング可能 Webブラウザ (HTML5クライアント) WebRTC アプリケーション部 (Javascript) プログラミング可能 RTC-Web サーバ U-plane処理(ICE、SRTP) (②PeerConnection機能) C-plane処理(SIP over websocket他) PCローカルのカメラ/マイクへのアクセス (①getUserMedia機能) データ通信機能 (③DataChannel機能) API API 演習1の範囲 演習2の範囲 26 WebRTC研修 Copyright© 2016 NTT Software Corporation
  17. 27 3.3 WebSocket 概要 HTTPを拡張したWebSocketプロトコルを用いることで、Web上での双方向通信 や高速通信を可能とするAPI。 TCPソケット通信に類似のコーディングを行うことが可能。 何ができるか? ・ブラウザ上で双方向通信を行うことができる。 例:チャット、ネットワークゲームなど

    ※従来のブラウザでの双方向通信の問題を解消。 - 通信するたびに不要なHTTPヘッダの付加 - サーバからの応答が返ってこないと次のデータを送信できない WebRTC研修 Copyright© 2016 NTT Software Corporation
  18. 29 ・プロトコルバージョンにより仕様が異なる。 特にWebSocketドラフト版に対応しているブラウザ・サーバは 組み合わせによっては動作しない可能性がある。 ※最新のバージョンは、Sec-WebSocket-Version:13 (RFC 6455) ・HTTPと異なる独自プロトコルを用いるため、WebSocketに対応した サーバが必要 対応サーバには、Tomct

    7.0、Jetty 8.0、socket.io(node.js)などが存在する。 ※Server-Sent Eventsは既存のHTTPサーバが利用可能 ・サーバ側コードもWebSocketに合わせた実装が必要 利用上の注意点 3.3 WebSocket(続き) WebRTC研修 Copyright© 2016 NTT Software Corporation
  19. 30 // WebSocketの初期化(localhost:8124はWebSocket配置するサーバに合わせて修正) var ws = new WebSocket("ws://localhost:8124/"); // サーバへデータ送信

    ws.send(data); // サーバからデータ受信したときの処理 ws.onmessage = function(e) { // e.data でサーバから受信したデータを取得可能 var res = e.data; // 以降、任意の処理 使用例 ※サーバ側のWebSocketプログラミングの説明は、本研修では省略します。 ※一部抜粋 3.3 WebSocket(続き) No. API 概要 1 WebSocket(URL) 接続先URLを指定してWebSocketを初期化 2 send(data) 指定されたdata(文字列、バイナリ)を送信。 3 onmessage(callback) サーバからデータ受信した際の処理を定義。 callbackに受信時の関数を指定。 4 close() サーバとの接続を切断。 WebRTC研修 Copyright© 2016 NTT Software Corporation
  20. 31 3.4 getUserMedia <input type="button" value="Start" onclick="start()" id="startBtn"> <script> var

    startBtn = document.getElementById('startBtn'); function start() { navigator.getUserMedia({audio:true, video:true}, gotStream, logError); startBtn.disabled = true; } function gotStream(stream) { stream.onended = function () { startBtn.disabled = false; }; } function logError(error) { log(error.name + ": " + error.message); } </script> 使用例 No. API 概要 1 getUserMedia(MediaStreamConstraints constraints, NavigatorUserMediaSuccessCallback successCallback, NavigatorUserMediaErrorCallback errorCallback) ブラウザが音声入力デバイス(マイク)、映像入力 デバイス(カメラ)にアクセスし、そこから取得でき るストリーム。 第1引数:音声、映像の指定 第2引数:アクセス成功時のcallback 第3引数:アクセス失敗時のcallback WebRTC研修 Copyright© 2016 NTT Software Corporation
  21. 33 3.5 RTCPeerConnection RTCPeerConnectionでは複数のメソッドを定義しているが、この中で特に重要なものについて本 研修(講義および演習)で扱う。 No. API 概要 1 RTCPeerConnection

    オブジェクトコンストラクタ 2 createOffer Offerの生成 3 createAnswer Answerの生成 4 setLocalDescription ローカルSDPの設定 5 setRemoteDescription リモートSDPの設定 6 updateIce ICE/TURNサーバ情報の更新 7 addIceCandidate 相手から通知されたICE candidateをブラウザに通知 8 getConfiguration PeerConnectionの設定を取得 9 getLocalStreams PeerConnectionを使って相手に送っているストリーム(映像・ 音声)を取得 10 getRemoteStreams PeerConnectionを使って相手に送っているストリーム(映像・ 音声)を取得 11 getStreamById IDで指定されたストリームを取得 WebRTC研修 Copyright© 2016 NTT Software Corporation
  22. 34 No. API 概要 12 addStream 指定したストリームをPeerConnectionに追加 (典型的な例はgetUserMediaで取得したストリームを PeerConnectionに追加する) 13

    removeStream 指定したストリームをPeerConnectionから削除する 14 close 相手とのP2P通信を終了する 15 localDescription (読み取り専用)ローカルのSDP情報 16 remoteDescription (読み取り専用)リモートのSDP情報 17 signalingState (読み取り専用)通話状態 18 iceGatheringState (読み取り専用)ICEの情報収集状態 19 iceConnectionState (読み取り専用)ICEの接続状態 20 onnegotiationneeded 21 onicecandidate ICE candidateが取得できた場合のcallback 22 onsignalingstatechange 通話状態が変化した場合のcallback 3.5 RTCPeerConnection(続き) WebRTC研修 Copyright© 2016 NTT Software Corporation
  23. 35 No. API 概要 23 onaddstream リモートピアがストリームを追加した場合のcallback 24 onremovestream リモートピアがストリームを削除した場合のcallback

    25 oniceconnectionstatechange ICE状態が変化した場合のcallback 3.5 RTCPeerConnection(続き) WebRTC研修 Copyright© 2016 NTT Software Corporation
  24. 37 No. API 概要 1 createOffer(RTCSessionDescriptionCallback successCallback, RTCPeerConnectionErrorCallback failureCallback, RTCOfferOptions

    options) Offer SDPの生成を行う 第1引数:成功時のコールバック 第2引数:失敗時のコールバック 第3引数:Offer生成時のオプション指定(音声 受信、ビデオ受信の有無など) 3.5.1 createOffer (RTCPeerConnectionのメソッド) WebRTC研修 Copyright© 2016 NTT Software Corporation
  25. 38 No. API 概要 1 createAnswer (RTCSessionDescriptionCallback successCallback, RTCPeerConnectionErrorCallback failureCallback);

    Answer SDPの生成を行う。 第1引数:アクセス成功時のcallback 第2引数:アクセス失敗時のcallback 3.5.2 createAnswer (RTCPeerConnectionのメソッド) WebRTC研修 Copyright© 2016 NTT Software Corporation
  26. 39 No. API 概要 1 setLocalDescription (RTCSessionDescription description, VoidFunction successCallback,

    RTCPeerConnectionErrorCallback failureCallback) ブラウザに自マシン(すなわちローカル)のSDP をセットする。 第1引数:セットするSDP 第2引数:アクセス成功時のcallback 第3引数:アクセス失敗時のcallback 典型的な例では発信者はcreateOfferで生成し たSDPを本APIで設定し、受信者は createAnswerで生成したSDPを本APIで設定 する 3.5.3 setLocalDescription (RTCPeerConnectionのメソッド) WebRTC研修 Copyright© 2016 NTT Software Corporation
  27. 40 No. API 概要 1 setRemoteDescription (RTCSessionDescription description, VoidFunction successCallback,

    RTCPeerConnectionErrorCallback failureCallback); ブラウザに相手マシン(すなわちリモート)の SDPをセットする。 第1引数:セットするSDP 第2引数:アクセス成功時のcallback 第3引数:アクセス失敗時のcallback 典型的な例では発信者は相手が createAnswerで生成して送ってきたSDPを本 APIで設定し、受信者は相手がcreateOfferで 生成して送ってきたSDPを本APIで設定する 3.5.4 setRemoteDescription (RTCPeerConnectionのメソッド) WebRTC研修 Copyright© 2016 NTT Software Corporation
  28. 41 【参考】 処理の流れ(発信者、受信者 APIの呼び出し方の大まかな流れ) 発信者 受信者 1.webSocket確立 1.webSocket確立 Webソケットサーバ 2.ユーザからの発呼トリガ

    3.PeerConnectionオブジェクト 生成 4.getUserMedia 5.addStream() 6.createOffer() 7.setLocalDescription 8.SDP Offerを相手に送信 2.PeerConnectionオブジェクト生成 3.setRemoteDescription 4.getUserMedia 5.addStream() 6.createAnswer() 7.setLocalDescription 8.SDP Answerを相手に送信 9.setRemoteDescription 注:順序は例。一部前後してもよいWebRTC研修 Copyright© 2016 NTT Software Corporation
  29. 43 3.6 SRTP WebRTCでは従来の電話網(あるいはIP電話網)とは異なり、RTPで運ばれる メディアデータ(音声orビデオ)がインターネット上を流れる可能性がある。このため RTPについてセキュリティを高めるためにSRTP(Secure RTP)を利用することが 必須となっている。 (G.711 ulawなどの代表的なコーデックでエンコードされたRTPパケットは暗号化

    なしで送ると盗聴された場合に、容易に通話内容を再生することが可能となっている) SRTPでは、セッション開始時にピア間で交換した共通鍵を利用して、 音声データの暗号化等を行う。鍵交換の方式にはDTLS(UDP用のTLS。メディアパスを 利用して鍵交換)を利用する。 WebRTC研修 Copyright© 2016 NTT Software Corporation
  30. 45 4.1 DataChannelについて WebRTCでは音声・ビデオ以外の汎用的なデータについてもセキュアに2者間で 通信する仕組みが用意されています。これをWebRTCではData channelと呼んでいます。 Data channelはSCTP(Stream Control Transmission

    Protocol)を利用しているため 順序保証/到達確認を可能にしています。また、通信はDTLSを利用して暗号化されるため セキュアな通信が保証されます。Data channelによる通信は音声・ビデオ通信とは独立して いるため、どちらか一方だけ利用することも両方を使うことも可能となっています。 192.168.1.100 192.168.1.101 RTCWebサーバ Data channel機能と音声・ビデオ通信機能の関係 音声・ビデオ通信 データ通信 WebRTC研修 Copyright© 2016 NTT Software Corporation
  31. 46 4.2 画面共有 現状、Chrome/FireFoxでは、カメラ・マイクデバイス以外に、デスクトップや特定の アプリケーション画面、ブラウザのタブを、他のブラウザと共有することが可能となって います。 注1)Chromeの場合には、Chrome Extensionをインストールする必要がある (以前は、インストール無しで実行可能であったが、セキュリティ的によくないため、 現状のような仕組みとなっている)

    FireFoxの場合には、Nightly版で開発フラグをたてれば動く 動作原理としては、ビデオ画面のWebRTCと同様であり、カメラからの入力映像のかわり にPC上の画面をビデオとして相手に送ります。 このため、例えばリモートサポートのような「相手のPCの遠隔操作(支援)」的なものは これ単体ではできません。 #それでも特定の用途には非常に有用だと考えます。 WebRTC研修 Copyright© 2016 NTT Software Corporation
  32. 48 4.4 Stats APIについて WebRTCの統計情報について取得するAPIとしてStats API(Statistics API) がW3Cで議論されています。(一部ブラウザでは実装済み) Identifiers for

    WebRTC's Statistics API(Working Draft) http://www.w3.org/TR/webrtc-stats/ ⇒インターネット上で通信することが前提であるWebRTCでメディア情報やNAT超え(ICE) の統計情報が取得できる。 パケットロス、遅延、ジッタなどの統計情報がブラウザ上で取得できるため、たとえば 映像品質が悪い場合に自動的に音声のみに切り替えを行う等の処理が期待できる WebRTC研修 Copyright© 2016 NTT Software Corporation
  33. WebRTCでリアルタイム通信を実現できることにより、WebRTCをサポートしたブラウザとSIPクライ アント間での相互接続の実現性も検討されている。 以下に、WebRTCサーバを拡張する場合(①)、ブラウザベースのSIPクライアントを利用する場合 (②)のアーキテクチャを示す。 ②で示したブラウザベースのSIPクライアントとして、オープンソースで公開されているのが、 sipML5である。 Web SIP/IMS Network SIP

    クライアント RTC-Web サーバ SIP 拡張 ROAP over HTTP、他 Web SIP/IMS Network SIP クライアント SIP sipML5 サーバ SIP over WebSocket Web ブラウザ WebRTC Web ブラウザ WebRTC sipクライアント WebRTC サーバの拡張 ブラウザベースの SIPクライアント ① ② sipML5 SIP サーバ SIP SIP SIP サーバ SIP 4.5 sipML5 Asteriskに関する解説(SIPとWebRTCの相互接続実現方法) 49 WebRTC研修 Copyright© 2016 NTT Software Corporation
  34. 50 sipML5とは、Doubango Telecomが2012年5月に発表したブラウザベースのSIPクライアントである。 WebRTCをサポートしているHTML5仕様のブラウザにsipML5を導入することで、SIP/IMSネット ワークに接続しているクライアントとの音声/ビデオ通信、インスタントメッセージング等をブラウザ上 で動作させることが可能となる。 Web SIP/IMS Network SIP

    クライアント sipML5 サーバ SIP over WebSocket Webブラウザ (HTML5クライアント) WebRTC Javascript SIP Javascript SDP SIP Proxy sipML5 ※動作させるためには、 webrtc2sip(Doubango プロダクト)が必要 (詳細後述) ブラウザ-SIP端末間で音声/ビデオ 通信やインスタントメッセージング等 のコミュニケーションが可能 SIP SIP サーバ SIP サポートされる機能 ・Audio / Video call ・Instant messaging ・Presence ・Call Hold / Resume ・Explicit Call transfer ・Multi-line and multi- account ・Dual-tone multi- frequency signaling (DTMF) using SIP INFO 4.5 sipML5 Asteriskに関する解説(sipML5とは) 50 WebRTC研修 Copyright© 2016 NTT Software Corporation
  35. 【参考】 sipML5の動作(呼確立シーケンス) - アーキテクチャ②に対応 51 Chrome (Alice) SipML5 server (webrtc2sip

    ) SIPクライアン ト(Carry) 1. HTTP GET 3. REGISTER 0. JavaScript download(SIPロジック) SIP server 2. 101 Response (upgrade to SIP) 4. REGISTER 6. 200 OK 5. 200 OK 7. INVITE 8. INVITE 9. INVITE 10. INVITE SRTP 通常のSIP IVITEシーケンス +U-Plane処理(ICEのConnectivity check含む) サーバとのサブプロトコルネゴシェーション (S)RTP 51 WebRTC研修 Copyright© 2016 NTT Software Corporation
  36. 53 Chrome (Alice) Asterisk SIPクライアン ト(Carry) 1. HTTP GET 3.

    REGISTER 2. 101 Response (upgrade to SIP) 4. 200 OK 5. INVITE 10. INVITE SRTP 通常のSIP IVITEシーケンス +U-Plane処理(ICEのConnectivity check含む) サーバとのサブプロトコルネゴシェーション (S)RTP 【参考】 sipML5の動作(呼確立シーケンス) - Asteriskを利用した場合 53 WebRTC研修 Copyright© 2016 NTT Software Corporation
  37. 55 http://peerconnection-video- chat.herokuapp.com/webrtc_report/webrtc_summary.html 4.7 その他有用なリンク http://blog.wnotes.net/blog/article/webrtc-beginning http://tjun.org/blog/2013/12/webrtc_p2p/ WebRTCに使われるP2Pの技術 WebRTCを仕組みから実装までやってみる WebRTC

    GetUserMediaとPeerConnectionについて http://dev.w3.org/2011/webrtc/editor/archives/20140704/webrtc.html W3C WebRTC 1.0: Real-time Communication Between Browsers WebRTC研修 Copyright© 2016 NTT Software Corporation