Documentation and demos for developers using the RTCQuicTransport in Chrome's origin trial.
The specifications provide further documentation, but have diverged in some ways. The most accurate documentation is below. The specifications can be found here:
Go here to look at an example demo using the RTCQuicTransport. Example code is in the github repo.
- Request a token for your origin.
- Add the token to your pages, there are two ways to provide this token on
any pages in your origin:
- Add an
origin-trial<meta>tag to the head of any page. For example, this may look something like:<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE"> - If you can configure your server, you can also provide the token on pages
using an
Origin-TrialHTTP header. The resulting response header should look something like:Origin-Trial: TOKEN_GOES_HERE
- Add an
You can also experiment locally with the following two options.
- Running Chrome locally with "--enable-experimental-web-platform-features" or
- Navigating to
chrome://flagsand enabling "Experimental Web Platform features"
Some example usage of the API can be found in the Web Platform Tests:
- webrtc-quic
- webrtc-ice (see files prefixed by "RTCIce.")
readonly attribute RTCIceRole? role;
readonly attribute RTCIceTransportState state;
readonly attribute RTCIceGatheringState gatheringState;sequence<RTCIceCandidate> getLocalCandidates();
sequence<RTCIceCandidate> getRemoteCandidates();
RTCIceCandidatePair? getSelectedCandidatePair();
RTCIceParameters? getLocalParameters();
RTCIceParameters? getRemoteParameters();
void gather(RTCIceGatherOptions options);attribute EventHandler onstatechange;
attribute EventHandler ongatheringstatechange;
attribute EventHandler onselectedcandidatepairchange;readonly attribute RTCIceTransport transport;
readonly attribute RTCQuicTransportState state;
readonly attribute unsigned short? maxDatagramLength;Constructor(RTCIceTransport transport);
ArrayBuffer getKey();
void connect();
void listen(BufferSource remote_key);
void stop();
RTCQuicStream createStream();
Promise<RTCQuicTransportStats> getStats();
Promise<void> readyToSendDatagram();
void sendDatagram(BufferSource data);
Promise<sequence<ArrayBuffer>> receiveDatagrams();attribute EventHandler onstatechange;
attribute EventHandler onerror;
attribute EventHandler onquicstream;readonly attribute RTCQuicTransport transport;
readonly attribute RTCQuicStreamState state;
readonly attribute unsigned long readBufferedAmount;
readonly attribute unsigned long maxReadBufferedAmount;
readonly attribute unsigned long writeBufferedAmount;
readonly attribute unsigned long maxWriteBufferedAmount;RTCQuicStreamReadResult readInto(Uint8Array data);
void write(RTCQuicStreamWriteParameters data);
void reset();
Promise<void> waitForWriteBufferedAmountBelow(unsigned long amount);
Promise<void> waitForReadable(unsigned long amount);attribute EventHandler onstatechange;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 });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();This is an example of when getting a message and writing it as a datagram to the remote side. This could be something like game state or a chat message, for example.
async function writeMessage(message, timeToWaitMs) {
const time1 = new Date();
// Will resolve immediately if the transport is not
// congestion control blocked.
await quicTransport.readyToSendDatagram();
const time2 = new Date();
if ((time2 - time1) < timeToWait) {
quicTransport.sendDatagram(message);
return true;
}
return false;
}
// listener could be listening for game state change, etc.
listener.onmessage = (message) => {
writeMessage(message, 2000 /* ms */);
};An example of printing datagrams when they are received.
function printReceivedDatagrams(datagramsPromise) {
datagramsPromise.then((datagrams) => {
for (let i = 0; i < datagrams.length; i++) {
console.log(datagrams[i]);
}
printReceivedDatagrams(quictransport.receiveDatagrams());
});
}
// Let's print the received datagrams :).
printReceivedDatagrams(quicTransport.receiveDatagrams());