Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WebRTC再び
Shigeyuki Takeuchi@13/12/20 Xtone勉強会
WebRTCって?
WebRTC(Web Real-Time Communications)は
W3Cが提唱するブラウザでリアルタイムコミュニ
ケーションを可能にするAPI群で、ビデオ・ボイスで
のチャットなどを提供します。
現在はまだドラフト...
サポートするブラウザが増えました

※2013/12現在(http://caniuse.com/stream)
 Androidでも使えた・AppleとMSは実装に消極的
iOSは・・・
Safariは非対応なので、Chromeでも試したけれど
も・・・
flagsがない orz
接続フロー
STUN
サーバ
1.グローバルIPとポートを取得

ブラウザA

ブラウザB
3.P2Pで直接接続

2.グローバルIPとポートなどの接
続情報を交換

アプリ
サーバ
API構成
● getUserMedia
カメラやマイクから入力された映像・音声をWebブラウザへ取り込む
● RTCPeerConnection
ブラウザ間でコネクションを貼り、映像・音声のストリームを送受信
● RTCDataChannel...
実際のコードは・・・
ブラウザA(caller)とブラウザB(callee)が通信すると
1.
2.
3.
4.
5.
6.
7.

[ブラウザA]アプリサーバよりhtmlやJavaScriptを取得します。
[ブラウザA]getUserMed...
そこでライブラリ
● webRTC.io
https://github.com/webRTC/webRTC.io
● SimpleWebRTC
https://github.com/HenrikJoreteg/SimpleWebRTC

● P...
デモ
ソースコード
https://github.com/takeshig/webrtc_sample
Upcoming SlideShare
Loading in …5
×

WebRTC再び

2,960 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

WebRTC再び

  1. 1. WebRTC再び Shigeyuki Takeuchi@13/12/20 Xtone勉強会
  2. 2. WebRTCって? WebRTC(Web Real-Time Communications)は W3Cが提唱するブラウザでリアルタイムコミュニ ケーションを可能にするAPI群で、ビデオ・ボイスで のチャットなどを提供します。 現在はまだドラフト段階です http://www.webrtc.org/
  3. 3. サポートするブラウザが増えました ※2013/12現在(http://caniuse.com/stream)  Androidでも使えた・AppleとMSは実装に消極的
  4. 4. iOSは・・・ Safariは非対応なので、Chromeでも試したけれど も・・・ flagsがない orz
  5. 5. 接続フロー STUN サーバ 1.グローバルIPとポートを取得 ブラウザA ブラウザB 3.P2Pで直接接続 2.グローバルIPとポートなどの接 続情報を交換 アプリ サーバ
  6. 6. API構成 ● getUserMedia カメラやマイクから入力された映像・音声をWebブラウザへ取り込む ● RTCPeerConnection ブラウザ間でコネクションを貼り、映像・音声のストリームを送受信 ● RTCDataChannel ブラウザ間でバイナリデータを送受信 ● RTCIceCandidate NAT超えのための仕組みを提供
  7. 7. 実際のコードは・・・ ブラウザA(caller)とブラウザB(callee)が通信すると 1. 2. 3. 4. 5. 6. 7. [ブラウザA]アプリサーバよりhtmlやJavaScriptを取得します。 [ブラウザA]getUserMediaでマイクやカメラのストリームを取得します。 表示する場合はVideoやAudioにアタッチします。 [ブラウザA]RTCPeerConnectionで接続要求をします。このとき、利用する ICE(STUN/TURNサーバ)の設定やストリーム、データチャンネル用のイベ ントハンドラを追加します。 [ブラウザA]RTCPeerConnectionで接続情報を取得したらアプリサーバへ接続依頼オファーを送信します。 [ブラウザB]Aと同様に1〜3を行います。 [ブラウザB]アプリサーバからオファーに受信する。通信許可アンサーを RTCSessionDescriptionで作成し、アプリサーバへ送信します。 [ブラウザA]アンサーを受信します。ブラウザ AとBが直接接続を開始します。 複雑!! しかもまだドラフトなのでブラウザごとに処理が若干違う
  8. 8. そこでライブラリ ● webRTC.io https://github.com/webRTC/webRTC.io ● SimpleWebRTC https://github.com/HenrikJoreteg/SimpleWebRTC ● PeerJS http://peerjs.com
  9. 9. デモ ソースコード https://github.com/takeshig/webrtc_sample

×