webrtcの話
TRANSCRIPT
WebRTCの話2014/06/25kawasaki.rb #013
金城 雄 (きんじょう ゆう)
Twitter : @youkinjohGitHub : @youkinjoh
このスライドはhttp://www.slideshare.net/You_Kinjoh/fundamentals-andapplicationsofhtml5secondedition からの抜粋です。
デモ参加のお願いAndroid or
Webカメラ有りのパソコン(主にMac)
できるだけ最新のChromeインターネット必須
WebRTC
WebRTC
リアルタイムコミュニケーションのAPIボイス・ビデオチャットP2P
http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 より引用
キャリア型通信
手段の例
市場
ユーザメリット事業者メリット
利用方法
固定電話 携帯電話 (TV放送)
インフラを持つキャリアが支配
世界中の人と会話できる
×
単独で利用
http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用
Over The Top
手段の例
市場
ユーザメリット事業者メリット
利用方法
Skype, WebEx(YouTube, Ustream)キャリアに縛られない独自の仕組みを提供する少数のベンダーが参加可能
世界中の人と無料/安価で会話できる
限定的なAPI提供一部連携可能
ユーザが組み合わせて利用
http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用
Webブラウザ型
手段の例
市場
ユーザメリット事業者メリット
利用方法
WebRTC
特別な仕組みは不要誰でも参加可能
専用アプリ無しで会話できる
完全にプログラマブル部品として利用可能
製品/サービスに組み込んで利用
http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用
キャリア型通信 Over The TopWebブラウザ型
手段の例
市場
ユーザメリット
事業者メリット
利用方法
固定電話携帯電話(TV放送)
Skype, WebEx(Youtube, Ustream)
WebRTC
インフラを持つキャリアが支配
キャリアに縛られない独自の仕組みを提供する少数のベンダーが参加可能
特別な仕組みは不要誰でも参加可能
世界中の人と会話できる
世界中の人と無料/安価で会話できる
専用アプリ無しで会話できる
× 限定的なAPI提供一部連携可能
完全にプログラマブル部品として利用可能
単独で利用 ユーザが組み合わせて利用
製品/サービスに組み込んで利用
http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用
WebRTC
2つの仕様Media Capture and Streams (getUserMedia)WebRTC 1.0: Real-time Communication Between Browsers
Media Capture and Streams (getUserMedia)
ブラウザからマイクやカメラにアクセス利用範囲はWebRTC以外とも音声処理(with Web Audio API)ボイスチェンジャー etc.画像処理(with Canvas)顔検出 etc.
顔認識ができるようになるのも時間の問題か?
DEMO
SAMPLE
<!DOCTYPE html><video id="video" /><script>navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = window.URL .createObjectURL(stream); video.play(); });</script>解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
<!DOCTYPE html><video id="video" /><script>navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = window.URL .createObjectURL(stream); video.play(); });</script>解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
ビデオ要素の表示とScript要素
<!DOCTYPE html><video id="video" /><script>navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = window.URL .createObjectURL(stream); video.play(); });</script>解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
ユーザメディアの取得開始
<!DOCTYPE html><video id="video" /><script>navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = window.URL .createObjectURL(stream); video.play(); });</script>解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
取得するユーザメディアはカメラとマイク
<!DOCTYPE html><video id="video" /><script>navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = window.URL .createObjectURL(stream); video.play(); });</script>解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
ユーザメディア取得時の動作を指定
<!DOCTYPE html><video id="video" /><script>navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = window.URL .createObjectURL(stream); video.play(); });</script>解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
ビデオ要素の取得ユーザメディアの指定再生開始
<!DOCTYPE html><video id="video" /><script>navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); video.src = window.URL .createObjectURL(stream); video.play(); });</script>解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
WebRTC 1.0: Real-time Communication Between
Browsers
ブラウザとブラウザを接続シグナリングの仕組みは別途必要SIPXMPPWebSocket <- 今のところ一番使われているetc.
DEMO
WebRTC 1.0: Real-time Communication Between
Browsers
NAT通過・ ネゴシエーションICE(STUN + TURN + α)STUNP2P・UDPホールパンチングTURNサーバ経由
WebRTC 1.0: Real-time Communication Between
Browsers
SDPセッション開始に必要な情報を記述DTLSUDP版TLS
WebRTC 1.0: Real-time Communication Between
Browsers
データ通信DTLSで全て暗号化されるMediaStream (SRTP・SRTCP)音声データ・映像データDataChannel (SCTP)テキストデータ・バイナリデータ
WebRTC 1.0: Real-time Communication Between
Browsers
SRTP・SRTCPリアルタイムデータ転送プロトコルSCTPTCPに似たプロトコル設定で、信頼性と引き換えにリアルタイム性の向上が可能
Web Server
WebSocketServer
ICE Server(STUN)
Browser Browser
NAT NAT
HTML+JS+CSS
Global IP/Port
signaling
HTML+JS+CSS
Global IP/Port
signaling
data
WebRTC DataBlack Magic
別資料
https://speakerdeck.com/feross/webrtc-data-black-magic
P18~53 をご覧下さい
WebRTC 1.0: Real-time Communication Between
BrowsersAPIが複雑でわかりにくい抽象化した仕様の多いHTML5の他のAPIと比べると非常に複雑それでも、従来のリアルタイム通信の処理よりは断然楽ジッタやパケットロス等の対策は、ブラウザが全て対応してくれる
WebRTC まとめ1
シグナリング経路が別途必要NAT通過の仕組みがあるP2Pでセキュアに通信ボイス・ビデオチャットが可能テキスト・バイナリの通信も可能
WebRTC まとめ2
APIが複雑ライブラリを使うという選択肢も特に面倒な部分はブラウザが処理ジッタ・パケットロス等の対策メディアの最適化等も
定番と言われるようなライブラリはまだありません。