@observertc/client-monitor-js 1.0.0-beta.20

package/.eslintrc.js

@@ -0,0 +1,27 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "ignorePatterns": ["*.txt"],
+    "rules": {
+        "prefer-for-of": 0,
+        "no-inferrable-types": 0,
+        "no-explicit-any": 0,
+        "ban-types": 0,
+        "no-this-alias": 0,
+        "no-non-null-assertion": 0,
+    }
+}

package/.github/workflows/publish.yaml

@@ -0,0 +1,27 @@
+name: Publish
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Install
+        run: yarn
+
+      - name: Build
+        run: yarn build
+
+      - name: Test
+        run: yarn test
+
+      - uses: JS-DevTools/npm-publish@v1
+        with:
+          access: public
+          token: ${{ secrets.NPM_TOKEN }}

package/.prettierignore

@@ -0,0 +1,5 @@
+docs-generator/
+node_modules/
+package.json
+tsconfig.json
+tslint.json

package/.prettierrc

@@ -0,0 +1,5 @@
+{
+    "tabWidth": 4,
+    "trailingComma": "es5",
+    "printWidth": 120
+}

package/.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

package/CHANGELOG.md

@@ -0,0 +1,3 @@
+# 1.0.0
+
+Init

package/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2022 Balazs Kreith
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,310 @@
+ObserveRTC Client Integration Javascript Library
+---
+
+@observertc/client-monitor-js is a client side library to monitor [WebRTCStats](https://www.w3.org/TR/webrtc-stats/) and to integrate you app to observertc components.
+
+Table of Contents:
+ * [Quick Start](#quick-start)
+   - [Collect WebRTC Stats](#collect-webrtc-stats)
+   - [Sample and Send](#sample-and-send)
+ * [Schema](#schema)
+ * [API docs](#api-docs)
+ * [NPM package](#npm-package)
+ * [Schema](#schema)
+ * [Examples](#examples)
+    - [Calculate video tracks Fps](#calculate-video-tracks-fps)
+    - [Collect RTT measurements for peer connections](#collect-rtt-measurements-for-peer-connections)
+ * [Configurations](#configurations)
+ * [License](#license)
+
+## Qucik Start
+
+Install it from [npm](https://www.npmjs.com/package/@observertc/client-monitor-js) package repository.
+
+```
+npm i @observertc/client-monitor-js
+```
+
+### Collect WebRTC Stats
+
+```javascript
+import { ClientMonitor } from "@observertc/client-monitor-js";
+// see full config in Configuration section
+const config = {
+    collectingPeriodInMs: 5000,
+};
+const monitor = ClientMonitor.create(config);
+monitor.addStatsCollector({
+    id: "collectorId",
+    getStats: () => peerConnection.getStats(),
+});
+monitor.events.onStatsCollected(() => {
+    for (const transport of monitor.stats.transports()) {
+        /// use the transport
+        console.log(transport.stats.packetsSent);
+    }
+})
+```
+The above example collect stats in every 5s.
+When stats are collected and stored it emits an event to notify the 
+application.
+
+You can navigate through related stats:
+
+```javascript
+    // list outbound RTP stats
+    for (const outboundRtp of monitor.stats.outboundRtps()) {
+        // get the remote inbound RTP stats belongs to the actual outbound RTP
+        const remoteInboundRtp = outboundRtp.getRemoteInboundRtp();
+        console.log(outboundRtp.stats, remoteInboundRtp.stats);
+    }
+```
+The example above shows how to get the remote inbound rtp stats related to the outbound rtp stats.
+
+With `stats` you accessing to the [StatsStorage](https://observertc.github.io/client-monitor-js/interfaces/StatsReader.html). StatsStorage provided entries can be used to navigate from stats type to another.
+
+![Entry Navigations](docs/navigation.png)
+
+### Sample and Send
+
+Sampling means the client-monitor creates a so-called ClientSample. ClientSample is a compound object contains a snapshot from the polled stats, added devices, constrainments, user errors, etc. ClientSample is created by a Sampler component.
+A created ClientSample is added to Samples object. Samples can be sent to the server by a Sender component.
+
+The above shown example can be extended to sample and send by adding the following configurations:
+
+```javascript
+import { ClientMontior } from "@observertc/client-monitor-js";
+// see full config in Configuration section
+const config = {
+    collectingPeriodInMs: 5000,
+    samplingPeriodInMs: 10000,
+    sendingPeriodInMs: 10000,
+    sampler: {
+        roomId: "testRoom",
+    },
+    sender: {
+        websocket: {
+            urls: ["ws://localhost:7080/samples/myServiceId/myMediaUnitId"]
+        }
+    }
+};
+const monitor = ClientMontior.create(config);
+monitor.addStatsCollector({
+    id: "collectorId",
+    getStats: () => peerConnection.getStats(),
+});
+```
+
+## API docs
+
+https://observertc.github.io/client-monitor-js/modules/ClientMonitor.html
+
+## NPM package
+
+https://www.npmjs.com/package/@observertc/client-monitor-js
+
+## Schema
+
+The schema used to send samples can be found [here](https://www.npmjs.com/package/@observertc/schemas#Samples).
+
+## Examples
+
+### Calculate video tracks Fps
+
+Assuming you have a configured and running monitor and a collector you added to poll the stats from
+peer connection, here is an example to calculate the frame per sec for tracks.
+
+```javascript
+const monitor = //.. defined above
+monitor.onStatsCollected(() => {
+    const now = Date.now();
+    for (const inboundRtp of monitor.storage.inboundRtps()) {
+        const trackId = inboundRtp.getTrackId();
+        const SSRC = inboundRtp.getSsrc();
+        const traceId = `${trackId}-${SSRC}`;
+        // lets extract what we need from the stats for inboundRtp: https://www.w3.org/TR/webrtc-stats/#inboundrtpstats-dict*
+        const { framesReceived, kind } = inboundRtp.stats;
+        if (kind !== "video") continue;
+        const trace = traces.get(traceId);
+        if (!trace) {
+            traces.set(traceId, {
+                framesReceived,
+                timestamp: now,
+            });
+            continue;
+        }
+        const elapsedTimeInS = (now - trace.timestamp) / 1000;
+        const fps = (framesReceived - trace.framesReceived) / elapsedTimeInS;
+        const peerConnectionId = inboundRtp.getPeerConnection()?.id;
+        trace.framesReceived = framesReceived;
+        trace.timestamp = now;
+
+        console.log(`On peerConnection: ${peerConnectionId}, track ${trackId}, SSRC: ${SSRC} the FPS is ${fps}`);
+    }
+});
+```
+
+### Collect RTT measurements for peer connections
+
+```javascript
+const monitor = //.. defined above
+monitor.onStatsCollected(() => {
+    const RTTs = new Map();
+    for (const outboundRtp of monitor.storage.outboundRtps()) {
+        const remoteInboundRtp = outboundRtp.getRemoteInboundRtp();
+        const { roundTripTime } = remoteInboundRtp.stats;
+        const peerConnectionId = outboundRtp.getPeerConnection()?.collectorId;
+        let measurements = results.get(peerConnectionId);
+        if (!measurements) {
+            measurements = [];
+            RTTs.set(peerConnectionId, measurements);
+        }
+        measurements.push(roundTripTime);
+    }
+    // here you have the RTT measurements groupped by peer connections
+    console.log(Array.from(RTTs.entries()));
+});
+```
+
+## Configurations
+
+```javascript
+const config = {
+    /**
+     * By setting it, the monitor calls the added statsCollectors periodically
+     * and pulls the stats.
+     * 
+     * DEFAULT: undefined
+     */
+    collectingPeriodInMs: 5000,
+    /**
+     * By setting it, the monitor make samples periodically.
+     * 
+     * DEFAULT: undefined
+     */
+    samplingPeriodInMs: 10000,
+
+    /**
+     * By setting it, the monitor sends the samples periodically.
+     * 
+     * DEFAULT: undefined
+     */
+    sendingPeriodInMs: 10000;
+
+    /**
+     * By setting it stats items and entries are deleted if they are not updated.
+     * 
+     * DEFAULT: undefined
+     */
+    statsExpirationTimeInMs: 60000,
+
+    /**
+     * Collector Component related configurations
+     * 
+     * DEFAULT: configured by the monitor
+     */
+    collectors: {
+        /**
+         * Sets the adapter adapt different browser type and version 
+         * provided stats.
+         * 
+         * DEFAULT: configured by the monitor
+         */
+        adapter: {
+            /**
+             * the type of the browser, e.g.: chrome, firefox, safari
+             * 
+             * DEFAULT: configured by the collector
+             */
+            browserType: "chrome",
+            /**
+             * the version of the browser, e.g.: 97.xx.xxxxx
+             * 
+             * DEFAULT: configured by the collector
+             */
+            browserVersion: "97.1111.111",
+        },
+    },
+
+    /**
+     * Sampling Component Related configurations
+     * 
+     */
+    sampler: {
+        /**
+         * The identifier of the room the clients are in.
+         * 
+         * If server side componet is used to collect the samples, this parameter is the critical to provide to match clients being in the same room.
+         * 
+         * DEFAULT: a generated unique value
+         * 
+         * NOTE: if this value has not been set clients which are in the same room will not be matched at the monitor
+         */
+        roomId: "testRoom",
+
+        /**
+         * The identifier of the client. If it is not provided, then it a UUID is generated. If it is provided it must be a valid UUID.
+         * 
+         * DEFAULT: a generated unique value
+         */
+        clientId: "clientId",
+
+        /**
+         * the identifier of the call between clients in the same room. If not given then the server side assigns one. If it is given it must be a valid UUID.
+         * 
+         * DEFAULT: undefined
+         */
+        callId: "callId",
+        /**
+         * The userId of the client appeared to other users.
+         * 
+         * DEFAULT: undefined
+         */
+        userId: "testUser",
+
+        /**
+         * Indicate if the sampler only sample stats updated since the last sampling.
+         * 
+         * DEFAULT: true
+         */
+        incrementalSampling: true,
+    },
+    /**
+     * Configure the sender component.
+     */
+    sender: {
+        /**
+         * Configure the format used to transport samples or receieve 
+         * feedback from the server.
+         * 
+         * Possible values: json, protobuf
+         * 
+         * DEFAULT: json
+         * 
+         */
+        format: "json",
+         /**
+         * Websocket configuration to transport the samples
+         */
+        websocket: {
+            /**
+             * Target urls in a priority order. If the Websocket has not succeeded for the first,
+             * it tries with the second. If no more url left the connection is failed
+             * 
+             */
+            urls: ["ws://localhost:7080/samples/myServiceId/myMediaUnitId"],
+            /**
+             * The maximum number of retries to connect to a server before,
+             * tha connection failed is stated.
+             * 
+             * DEFAULT: 3
+             */
+            maxRetries: 1,
+        }
+    }
+};
+```
+
+## License
+
+Apache-2.0

package/docs/.nojekyll

@@ -0,0 +1 @@
+TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.

package/docs/assets/highlight.css

@@ -0,0 +1,85 @@
+:root {
+    --light-hl-0: #001080;
+    --dark-hl-0: #9CDCFE;
+    --light-hl-1: #000000;
+    --dark-hl-1: #D4D4D4;
+    --light-hl-2: #AF00DB;
+    --dark-hl-2: #C586C0;
+    --light-hl-3: #A31515;
+    --dark-hl-3: #CE9178;
+    --light-hl-4: #008000;
+    --dark-hl-4: #6A9955;
+    --light-hl-5: #0000FF;
+    --dark-hl-5: #569CD6;
+    --light-hl-6: #0070C1;
+    --dark-hl-6: #4FC1FF;
+    --light-hl-7: #098658;
+    --dark-hl-7: #B5CEA8;
+    --light-hl-8: #795E26;
+    --dark-hl-8: #DCDCAA;
+    --light-code-background: #F5F5F5;
+    --dark-code-background: #1E1E1E;
+}
+
+@media (prefers-color-scheme: light) { :root {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --hl-4: var(--light-hl-4);
+    --hl-5: var(--light-hl-5);
+    --hl-6: var(--light-hl-6);
+    --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --code-background: var(--light-code-background);
+} }
+
+@media (prefers-color-scheme: dark) { :root {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --hl-4: var(--dark-hl-4);
+    --hl-5: var(--dark-hl-5);
+    --hl-6: var(--dark-hl-6);
+    --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --code-background: var(--dark-code-background);
+} }
+
+body.light {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --hl-4: var(--light-hl-4);
+    --hl-5: var(--light-hl-5);
+    --hl-6: var(--light-hl-6);
+    --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --code-background: var(--light-code-background);
+}
+
+body.dark {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --hl-4: var(--dark-hl-4);
+    --hl-5: var(--dark-hl-5);
+    --hl-6: var(--dark-hl-6);
+    --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --code-background: var(--dark-code-background);
+}
+
+.hl-0 { color: var(--hl-0); }
+.hl-1 { color: var(--hl-1); }
+.hl-2 { color: var(--hl-2); }
+.hl-3 { color: var(--hl-3); }
+.hl-4 { color: var(--hl-4); }
+.hl-5 { color: var(--hl-5); }
+.hl-6 { color: var(--hl-6); }
+.hl-7 { color: var(--hl-7); }
+.hl-8 { color: var(--hl-8); }
+pre, code { background: var(--code-background); }