WebRTC再び

2,632 views

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
2,632
On SlideShare
0
From Embeds
0
Number of Embeds
1,901
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×