Upgrade to Pro — share decks privately, control downloads, hide ads and more …

もっと大きなデータを送りませんか? エラーがゴロゴロ出るようなデータです

もっと大きなデータを送りませんか? エラーがゴロゴロ出るようなデータです

WebRTC Meetup Tokyo #29
https://webrtcmeetup.connpass.com/event/344723/

WebRTCのDataChannelで、サイズが大きなデータを効率良く送る方法について解説します。

まとめ
WebRTCのDataChannelで大きなデータを効率よく送るためには…

データを16KiBごとに分割する
bufferedAmount、bufferedAmountLowThreshold、bufferedamountlowの3つのプロパティ・イベントを利用し、適切に流量制御を行う

※検証で使ったコードは以下のGitHubリポジトリで公開しています
https://github.com/kadoshita/webrtc-datachannel-efficient

sublimer

March 10, 2025
Tweet

More Decks by sublimer

Other Decks in Programming

Transcript

  1. 本日お話すること・しないこと • お話すること ◦ WebRTCのDatachannelでサイズが大きなデータを効率的に送る方法 • お話しないこと ◦ Datachannel自体の詳細な解説 •

    今日のゴール ◦ WebRTCのDatachannelで「エラーがゴロゴロ出るような」サイズが大きいデータをエラーを 出さずに効率的に送る方法を理解する
  2. 前提 • 以下の環境で動作確認をしています ◦ Google Chrome 134 ◦ macOS Sonoma

    ◦ 同一ホストの別タブ同士で通信 • 以下の設定で動作確認をしています ◦ DataChannelは信頼性あり・順序保証あり • Firefox、Safariでは挙動が異なる可能性があります
  3. Datachannelで大きなデータを送る • 何も考えずに、とりあえず32MBのデータを送ってみる Uncaught OperationError: Failed to execute 'send' on

    'RTCDataChannel': RTCDataChannel send queue is full • Chrome内部の送信用のキューのサイズが16MiB[1] なのでエラーになる uint64_t DataChannelInterface::MaxSendQueueSize() { return 16 * 1024 * 1024; // 16 MiB } [1]https://source.chromium.org/chromium/_/webrtc/src/+/b101a7e335a360438c022f43e4826d1af73c3283:api/data_channel_interface.cc;l=56;bpv=1;bpt=0;drc=c4024d62a4944ddb2 088c6d2798784b43507a696
  4. 一度に送れる最大のデータ量は? • Q. 1MiBなら? • A. DataChannelのerrorイベントが発火し、コネクションが切断される OperationError: Failure to

    send data • ブラウザごとに一度に送れるデータ量(MaxMessageSize)が異なる ブラウザ MaxMessageSize Google Chrome 256KiB Firefox 1GiB Safari 256KiB
  5. MaxMessageSizeについて • ブラウザでハードコーディング[2] されている • SDPの a=max-message-size: に乗ってくる • ネゴシエーション後に、実際に利用できるMaxMessageSizeが決まる

    ◦ 値が小さい方に合わせる[3] • RTCPeerConnection.sctp.maxMessageSize [4] で参照できる [2]https://source.chromium.org/chromium/_/webrtc/src/+/b101a7e335a360438c022f43e4826d1af73c3283:net/dcsctp/public/dcsctp_options.h;l=73;bpv=1;bpt=0;drc=f6902aff958cab549c3 d138305bc7f9ed7983ebd [3]https://source.chromium.org/chromium/_/webrtc/src/+/cec4b95104c3660e0a1eeafea3e0f6176b8d389d:pc/sdp_offer_answer.cc;l=5052-5054;drc=d8d041046e5507a530abe09e7baefc ebd35470b6;bpv=1;bpt=0 [4]https://developer.mozilla.org/en-US/docs/Web/API/RTCSctpTransport/maxMessageSize
  6. 送信用のキューを溢れさせないようにするには • RTCDataChannelの以下のプロパティ・イベントを使う ◦ bufferedAmount[6] ▪ 送信用のキューに入っているデータ量 ◦ bufferedAmountLowThreshold[7] ▪

    bufferedamountlowイベントを発火させる閾値 ◦ bufferedamountlow Event[8] ▪ bufferedAmountがbufferedAmountLowThreshold以下になった時に発火するイベント [6]https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel/bufferedAmount [7]https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel/bufferedAmountLowThreshold [8]https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel/bufferedamountlow_event
  7. 参考サイト • RTCSctpTransport: maxMessageSize property - Web APIs | MDN

    • RFC 8831: WebRTC Data Channels • RTCDataChannel: bufferedAmount property - Web APIs | MDN • RTCDataChannel: bufferedAmountLowThreshold property - Web APIs | MDN • RTCDataChannel: bufferedamountlow event - Web APIs | MDN • Large Data Channel Messages - Advancing WebRTC • Using WebRTC data channels - Web APIs | MDN