Merge pull request #384 from jianjunz/quic

Add WebTransport support.

Author: jianjunz

docs/design/webtransport.md

@@ -0,0 +1,49 @@
+# WebTransport
+
+## Introduction
+
+This post describes changes to OWT JavaScript SDK to support QuicTransport of WebTransport. Other APIs defined in WebTransport might be supported in the future. QuicTransport is only supported in conference mode as an experimental feature.
+
+## API Changes
+
+Following APIs will be changed to support QuicTransport.
+
+- `LocalStream` can be constructed with a `WritableStream`.
+- `RemoteStream` can be constructed with a `ReadableStream`.
+- `ConferenceClient` has new method `createSendStream` which returns a `LocalStream` with a unidirectional stream in it.
+- `StreamSourceInfo` has a new bool property `data`.
+
+
+## Internal Changes
+
+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.
+
+## Examples
+
+### Send data to a conference
+
+```
+const sendStream = conferenceClient.createSendStream();
+const localStream = new LocalStream(sendStream, new StreamSourceInfo(undefined, undefined, true));
+const publication = await conferenceClient.publish(localStream);
+sendStream.stream.write(somethingToWrite);
+```
+
+### Receive data from a conference
+
+```
+conferenceClient.addEventListener('streamadded', async (event) => {
+  if (event.stream.source.data) {  // Data stream.
+    const subscription = await conference.subscribe(event.stream);
+    const reader = subscription.stream.readable.getReader();
+    while (true) {
+      const {value, done} = await reader.read();
+      if (done) {
+        // Stream ends.
+        break;
+      }
+      ProcessData(value);
+    }
+  }
+});
+```

docs/mdfiles/changelog.md

@@ -1,5 +1,8 @@
 Change Log
 ==========
+# 5.0
+* `LocalStream`'s property `mediaStream` is renamed to `stream`. It could also be a `SendStream` or `BidirectionalStream`.
+
 # 4.3
 * The type of `conferenceClient.publish` method's option is changed from `AudioEncodingParameters` and `VideoEncodingParameters` to `RTCRtpSendParameters`.
 * `audio` and `video` of `PublicationSettings` is changed from `AudioPublicationSettings` and `VideoPublicationSettings` to `AudioPublicationSettings` array and `VideoPublicationSettings` array.

package.json

@@ -18,6 +18,7 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.11.6",
+    "@babel/plugin-transform-async-to-generator": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.12.1",
     "@babel/preset-env": "^7.11.5",
     "@babel/runtime": "^7.12.1",

scripts/Gruntfile.js

@@ -51,7 +51,10 @@ window.L = L;\n\
             debug: false
           },
           transform: [
-            ["babelify", { "presets": ["@babel/preset-env"], "plugins": [["@babel/plugin-transform-runtime"]] }]
+            ["babelify", {
+              "presets": ["@babel/preset-env"],
+              "plugins": ["@babel/plugin-transform-runtime"]
+            }]
           ]
         },
       },
@@ -64,7 +67,11 @@ window.L = L;\n\
             debug: true
           },
           transform: [
-            ["babelify", { "presets": ["@babel/preset-env"], "plugins": [["@babel/plugin-transform-runtime"]] }]
+            ["babelify", {
+              "presets": ["@babel/preset-env"],
+              "plugins": ["@babel/plugin-transform-runtime"
+              ]
+            }]
           ],
           watch: true
         },

src/samples/conference/README.md

@@ -1,9 +1,15 @@
-How to run conference sample
-============================
+Conference sample
+----
+
+## How to run conference sample
 
 1. Run `npm install`.
 2. Edit `samplertcservice.js`. Find `icsREST.API.init`, replace service ID, service key and REST server URL with the correct values.
 3. Copy your SSL server certificate to cert/certificate.pfx.
 4. Run `initcert.js` to generate a keystore file which contains encrypted SSL server's passphase.
 5. Run `node samplertcservice.js` to start conference sample. By default, it listens on port 3001(insecure) and 3004(secure).
-6. Open a browser and navigate to http://\<hostname\>:3001/ or https://\<hostname\>:3004/.
+6. Open a browser and navigate to http://hostname:3001/ or https://hostname:3004/.
+
+## QUIC
+
+`public\scripts\quic.js` was added to create QUIC connections between client and server. After navigating to https://hostname:3004/quic.html?publish=false, the page automatically creates a `SendStream` for publishing. It also listens to `stream-added` message and creates new `ReceiveStream` for subscribing. It doesn't subscribe streams published before joining. Please try to modify `quic.js` if you want to try other QUIC features.