Use WebTransport instead of QuicTransport. (#457)

* Use WebTransport instead of QuicTransport.

QuicTransport was merged to WebTransport. This change updates some calls
to comply with the latest spec.

This change also resolves join after authentication is passed for
WebTransport.

* Fix an eslint error.

Author: jianjunz

docs/design/webtransport.md

@@ -18,6 +18,10 @@ Following APIs will be changed to support QuicTransport.
 
 JavaScript SDK creates a QuicTransport with a QUIC agent when QUIC agent is enabled at server side, and WebTransport is supported at client side. When app publishes or subscribes a data stream, a new QuicStream is created.
 
+## Limitations
+
+WebTransport only supported in Chrome since 87. It's not enabled by default. To enable it, you need to [register the origin trail](https://web.dev/webtransport/#register-for-ot) or start Chrome with flag `--enable-experimental-web-platform-features`.
+
 ## Examples
 
 ### Send data to a conference

docs/jsdoc/config.json

@@ -19,7 +19,7 @@
     "outputSourcePath": false,
     "systemName": "Intel® Collaboration Suite for WebRTC version 5.0",
     "footer": "",
-    "copyright": "Copyright © 2020 Intel Corporation. All Rights Reserved.",
+    "copyright": "Copyright © 2021 Intel Corporation. All Rights Reserved.",
     "navType": "vertical",
     "theme": "cosmo",
     "linenums": true,

src/sdk/conference/client.js

@@ -416,13 +416,21 @@ export const ConferenceClient = function(config, signalingImpl) {
             }
           }
         }
-        if (typeof QuicTransport === 'function' && token.webTransportUrl) {
+        if (typeof WebTransport === 'function' && token.webTransportUrl) {
           quicTransportChannel = new QuicConnection(
               token.webTransportUrl, resp.webTransportToken,
               createSignalingForChannel(), config.webTransportConfiguration);
         }
-        resolve(new ConferenceInfo(resp.room.id, Array.from(participants
-            .values()), Array.from(remoteStreams.values()), me));
+        const conferenceInfo = new ConferenceInfo(
+            resp.room.id, Array.from(participants.values()),
+            Array.from(remoteStreams.values()), me);
+        if (quicTransportChannel) {
+          quicTransportChannel.init().then(() => {
+            resolve(conferenceInfo);
+          });
+        } else {
+          resolve(conferenceInfo);
+        }
       }, (e) => {
         signalingState = SignalingState.READY;
         reject(new ConferenceError(e));

src/sdk/conference/quicconnection.js

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 /* eslint-disable require-jsdoc */
-/* global Promise, Map, QuicTransport, Uint8Array, Uint32Array, TextEncoder */
+/* global Promise, Map, WebTransport, Uint8Array, Uint32Array, TextEncoder */
 
 'use strict';
 
@@ -25,15 +25,15 @@ export class QuicConnection extends EventDispatcher {
   // value of `ConferenceClient.join`.
   constructor(url, tokenString, signaling, webTransportOptions) {
     super();
+    this._tokenString = tokenString;
     this._token = JSON.parse(Base64.decodeBase64(tokenString));
     this._signaling = signaling;
     this._ended = false;
     this._quicStreams = new Map(); // Key is publication or subscription ID.
-    this._quicTransport = new QuicTransport(url, webTransportOptions);
+    this._quicTransport = new WebTransport(url, webTransportOptions);
     this._subscribePromises = new Map(); // Key is subscription ID.
     this._transportId = this._token.transportId;
-    this._init();
-    this._authenticate(tokenString);
+    this._initReceiveStreamReader();
   }
 
   /**
@@ -63,9 +63,13 @@ export class QuicConnection extends EventDispatcher {
     }
   }
 
-  async _init() {
+  async init() {
+    await this._authenticate(this._tokenString);
+  }
+
+  async _initReceiveStreamReader() {
     const receiveStreamReader =
-        this._quicTransport.receiveStreams().getReader();
+        this._quicTransport.incomingBidirectionalStreams.getReader();
     Logger.info('Reader: ' + receiveStreamReader);
     let receivingDone = false;
     while (!receivingDone) {
@@ -127,7 +131,7 @@ export class QuicConnection extends EventDispatcher {
 
   async createSendStream() {
     await this._quicTransport.ready;
-    const quicStream = await this._quicTransport.createSendStream();
+    const quicStream = await this._quicTransport.createBidirectionalStream();
     return quicStream;
   }