0
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再び

1,776

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,776
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×