@rtcstats/rtcstats-js 2.0.1 → 2.1.0

package/README.md

@@ -39,6 +39,42 @@ trace.connect('ws://localhost:8080' + window.location.pathname);
 const pc = new RTCPeerConnection();
 ```
 
+### Using a JWT to connect to rtcstats-server
+See [the server README](https://github.com/rtcstats/rtcstats/blob/main/packages/rtcstats-server/README.md) for how to
+generate JWT token with information about the user, session and conference.
+
+If the server is configured to require an authorization token, the websocket will
+be closed with a 1008 policy-violation error and a console warning is emitted.
+
+### Bundling
+To bundle rtcstats-js including its dependencies, use
+```
+npx webpack --entry ./packages/rtcstats-js/rtcstats.js --output-path ./packages/rtcstats-js/dist --output-filename rtcstats.bundle.js --mode production --output-library rtcstats
+```
+then include the resulting bundle which is exported as the global `rtcstats` object:
+```
+<script type="text/javascript" src="rtcstats.bundle.js"></script>
+<script type="text/javascript">
+const trace = rtcstats.wrapRTCStatsWithDefaultOptions();
+// Do something.
+</script>
+```
+
+### Ending a session
+RTCStats sessions create a single dump file for every websocket connection. For long-running pages it may be required
+to close the websocket when a "session" is done and reconnect (possibly with a new JWT):
+```
+trace.connect('ws://localhost:8080/?rtcstats-token=token-1');
+// Do something
+trace.close()
+
+// Reconnect.
+trace.connect('ws://localhost:8080/?rtcstats-token=token-2');
+```
+Note that RTCStats is not keeping track of whether all RTCPeerConnections have been closed and track  from getUserMedia/getDisplayMedia
+have been stopped.
+
+### See also
 See also the [end-to-end example](/example/) in `example/` directory and
 the (internal) API docs [here](docs/index.md).
 

package/media.js

@@ -34,7 +34,7 @@ function wrapTrackProperty(track, property, trace) {
  * Also wraps these methods on MediaStreamTrack
  * * stop
  * * applyConstraints
- * The `ended` event is wrapped as are the setters fro `enabled`
+ * The `ended` event is wrapped as are the setters for `enabled`
  * and `contentHint`.
  *
  * @protected

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@rtcstats/rtcstats-js",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "gather WebRTC API traces and statistics",
   "main": "rtcstats.js",
   "type": "module",
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4-fix.0",
     "@puppeteer/browsers": "^2.10.9",
-    "@web/test-runner": "^0.20.2"
+    "@web/test-runner": "^0.20.2",
+    "jsdoc-to-markdown": "^9.1.3"
   },
   "scripts": {
     "lint": "eslint *.js test/",

package/rtcstats.js

@@ -8,7 +8,7 @@ import {WebSocketTrace} from './trace-websocket.js';
  * @returns {function} RTCStats trace function.
  */
 export function wrapRTCStatsWithDefaultOptions(config = {getStatsInterval: 1000}) {
-    const trace = new WebSocketTrace();
+    const trace = new WebSocketTrace(config);
 
     // Wrap RTCPeerConnection-related APIs and events
     wrapRTCPeerConnection(trace, window, config);

package/trace-websocket.js

@@ -2,7 +2,7 @@ import {compressMethod} from '@rtcstats/rtcstats-shared';
 
 const PROTOCOL_VERSION = '5.0';
 
-export function WebSocketTrace() {
+export function WebSocketTrace(config = {}) {
     let buffer = [];
     let connection;
     let lastTime = 0;
@@ -23,13 +23,29 @@ export function WebSocketTrace() {
                 } else {
                     buffer.push(args);
                 }
-            } else if (connection.readyState >= WebSocket.CLOSING) {
+            } else if (connection.readyState === WebSocket.CONNECTING) {
+                buffer.push(args);
+            } else if ([WebSocket.CLOSING, WebSocket.CLOSED].includes(connection.readyState)) {
                 // no-op. Possibly log?
             }
         } else {
             buffer.push(args);
         }
     };
+    trace('create', null, {
+        hardwareConcurrency: navigator.hardwareConcurrency,
+        userAgentData: navigator.userAgentData,
+        deviceMemory: navigator.deviceMemory,
+        screen: {
+            width: window.screen.availWidth,
+            height: window.screen.availHeight,
+            devicePixelRatio: window.devicePixelRatio,
+        },
+        window: {
+            width: window.innerWidth,
+            height: window.innerHeight,
+        },
+    });
 
     trace.close = () => {
         connection.close();
@@ -43,25 +59,15 @@ export function WebSocketTrace() {
             // console.error('WS ERROR', e);
         });
 
-        connection.addEventListener('close', () => {
+        connection.addEventListener('close', (e) => {
+            if (e.code === 1008 && config.log) {
+                config.log('rtcstats websocket connection closed with error=1008. ' +
+                               'Typically this means authorization is required and failed.');
+            }
             // reconnect?
         });
 
         connection.addEventListener('open', () => {
-            trace('create', null, {
-                hardwareConcurrency: navigator.hardwareConcurrency,
-                userAgentData: navigator.userAgentData,
-                deviceMemory: navigator.deviceMemory,
-                screen: {
-                    width: window.screen.availWidth,
-                    height: window.screen.availHeight,
-                    devicePixelRatio: window.devicePixelRatio,
-                },
-                window: {
-                    width: window.innerWidth,
-                    height: window.innerHeight,
-                },
-            });
             setTimeout(function flush() {
                 if (!buffer.length) {
                     return;