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.

Data channelの活用方法とその可能性 - WebRTC Conference Japan

4,639 views

Published on

Feb. 9th: Updated to the latest version (used in actual session)

2015年2月6日 WebRTC Conference Japanセッション
「DataChannelの活用方法とその可能性」の資料の最新版です。
転載の場合は弊社名もどこかに記載しておいて頂ければ幸いです。
Mist Technologies, Inc.
CEO/Founder 田中 晋太朗

If someone want this to be translated in English, please leave a comment for me.

Published in: Technology

Data channelの活用方法とその可能性 - WebRTC Conference Japan

  1. 1. 1 WebRTC Conference Japan WebRTC DataChannelの活⽤用⽅方法とその可能性 2015/2/6 13:00-13:20 @ソラシティカンファレンスセンター Mist Technologies 株式会社 CEO/Founder
 ⽥田中  晋太朗(たなか  しんたろう  / Shintaro Tanaka)
 Twitter: @qpSHiNqp
  2. 2. 2 ⽥田中  晋太朗(たなか  しんたろう)      @qpSHiNqp •  Mist Technologies株式会社  代表 → http://www.mist-t.co.jp/ •  MistCDNというP2P型CDNを作っています ⾃自⼰己紹介
  3. 3. 3 •  WebRTC DataChannelのおさらい •  ひねりのある使い⽅方事例例紹介 +使⽤用上の注意など 今⽇日のお題
  4. 4. 4 WebRTC DataChannelのおさらい
  5. 5. 5 •  サーバを介さずに「テキスト」や「バイナリデータ」を送受信 •  → P2P •  低レイテンシ, サーバの仕事の削減などのメリット •  ArrayBuffer, ArrayBufferView, Blob, Stringを送れる(send) 概要 WebRTC DataChannelのおさらい var peerConnection = new RTCPeerConnection();! var dataChannel =! peerConnection.createDataChannel(“hogehoge”, dcOptions);! // dcOptionsでSCTPなどのconfig! dataChannel.onmesage = function(evt) {! console.log(evt.data);! };! // 注) createDataChannelしたあとでcreateOffer/Answerしないといけない! dataChannel.send(“This is a test message.”); // 送る
  6. 6. 6 ※1 SCTPの動作設定 createDataChannelの第2引数で “maxRetransmitTime”も “maxRetransmits”も指定しなけれ ばReliableモード (TCP的) DataChannel 直接コードから触る部分 SCTP TCPとUDPの良良いとこ取り → Configurable※1 DTLS Payloadの暗号化などを⾏行行う UDP 上位SCTPで柔軟なTransport 機能を与えるためUDPを利利⽤用 IPなど下層 プロトコルスタック WebRTC DataChannelのおさらい var dcOptions = {! ordered: false,! maxRetransmitTime: 3000,! maxRetransmits: 5! };! var dc =! pc.createDataChannel(! “foo”, dcOptions);
  7. 7. 7 チャット?  他にもいろいろあるでしょう! ひねりのある使い⽅方事例例紹介
  8. 8. 8 •  DHT (分散ハッシュテーブル) の ⼀一種 ”Chord”をWebRTCで実装 •  WebRTCノードで円形の オーバーレイトポロジを形成し key:valueを分散保持 •  DataChannelでinsert / retrieveメッ セージをやり取り •  ユーザ端末が協調しKVS機能を 提供できる Ø  DBについてもサーバ依存を減らせる よりscalableなPure-P2Pに近づく (シグナリングサーバは必要だけど) webrtc-chord 事例例1: DHT » https://github.com/tsujio/webrtc-chord 画像は http://ntsujio.hatenablog.com/entry/2014/07/03/221023 から転載
  9. 9. 9 •  P2Pでファイルを送りつけられる •  File APIでファイルを読み、ArrayBufferなどでsend()している •  クラウドストレージにはupしたくないけど、メールは添付容量量を 超えてしまう… などの場合に •  類似サービス •  Sharefest https://www.sharefest.me •  ShareDrop http://sharedrop.io WebDrop 事例例2: ファイル共有 » http://wdrop.in
  10. 10. 10 ブラウザ String ArrayBuffer Blob ArrayBuffer View バイナリの onmessage での扱い1 Chrome 40.0 OK OK (⻑⾧長さ制限) ✕ (Error) OK ArrayBuffer Opera 24.0 OK OK (⻑⾧長さ制限) ✕ (Error) OK ArrayBuffer Firefox 34.0 OK OK OK OK Blob 送信するデータ型の対応状況 - データ送受信の注意点(1) 事例例2: ファイル共有 1. 例例えばChromeなら、BlobでsendしてもonmessageではArrayBufferに変換されて出てくる BinaryPackなどを使ってオブジェクトをpackし、 適宜Blob→ArrayBuffer変換しながら基本的にArrayBufferで扱うと良良さげ
  11. 11. 11 •  現状、ブラウザにより送信できるバイナリ型の⻑⾧長さ上限がある 1.  UDPデータグラム⻑⾧長さの制限 → Buffering & Chunkで回避可能 2.  SDPによるアプリケーション利利⽤用帯域の制限 (Chrome) → SDPの改変による悪あがき1で多少の対処 (b=AS:1638400を付与するなど) 送信できるバイナリ⻑⾧長の制限 - データ送受信の注意点(2) 事例例2: ファイル共有 1.  https://bloggeek.me/send-file-webrtc-data-api/ 2.  UDPペイロードの最⼤大は65515だったはずなので、何かおかしい気もする ブラウザ バイナリ⻑⾧長制限  (SCTPはreliableモード, localhost同⼠士で測定) ① Chrome → Chrome 上限256KBを超えると勝⼿手にDataChannelがcloseする 上限以下では⾃自動的に66528B2単位でchunkされる ② Firefox → Firefox 上限なし(?) 内部的にはchunkされるが, 呼ばれるonmessageは1回 ③ Firefox → Chrome 上限なし; 16KB単位で⾃自動的にchunkされ Chrome側ではchunk毎に複数回onmessageが呼ばれる ④ Chrome → Firefox ①に準ずる Firefox側ではchunk毎に複数回onmessageが呼ばれる
  12. 12. 12 •  DataChannelにより 近隣隣で同じWebサイトを⾒見見ている⼈人とWebリソースを共有 •  CDN-edgeより 近い •  CDNトラフィック 流流量量抑制 MistCDN(1) 事例例3: P2P型CDN » http://www.mist-t.co.jp/ Webサーバ ア ジ ア 地 域北北 ⽶米 地 域 従来CDN
 サーバ 従来CDN
 サーバ ユーザ端末 ユーザ端末
  13. 13. 13 •  メリット •  既存CDNコスト削減 •  コンテンツロード⾼高速化 •  ネットワーク負荷軽減 など •  類似サービス PeerCDN, Peer5, Swarmify StreamRoot, BemTV (動画配信) MistCDN(2) 事例例3: P2P型CDN » http://www.mist-t.co.jp/
  14. 14. 14 •  シグナリング, WebRTCセッション確⽴立立のオーバーヘッド •  シグナリングメッセージを⼯工夫して減らす •  ⼩小さいコンテンツはまとめて送るなど •  Peer選択 •  遠くのユーザ端末は選択しない •  対応ブラウザ… P2P型CDNの要所 事例例3: P2P型CDN
  15. 15. 15 •  Pure P2Pに近いP2P利利⽤用アプリ ⾃自前サーバの仕事を最⼩小限に、スケーラブルなサービスを •  シグナリングはSkyWayなどのPaaSで •  メタなデータはwebrtc-chordによるDHTで保持 •  コンテンツはユーザがキャッシュ/保持 •  P2PCDNやWeb版Skype, サーバなしのUstreamのようなアプリケーション •  ブラウザをエージェントとしたグリッドコンピューティング基盤 •  DataChannelによる通信で計算ネタを配布、並列列計算 •  Webページを開いておくだけで参加 •  ノード数集めるのが⼤大変  →  インセンティブ付与? 広告の代わり? 今後登場しそうなWebRTC応⽤用 Discussion
  16. 16. SlideShare: http://goo.gl/Xvv0JL contact@mist-t.co.jp [エンジニア募集中です] スライド最新版公開中

×