WebRTC QUICがChromeでOrigin Trialできるように

なぜQUIC

• リアルタイム性のため
• UDPの上に位置する
• `RTCDataChannel`的に見えるかも
  • 似てるけど違う
  • それSCTPじゃなくてQUICでできるよ
  • `RTCPeerConnection`とも隔離されてるし

RTCIceTransport

• ICEです
• `RTCQuicTransport`のコンストラクタに渡される

RTCQuicTransport

• QUICのコネクション
  • なので接続状況のstatsとかもとれる

RTCQuicStream

• Read/Write
• 1つの`RTCQuicTransport`に複数もてる
• なんかWriteすると`onquicstream`イベントがリモートで発火する
• 軽量でコネクションを越えてmultiprexされる

コネクションの確立

ただコピペしてもしゃーないので、コメントをいれてみた。

とあるクライアント。

const iceTransport = new RTCIceTransport();
// ICEは別クラスになってて渡せる
const quicTransport = new RTCQuicTransport(iceTransport);

// いわゆるオファー
// シグナリングを規定しないのは変わらず
signalingChannel.send({
  // SDPの代わり
  iceParams: iceTransport.getLocalParameters(),
  quicKey: quicTransport.getKey(),
});

// TrickleICEっぽい
iceTransport.onicecandidate = e => {
  if (e.candidate) {
    signalingChannel.send({candidate: e.candidate} );
  }
}

// いわゆるアンサー待ち
signalingChannel.onMessage = async ({iceParams, candidate}) => {
  // これがアンサー
  if (iceParams) {
    iceTransport.start(iceParams);
    quicTransport.connect();
  }
  // ICE candidateだけ
  else if (candidate) {
    iceTransport.addRemoteCandidate(candidate);
  }
};

とあるサーバー。
ほとんど一緒。

const iceTransport = new RTCIceTransport();
const quicTransport = new RTCQuicTransport(iceTransport);

signalingChannel.send({
  iceParams: iceTransport.getLocalParameters(),
});
iceTransport.onicecandidate = e => {
  if (e.candidate) {
    signalingChannel.send({candidate: e.candidate});
  }
}

signalingChannel.onMessage = async ({iceParams, quicKey, candidate}) => {
  if (iceParams && quicKey) {
    iceTransport.start(iceParams);
    quicTransport.listen(quicKey);
  } else if (candidate) {
    iceTransport.addRemoteCandidate(candidate);
  }
};

実行順序やら細かいところには目をつぶるとして、だいたいこんな感じらしい。

`RTCPeerConnection`的な層がないとこんな感じよねー。

データを送る

`RTCQuicStream`にあるAPIはこんな感じらしい。

RTCQuicStreamReadResult readInto(Uint8Array data);
void write(RTCQuicStreamWriteParameters data);
Promise<void> waitForWriteBufferedAmountBelow(unsigned long amount);
Promise<void> waitForReadable(unsigned long amount);

肝心の`stream`はこのように。

quicTransport.addEventListener('quicstream', stream => {
  // ...
});

受け取った`stream`の使い方はこちらから。

GitHub - shampson/RTCQuicTransport-Origin-Trial-Documentation: Documentation and demos for developers using the RTCQuicTransport in Chrome's origin trial.

let readAllData = false;
while (!readAllData) {
  await readStream.waitForReadable(readStream.maxReadBufferedAmount / 2);
  const readBuffer = new Uint8Array(stream.maxReadBufferedAmount);
  const { amount, finished } = readStream.readInto(readBuffer);
  // Do something with the data.
}
// Close the stream. Writing a finish back to the remote side also will close
// the stream.
readStream.reset();

while (haveDataToWrite()) {
  await waitForWriteBufferedAmountBelow(writeStream.maxWriteBufferedAmount / 2);
  const nextChunkSize =
      writeStream.maxWriteBufferedAmount - writeStream.writeBufferedAmount;
  writeStream.write({ data: getNextChunk(nextChunkSize) })
}
// All waitForReadable promises are resolved when the finish arrives to the read
// buffer on the remote side. Writing it after we are done here ensures that
// all chunks of data are read out on the remote side.
writeStream.write({ finish: true });

Feedback

• フィードバックがほしいです

- APIの使い勝手とか
- パフォーマンスとか

• お申込みはこちらから
  • Origin Trials

Spec

• WHATWG Streamとも足並み揃えるよ
• 再送を無効にするのも検討中
• あとはデータグラム
  • なにこれ？UDP直で叩けるの・・？

セキュリティ

• QUICのhandshakeで使うキーはJSから見えます
• シグナリングするときは気をつけて
  • PSK