WebRTCの話
2014/06/25
kawasaki.rb #013
金城 雄 (きんじょう ゆう)
Twitter : @youkinjoh
GitHub : @youkinjoh
このスライドは
http://www.slideshar...
デモ参加のお願い
Android
or
Webカメラ有りのパソコン(主にMac)
できるだけ最新のChrome
インターネット必須
WebRTC
WebRTC
リアルタイムコミュニケーションのAPI
ボイス・ビデオチャット
P2P
http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 より引用
キャリア型通信
手段の例
市場
ユーザ
メリット
事業者
メリット
利用方法
固定電話 携帯電話 (TV放送)
インフラを持つキャリアが支配
世界中の人と会話できる
×
単独で利用
http://www.slideshare.net/mgane...
Over The Top
手段の例
市場
ユーザ
メリット
事業者
メリット
利用方法
Skype, WebEx
(YouTube, Ustream)
キャリアに縛られない独自の仕組みを
提供する少数のベンダーが参加可能
世界中の人と無料/安価...
Webブラウザ型
手段の例
市場
ユーザ
メリット
事業者
メリット
利用方法
WebRTC
特別な仕組みは不要
誰でも参加可能
専用アプリ無しで会話できる
完全にプログラマブル部品として
利用可能
製品/サービスに組み込んで利用
http:/...
キャリア型通信 Over The Top Webブラウザ型
手段の例
市場
ユーザ
メリット
事業者
メリット
利用方法
固定電話
携帯電話
(TV放送)
Skype, WebEx
(Youtube,
Ustream)
WebRTC
インフラを...
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.
画像処理(w...
DEMO
SAMPLE
<!DOCTYPE html>
<video id="video" />
<script>
navigator.getUserMedia(
{video: true, audio: true},
function(stream) {
var v...
<!DOCTYPE html>
<video id="video" />
<script>
navigator.getUserMedia(
{video: true, audio: true},
function(stream) {
var v...
<!DOCTYPE html>
<video id="video" />
<script>
navigator.getUserMedia(
{video: true, audio: true},
function(stream) {
var v...
<!DOCTYPE html>
<video id="video" />
<script>
navigator.getUserMedia(
{video: true, audio: true},
function(stream) {
var v...
<!DOCTYPE html>
<video id="video" />
<script>
navigator.getUserMedia(
{video: true, audio: true},
function(stream) {
var v...
<!DOCTYPE html>
<video id="video" />
<script>
navigator.getUserMedia(
{video: true, audio: true},
function(stream) {
var v...
<!DOCTYPE html>
<video id="video" />
<script>
navigator.getUserMedia(
{video: true, audio: true},
function(stream) {
var v...
WebRTC 1.0: Real-time
Communication Between
Browsers
ブラウザとブラウザを接続
シグナリングの仕組みは別途必要
SIP
XMPP
WebSocket <- 今のところ一番使われている
etc.
DEMO
WebRTC 1.0: Real-time
Communication Between
Browsers
NAT通過・ ネゴシエーション
ICE(STUN + TURN + α)
STUN
P2P・UDPホールパンチング
TURN
サーバ経由
WebRTC 1.0: Real-time
Communication Between
Browsers
SDP
セッション開始に必要な情報を記述
DTLS
UDP版TLS
WebRTC 1.0: Real-time
Communication Between
Browsers
データ通信
DTLSで全て暗号化される
MediaStream (SRTP・SRTCP)
音声データ・映像データ
DataChannel ...
WebRTC 1.0: Real-time
Communication Between
Browsers
SRTP・SRTCP
リアルタイムデータ転送プロトコル
SCTP
TCPに似たプロトコル
設定で、信頼性と引き換えにリアルタ
イム性の向上...
Web Server
WebSocket
Server
ICE Server
(STUN)
Browser Browser
NAT NAT
HTML+JS+CSS
Global IP/Port
signaling
HTML+JS+CSS
Glo...
WebRTCData
BlackMagic
別資料
https://speakerdeck.com/feross/webrtc-data-black-magic
P18 53 をご覧下さい
WebRTC 1.0: Real-time
Communication Between
Browsers
APIが複雑でわかりにくい
抽象化した仕様の多い
HTML5の他のAPIと比べると
非常に複雑
それでも、従来のリアルタイム通信の
処理よ...
WebRTC まとめ1
シグナリング経路が別途必要
NAT通過の仕組みがある
P2Pでセキュアに通信
ボイス・ビデオチャットが可能
テキスト・バイナリの通信も可能
WebRTC まとめ2
APIが複雑
ライブラリを使うという選択肢も
特に面倒な部分はブラウザが処理
ジッタ・パケットロス等の対策
メディアの最適化等も
定番と言われるようなライブラリはまだありません。
Upcoming SlideShare
Loading in …5
×

WebRTCの話

1,814 views

Published on

Published in: Technology
  • Be the first to comment

WebRTCの話

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

×