Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WebRTC Training
Search
NTTテクノクロス株式会社
July 07, 2016
Technology
0
300
WebRTC Training
WebRTCに関する基本的な説明から、実装方法に関する研修テキストで、実際の研修ではスマホとPCをWebRTCで接続したビデオチャットの実習にチャレンジします
NTTテクノクロス株式会社
July 07, 2016
Tweet
Share
More Decks by NTTテクノクロス株式会社
See All by NTTテクノクロス株式会社
NTT TechConference #2 Closing Keynote
ntttechnocross
4
2.5k
僕らはStackStormをどう使うべきか / NTT TechConference #2 StackStorm
ntttechnocross
1
3.3k
ネットワークスイッチ構築実践 2.STP・RSTP・PortSecurity・StormControl・SPAN・Stacking編
ntttechnocross
0
310
ネットワークスイッチ構築実践 1.VLAN・LinkAggregation編
ntttechnocross
0
340
ネットワーク構築訓練入門
ntttechnocross
1
240
Androidテスティング実践 基礎編
ntttechnocross
2
310
Androidテスティング実践2 システムテスト編
ntttechnocross
1
300
Androidテスティング実践3 ユニットテスト・CI編
ntttechnocross
0
290
Androidアプリケーション開発中級研修 前編
ntttechnocross
2
510
Other Decks in Technology
See All in Technology
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
Nix入門パラダイム編
asa1984
2
200
小規模に始めるデータメッシュとデータガバナンスの実践
kimujun
3
580
オニオンアーキテクチャで実現した 本質課題を解決する インフラ移行の実例
hryushm
14
3k
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
210
フルカイテン株式会社 採用資料
fullkaiten
0
36k
生成AIの強みと弱みを理解して、生成AIがもたらすパワーをプロダクトの価値へ繋げるために実践したこと / advance-ai-generating
cyberagentdevelopers
PRO
1
180
物価高なラスベガスでの過ごし方
zakky
0
370
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
170
10分でわかるfreee エンジニア向け会社説明資料
freee
18
520k
【若手エンジニア応援LT会】AWSで繋がり、共に成長! ~コミュニティ活動と新人教育への挑戦~
kazushi_ohata
0
180
生成AIとAWS CDKで実現! 自社ブログレビューの効率化
ymae
2
330
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
The Cost Of JavaScript in 2023
addyosmani
45
6.6k
Code Review Best Practice
trishagee
64
17k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
Ruby is Unlike a Banana
tanoku
96
11k
What's new in Ruby 2.0
geeforr
342
31k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
Speed Design
sergeychernyshev
24
570
Designing Experiences People Love
moore
138
23k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Transcript
WebRTC研修(講義)
2 本スライドは、NTTソフトウェア社内技術者育成研修(ソフト道場研修)テキストです。 【著作権・免責事項】 • 本セミナーコースの内容、本資料のすべての著作権は、NTTソフトウェア株式会社に帰属します。 • 無断での本資料の複写、複製、再利用、転載、転用を禁じます。 • 本資料と演習等で利用するすべての教材は、NTTソフトウェア株式会社からの保証なしに提供されます。 •
本書に記載されている会社名および製品名は、一般に各社の商標または登録商標です。 WebRTC研修 Copyright© 2016 NTT Software Corporation
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
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
5 1.WebRTC概説 WebRTC研修 Copyright© 2016 NTT Software Corporation
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
7 【参考】インターネットでアクセス可能なサービス例 BizMee(Web会議) https://bizmee.net/ FaceKat http://shinydemos.com/facekat/ Skyway http://nttcom.github.io/skyway/ WebRTC研修 Copyright©
2016 NTT Software Corporation
8 1.2 WebRTCの特徴 クライアント側はインストールレス ブラウザがあればよい。(アプリケーションのインストールやブラウザへのプ ラグインのインストールは不要)。呼処理ロジックは、サーバからJavaScript としてダウンロードします。このため、機能追加にはサーバ側が対応すれば よい。(クライアントの変更不要。クライアントプログラムの開発費の低減)
オープンな仕様 標準化予定の技術であるため、特定のベンダの製品に囲い込まれる可能 性は低い。 番号計画は自由 電話番号(0ABJ)がなくても、相手との接続が可能。既存の番号を利用する ことも可能。 SRTPサポート 強固なセキュリティ NAT越えをサポート データチャネル/画面共有 Webコンテンツとの融合 ブラウザがあれば、主要なコミュニケーション(音声・ビデオ・チャット・プレゼ ンス)が可能 ネットゲームへの音声・ビデオ通信の拡張 キネクトのような処理が可能(ビデオカメラ入力をインプットとしブラウザにダ ウンロードしたJavaScriptで画像を処理することが可能) WebRTC研修 Copyright© 2016 NTT Software Corporation
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
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
11 2.IP電話について WebRTC研修 Copyright© 2016 NTT Software Corporation
12 2.1 IP電話はそもそもどうやってつながるか? 従来、固定電話などに代表されるように「電話」は専用のサーバ(電話交換機) や専用の通信網(電話網)、専用の端末(電話機)を用いて提供される特殊なサービスで あった。専用のものを利用するため、開発・運用コストは高かった。 (通信については過去はアナログ信号が使われていたが、ISDNによりデジタル化が 図られていたが、IPベースではなかった) 20世紀末のインターネット革命により、IP通信が普及するにつれて、電話網についても IP化の波が到来し、「IP電話」が登場した(2002年から番号割り当て開始。0ABJ番号を
もたないVoIPサービスはそれ以前からも存在。)。 次ページに従来の電話網とIP電話の一つであるNGNについて比較している。 WebRTC研修 Copyright© 2016 NTT Software Corporation
13 http://itpro.nikkeibp.co.jp/article/COLUMN/20070123/259321/ から引用 2.1 IP電話はそもそもどうやってつながるか?(続き) WebRTC研修 Copyright© 2016 NTT Software
Corporation
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
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
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
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
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
19 2.5 NAT問題 SIPを利用したP2P接続では、SIPサーバを介して通話者(例.AliceとBob)同士がSDPを 使ってアドレスを交換した後に、直接メディア通信(音声/ビデオ/音声+ビデオ)を行う。 通話者同士が同一のLAN内に属していれば、互いに通信が可能であるが、NATルータが 2者間に存在していると、通信ができない(NAT問題)。 WebRTC研修 Copyright© 2016
NTT Software Corporation
20 2.5 NAT問題(補足) メディア接続の際にはSIP-UAはSDPに記述されたIPアドレスを使って 相手との接続を行おうとする。 ただし、通常、SIP-UAを動かしているデバイスはローカルなアドレスしか意識しないため SDPの中にはローカルのIPアドレスを設定する(NATの外のアドレスは通常は知りようが ないし設定しない)。 WebRTC研修 Copyright©
2016 NTT Software Corporation
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
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
23 3.WebRTC詳細 WebRTC研修 Copyright© 2016 NTT Software Corporation
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
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
午後は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
27 3.3 WebSocket 概要 HTTPを拡張したWebSocketプロトコルを用いることで、Web上での双方向通信 や高速通信を可能とするAPI。 TCPソケット通信に類似のコーディングを行うことが可能。 何ができるか? ・ブラウザ上で双方向通信を行うことができる。 例:チャット、ネットワークゲームなど
※従来のブラウザでの双方向通信の問題を解消。 - 通信するたびに不要なHTTPヘッダの付加 - サーバからの応答が返ってこないと次のデータを送信できない WebRTC研修 Copyright© 2016 NTT Software Corporation
28 双方向通信 Web サーバ チャットアプリの例 メッセージ「Hello」 メッセージ「Hello」 WebSocket開始 メッセージ「Hi」 メッセージ「Hi」
コネクション維持 3.3 WebSocket(続き) WebRTC研修 Copyright© 2016 NTT Software Corporation
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
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
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
32 セキュリティの観点から、最新のChromeではhttpsスキームでダウンロードした JavaScriptからでなければgetUserMediaを呼び出せなくなっています。 (不正なサイトにアクセスし、そこからダウンロードしたJavaScriptが、カメラ・マイクに アクセスできるようになると、セキュリティ上、問題となる可能性があります。) 今回の演習も元々、HTTPSで動作するように作っていたため、JavaScript含めて、 大きく書き直しています。 3.4 getUserMedia(続き) WebRTC研修
Copyright© 2016 NTT Software Corporation
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
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
35 No. API 概要 23 onaddstream リモートピアがストリームを追加した場合のcallback 24 onremovestream リモートピアがストリームを削除した場合のcallback
25 oniceconnectionstatechange ICE状態が変化した場合のcallback 3.5 RTCPeerConnection(続き) WebRTC研修 Copyright© 2016 NTT Software Corporation
36 No. API 概要 1 RTCPeerConnection(RTCConfiguration pc_config) PeerConnectionオブジェクトのコンストラクタ 第1引数:RTC設定(ICE/TURNサーバの指定、 ICEトランスポートの指定、ピア名の指定)
3.5 RTCPeerConnection(続き) WebRTC研修 Copyright© 2016 NTT Software Corporation
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
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
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
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
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
42 【参考】 APIに関する注記 今回の演習ではChromeを利用します。 getUserMedia, RTCPeerConnection利用時には以下のベンダプレフィックスをつけた 形で呼び出しを行ってください。 getUserMedia -> navigator.webkitGetUserMedia
RTCPeerConnection -> new webkitRTCPeerConnection WebRTC研修 Copyright© 2016 NTT Software Corporation
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
44 4.参考情報 WebRTC研修 Copyright© 2016 NTT Software Corporation
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
46 4.2 画面共有 現状、Chrome/FireFoxでは、カメラ・マイクデバイス以外に、デスクトップや特定の アプリケーション画面、ブラウザのタブを、他のブラウザと共有することが可能となって います。 注1)Chromeの場合には、Chrome Extensionをインストールする必要がある (以前は、インストール無しで実行可能であったが、セキュリティ的によくないため、 現状のような仕組みとなっている)
FireFoxの場合には、Nightly版で開発フラグをたてれば動く 動作原理としては、ビデオ画面のWebRTCと同様であり、カメラからの入力映像のかわり にPC上の画面をビデオとして相手に送ります。 このため、例えばリモートサポートのような「相手のPCの遠隔操作(支援)」的なものは これ単体ではできません。 #それでも特定の用途には非常に有用だと考えます。 WebRTC研修 Copyright© 2016 NTT Software Corporation
47 4.3 ORTCについて ORTC (Object RTC)という新しいAPI仕様がW3Cで議論されています。 ORTC特徴: ・SDPを直接操作しなくてよくなる(SDPの理解はWebディベロッパには難解) ・メディア操作をAPIを介して提供する ・Internet
Explorerで実装される予定 ・既存のWebRTCの上位互換APIとして共存する可能性がある WebRTC研修 Copyright© 2016 NTT Software Corporation
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
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
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
【参考】 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
52 Asteriskとは米Digium社が開発したオープンソースのPBXである。 SIP, IAX, H.323など複数の呼処理プロトコルに対応している。 Asterisk バージョン11からSIP over websocketをサポートすることによりwebRTC対応のブラウザを 端末として利用することを可能にしている。
4.5 sipML5 Asteriskに関する解説(Asteriskとは) 52 WebRTC研修 Copyright© 2016 NTT Software Corporation
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
54 4.6 WebRTCをサポートした当社の製品 弊社でもAsteriskをベースとしたWebRTC製品を製造しており、NTT研究所様の 「アトリエN」施策でご利用いただいております。 https://developer.api-trial.jp/ja/apis/crossway/document (図はNTT研究所様のHPからの抜粋) WebRTC研修 Copyright© 2016
NTT Software Corporation
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
https://www.ntts.co.jp/products/soft_dojyo/index.html