@rtcstats/rtcstats-js 1.0.0

package/LICENSE.md

@@ -0,0 +1,25 @@
+The MIT License
+
+Copyright (c) 2016 TokBox, Inc.
+Copyright (c) 2025 rtcstats.com
+
+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,3 @@
+# rtcstats.js
+
+Javascript SDK for RTCStats. See the top-level README.md file.

package/media.js

@@ -0,0 +1,131 @@
+import {compressMethod, dumpTrackWithStreams} from '@rtcstats/rtcstats-shared';
+
+/**
+ * Wrap the setter for MediaStreamTrack.{property}.
+ * Does not work on the prototype but needs a track instance.
+ * Only done for local tracks where this is most useful.
+ *
+ * @protected
+ * @param {MediaStrackTrack} track - the track whose property (e.g. `enabled`) should be wrapped.
+ * @param {string} property - the track whose property (e.g. `enabled`) should be wrapped.
+ * @param {function} trace - RTCStats trace callback.
+ */
+function wrapTrackProperty(track, property, trace) {
+    const prop = Object.getOwnPropertyDescriptor(
+        MediaStreamTrack.prototype, property);
+
+    // Replace the property with a custom one
+    Object.defineProperty(track, property, {
+        configurable: true,
+        enumerable: true,
+        get() {
+            return prop.get.call(this);
+        },
+        set(value) {
+            trace('MediaStreamTrack.' + property, null, value, this.id);
+            prop.set.call(this, value);
+        }
+    });
+}
+
+/**
+ * Wraps getUserMedia and getDisplayMedia for RTCStats.
+ * Legacy getUserMedia is not wrapped.
+ * Also wraps these methods on MediaStreamTrack
+ * * stop
+ * * applyConstraints
+ * The `ended` event is wrapped as are the setters fro `enabled`
+ * and `contentHint`.
+ *
+ * @protected
+ * @param {function} trace - RTCStats trace callback.
+ * @param {object} window - window object with navigator and MediaStreamTrack.
+ */
+export function wrapGetUserMedia(trace, {navigator, MediaStreamTrack}) {
+    const counters = {getUserMedia: 0, getDisplayMedia: 0};
+    if (!(navigator && navigator.mediaDevices)) {
+        return;
+    }
+    if (navigator.mediaDevices.__rtcStats) {
+        // Prevent double-wrapping.
+        return;
+    }
+    ['getUserMedia', 'getDisplayMedia'].forEach(method => {
+        if (!(navigator && 'mediaDevices' in navigator && navigator.mediaDevices[method])) {
+            return;
+        }
+        const origMethod = navigator.mediaDevices[method].bind(navigator.mediaDevices);
+        const wrappedMethod = (...args) => {
+            const trackingId = compressMethod('navigator.mediaDevices.' + method) +
+                '-' + (counters[method]++);
+            trace('navigator.mediaDevices.' + method, null, args[0], trackingId);
+            return origMethod.apply(navigator.mediaDevices, args)
+                .then((stream) => {
+                    trace('navigator.mediaDevices.' + method + 'OnSuccess', null,
+                        stream.getTracks().map(t => dumpTrackWithStreams(t, stream)),
+                        trackingId);
+                    stream.getTracks().forEach(track => {
+                        track.__rtcStatsId = trackingId;
+                        track.addEventListener('ended', () => {
+                            trace('MediaStreamTrack.onended', null, this.id, this.__rtcStatsId);
+                        });
+                        wrapTrackProperty(track, 'enabled', trace);
+                        wrapTrackProperty(track, 'contentHint', trace);
+                    });
+                    return stream;
+                }, (err) => {
+                    trace('navigator.mediaDevices.' + method + 'OnFailure', null,
+                        err.toString(), trackingId);
+                    return Promise.reject(err);
+                });
+        };
+        navigator.mediaDevices[method] = wrappedMethod.bind(navigator.mediaDevices);
+    });
+    if (MediaStreamTrack) {
+        ['stop', 'applyConstraints'].forEach(method => {
+            const origMethod = MediaStreamTrack.prototype[method];
+            MediaStreamTrack.prototype[method] = function(...args) {
+                if (this.readyState !== 'ended') {
+                    trace('MediaStreamTrack.' + method, null, args, this.id, this.__rtcStatsId);
+                }
+                return origMethod.apply(this, args);
+            };
+        });
+    }
+    navigator.mediaDevices.__rtcStats = true;
+}
+
+/**
+ * Wraps enumerateDevices and the devicechange event for RTCStats.
+ *
+ * @param {function} trace - RTCStats trace callback.
+ * @param {object} window - window object with navigator.
+ */
+export function wrapEnumerateDevices(trace, {navigator}) {
+    if (!(navigator && 'mediaDevices' in navigator && navigator.mediaDevices.enumerateDevices)) {
+        return;
+    }
+    if (navigator.mediaDevices.enumerateDevices.__rtcStats) {
+        // Prevent double-wrapping.
+        return;
+    }
+    const origMethod = navigator.mediaDevices.enumerateDevices.bind(navigator.mediaDevices);
+    const wrappedMethod = (...args) => {
+        return origMethod.apply(navigator.mediaDevices, args)
+            .then((devices) => {
+                trace('navigator.mediaDevices.enumerateDevices', null,
+                    JSON.parse(JSON.stringify(devices)));
+                return devices;
+            });
+    };
+    navigator.mediaDevices.enumerateDevices = wrappedMethod.bind(navigator.mediaDevices);
+    navigator.mediaDevices.enumerateDevices.__rtcStats = true;
+
+    // Listen to devicechange event (which often causes enumerateDevices to be called).
+    if ('ondevicechange' in navigator.mediaDevices) {
+        navigator.mediaDevices.addEventListener('devicechange', () => {
+            trace('navigator.mediaDevices.ondevicechange', null, null);
+        });
+    }
+}
+

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@rtcstats/rtcstats-js",
+  "version": "1.0.0",
+  "description": "gather WebRTC API traces and statistics",
+  "main": "rtcstats.js",
+  "type": "module",
+  "devDependencies": {
+    "@puppeteer/browsers": "^2.10.9",
+    "jest": "^30.1.3",
+    "karma": "^6.4.4",
+    "karma-chai": "^0.1.0",
+    "karma-chrome-launcher": "^3.2.0",
+    "karma-coverage": "^2.2.1",
+    "karma-firefox-launcher": "^2.1.3",
+    "karma-mocha": "^2.0.1",
+    "karma-mocha-reporter": "^2.2.5",
+    "karma-webpack": "^5.0.1"
+  },
+  "scripts": {
+    "lint": "eslint *.js test/",
+    "coverage": "c8 karma start test/karma.conf.js",
+    "test": "npm run lint && npm run coverage"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rtcstats/rtcstats.git"
+  },
+  "author": "rtcstats.com",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/peerconnection.js

@@ -0,0 +1,387 @@
+import {statsCompression, descriptionCompression, compressMethod} from '@rtcstats/rtcstats-shared';
+import {map2obj, dumpTrackWithStreams, copyAndSanitizeConfig} from '@rtcstats/rtcstats-shared';
+
+/**
+ * Wraps a RTCRtpTransceiver for RTCStats. Currently applied to these methods:
+ * * setCodecPreferences
+ * * setHeaderExtensionsToNegotiate
+ *
+ * @protected
+ * @param {function} trace - RTCStats trace callback
+ * @param {object} window - window object from which to take the RTCRtpTransceiver protoype.
+ */
+function wrapRTCRtpTransceiver(trace, window) {
+    if (!window.RTCRtpTransceiver) {
+        return;
+    }
+    ['setCodecPreferences', 'setHeaderExtensionsToNegotiate'].forEach(method => {
+        const nativeMethod = window.RTCRtpTransceiver.prototype[method];
+        if (!nativeMethod) return;
+        window.RTCRtpTransceiver.prototype[method] = function(arg) {
+            trace(method, this.__rtcStatsId, arg,
+                this.receiver.track.id);
+            return nativeMethod.apply(this, [arg]);
+        };
+    });
+}
+
+/**
+ * Wraps a RTCRtpSenderfor RTCStats. Currently applied to these methods:
+ * * setParameters
+ * * replaceTrack 
+ *
+ * @protected
+ * @param {function} trace - RTCStats trace callback
+ * @param {object} window - window object from which to take the RTCRtpSender protoype.
+ */
+function wrapRTCRtpSender(trace, window) {
+    if (!window.RTCRtpSender) {
+        return;
+    }
+    ['setParameters'].forEach(method => {
+        const nativeMethod = window.RTCRtpSender.prototype[method];
+        if (!nativeMethod) return;
+
+        window.RTCRtpSender.prototype[method] = function(...args) {
+            const serializedArgs = JSON.parse(JSON.stringify(args));
+            delete serializedArgs[0].transactionId;
+            trace(method, this.__rtcStatsId,
+                serializedArgs,
+                this.__rtcStatsSenderId);
+            return nativeMethod.apply(this, args);
+        };
+    });
+    ['replaceTrack'].forEach(method => {
+        const nativeMethod = window.RTCRtpSender.prototype[method];
+        if (!nativeMethod) return;
+        window.RTCRtpSender.prototype[method] = function(...args) {
+            const serializedArgs = [
+                this.track === null ? null : dumpTrackWithStreams(this.track),
+                args[0] === null ? null : dumpTrackWithStreams(args[0]),
+            ];
+            trace(method, this.__rtcStatsId,
+                serializedArgs,
+                this.__rtcStatsSenderId);
+            return nativeMethod.apply(this, args);
+        };
+    });
+}
+
+/**
+ * Wraps RTCPeerConnection for RTCStats.
+ * Legacy methods and events are not wrapped.
+ *
+ * @param {function} trace - RTCStats trace callback
+ * @param {object} window - window object from which to take the RTCPeerConnection protoype.
+ * @param {object} configuration - various configurable properties. Currently:
+ * * getStatsInterval {number} - interval at which getStats will be polled.
+ */
+export function wrapRTCPeerConnection(trace, window, {getStatsInterval}) {
+    if (!window.RTCPeerConnection) {
+        return;
+    }
+    if (window.RTCPeerConnection.prototype.hasOwnProperty('__rtcStats')) {
+        // Prevent double-wrapping.
+        return;
+    }
+    wrapRTCRtpTransceiver(trace, window);
+    wrapRTCRtpSender(trace, window);
+    const OrigPeerConnection = window.RTCPeerConnection;
+    let peerconnectioncounter = 0;
+    // Counters for event correlation.
+    const counters = {
+        createOffer: 0,
+        createAnswer: 0,
+        setLocalDescription: 0,
+        setRemoteDescription: 0,
+        addIceCandidate: 0
+    };
+
+    const RTCStatsPeerConnection = function(config, constraints) {
+        const pc = new OrigPeerConnection(config, constraints);
+        const pcId = 'PC_' + peerconnectioncounter++;
+        pc.__rtcStatsId = pcId;
+
+        trace('create', pcId, copyAndSanitizeConfig(config));
+        if (constraints) {
+            trace('constraints', pcId, constraints);
+        }
+
+        pc.addEventListener('icecandidate', (e) => {
+            trace('onicecandidate', pcId, e.candidate);
+        });
+        pc.addEventListener('icecandidateerror', (e) => {
+            const serializedArgs = {};
+            ['address', 'port', 'hostCandidate',
+                'url', 'errorCode', 'errorText'].forEach(key => {
+                serializedArgs[key] = e[key];
+            });
+            trace('onicecandidateerror', pcId, serializedArgs);
+        });
+        pc.addEventListener('track', (e) => {
+            trace('ontrack', pcId, dumpTrackWithStreams(e.track, ...e.streams));
+            e.track.addEventListener('unmute', () => {
+                trace('MediaStreamTrack.onunmute', pcId, e.track.id);
+            });
+            e.track.addEventListener('mute', () => {
+                trace('MediaStreamTrack.onmute', pcId, e.track.id);
+            });
+            if (e.transceiver) {
+                e.transceiver.__rtcStatsId = pcId;
+                e.transceiver.sender.__rtcStatsId = pcId;
+                e.transceiver.sender.__rtcStatsSenderId = e.track.id;
+            }
+            if (e.track.kind === 'video') {
+                setTimeout(() => {
+                    document.querySelectorAll('video').forEach(el => {
+                        if (!el.srcObject) return;
+                        if (el.srcObject.getTracks().indexOf(e.track) === -1) return;
+                        el.addEventListener('resize', () => {
+                            if (el.srcObject.getTracks().indexOf(e.track) === -1) return;
+                            trace('HTMLMediaElement.resize', pcId, {
+                                width: el.scrollWidth, // displayed size.
+                                height: el.scrollHeight,
+                                videoWidth: el.videoWidth, // received size.
+                                videoHeight: el.videoHeight,
+                            }, e.track.id);
+                        });
+                    });
+                }, 0);
+            }
+        });
+        ['signalingState', 'iceConnectionState', 'connectionState',
+            'iceGatheringState'].forEach(state => {
+            pc.addEventListener(state.toLowerCase() + 'change', () => {
+                trace('on' + state.toLowerCase() + 'change', pcId, pc[state]);
+            });
+        });
+        pc.addEventListener('negotiationneeded', () => {
+            trace('onnegotiationneeded', pcId, undefined);
+        });
+        pc.addEventListener('datachannel', (e) => {
+            trace('ondatachannel', pcId, [e.channel.id, e.channel.label]);
+        });
+
+        let prevStats = {};
+        let statsInterval;
+        const statsIdMap = {};
+        const getStats = async (reason) => {
+            if (pc.signalingState === 'closed') {
+                if (statsInterval) {
+                    window.clearInterval(statsInterval);
+                }
+                return;
+            }
+            const stats = map2obj(await pc.getStats());
+            if (pc.signalingState === 'closed') {
+                return;
+            }
+            const baseStats = JSON.parse(JSON.stringify(stats)); // our new prevStats.
+            const compressedStats = statsCompression(prevStats, stats, statsIdMap);
+            if (reason) {
+                trace('getStats', pc.__rtcStatsId, compressedStats, reason);
+            } else {
+                trace('getStats', pc.__rtcStatsId, compressedStats);
+            }
+            prevStats = baseStats;
+        };
+        // Listen to the connection establishment and start polling getStats then.
+        pc.addEventListener('connectionstatechange', function firstConnect() {
+            if (['connected', 'failed'].includes(pc.connectionState)) {
+                pc.removeEventListener('connectionstatechange', firstConnect);
+                if (getStatsInterval) {
+                    statsInterval = window.setInterval(getStats, getStatsInterval);
+                }
+                getStats(pc.connectionState + '-0');
+            }
+        });
+        return pc;
+    };
+
+    ['createDataChannel'].forEach(method => {
+        const nativeMethod = OrigPeerConnection.prototype[method];
+        if (!nativeMethod) return;
+        OrigPeerConnection.prototype[method] = function(...args) {
+            trace(method, this.__rtcStatsId, args);
+            return nativeMethod.apply(this, args);
+        };
+    });
+
+    ['close', 'restartIce'].forEach(method => {
+        const nativeMethod = OrigPeerConnection.prototype[method];
+        if (!nativeMethod) return;
+        OrigPeerConnection.prototype[method] = function() {
+            trace(method, this.__rtcStatsId, undefined);
+            return nativeMethod.apply(this, []);
+        };
+    });
+
+    ['addTrack'].forEach(method => {
+        const nativeMethod = OrigPeerConnection.prototype[method];
+        if (!nativeMethod) return;
+        OrigPeerConnection.prototype[method] = function(...args) {
+            const track = args[0];
+            const streams = args.slice(1);
+            trace(method, this.__rtcStatsId, dumpTrackWithStreams(track, ...streams));
+            const sender = nativeMethod.apply(this, args);
+            sender.__rtcStatsId = this.__rtcStatsId;
+            const transceiver = this.getTransceivers().find(t => t.sender === sender);
+            if (transceiver) {
+                transceiver.__rtcStatsId = this.__rtcStatsId;
+                sender.__rtcStatsSenderId = transceiver.receiver.track.id;
+                trace(method + 'OnSuccess', this.__rtcStatsId, null, transceiver.receiver.track.id);
+            }
+            return sender;
+        };
+    });
+
+    ['addTransceiver'].forEach(method => {
+        const nativeMethod = OrigPeerConnection.prototype[method];
+        if (!nativeMethod) return;
+        OrigPeerConnection.prototype[method] = function(...args) {
+            const serializedArgs = [
+                typeof(args[0]) === 'string' ? args[0] : dumpTrackWithStreams(args[0]), // trackOrKind,
+            ];
+            if (args[1]) {
+                serializedArgs.push(JSON.parse(JSON.stringify(args[1])));
+                if (args[1].streams) {
+                    serializedArgs[serializedArgs.length - 1].streams = args[1].streams.map(s => s.id);
+                }
+            }
+            trace(method, this.__rtcStatsId, serializedArgs);
+            const transceiver = nativeMethod.apply(this, args);
+            transceiver.__rtcStatsId =  this.__rtcStatsId;
+            transceiver.sender.__rtcStatsId = this.__rtcStatsId;
+            transceiver.sender.__rtcStatsSenderId = transceiver.receiver.track.id;
+            trace(method + 'OnSuccess', this.__rtcStatsId, null, transceiver.receiver.track.id);
+            return transceiver;
+        };
+    });
+
+    ['removeTrack'].forEach(method => {
+        const nativeMethod = OrigPeerConnection.prototype[method];
+        if (!nativeMethod) return;
+        OrigPeerConnection.prototype[method] = function(...args) {
+            trace(method, this.__rtcStatsId, args[0].__rtcStatsSenderId);
+            return nativeMethod.apply(this, args);
+        };
+    });
+
+    ['createOffer', 'createAnswer'].forEach(method => {
+        const nativeMethod = OrigPeerConnection.prototype[method];
+        if (!nativeMethod) return;
+        OrigPeerConnection.prototype[method] = function(...args) {
+            const trackingId = compressMethod(method) + '-' + (counters[method]++);
+            trace(method, this.__rtcStatsId, args[0], trackingId);
+            return nativeMethod.apply(this, args)
+                .then((description) => {
+                    trace(method + 'OnSuccess', this.__rtcStatsId,
+                        descriptionCompression(this.localDescription, description),
+                        trackingId);
+                    if (!this.localDescription) {
+                        if (method === 'createOffer') {
+                            this.__rtcStatsLastCreatedOffer = description;
+                        } else {
+                            this.__rtcStatsLastCreatedAnswer = description;
+                        }
+                    }
+                    return description;
+                }, (err) => {
+                    trace(method + 'OnFailure', this.__rtcStatsId, err.toString(),
+                        trackingId);
+                    throw err;
+                });
+        };
+    });
+
+    ['setLocalDescription', 'setRemoteDescription'].forEach(method => {
+        const nativeMethod = OrigPeerConnection.prototype[method];
+        if (!nativeMethod) return;
+        OrigPeerConnection.prototype[method] = function(...args) {
+            const trackingId = compressMethod(method) + '-' + (counters[method]++);
+            let implicitBaseDescription;
+            if (method === 'setLocalDescription') {
+                if (args[0]) {
+                    let explicitBaseDescription;
+                    if (args[0].type === 'offer') { 
+                        explicitBaseDescription = this.__rtcStatsLastCreatedOffer;
+                    } else if (args[0].type === 'answer') {
+                        explicitBaseDescription = this.__rtcStatsLastCreatedAnswer;
+                    }
+                    delete this.__rtcStatsLastCreatedOffer;
+                    delete this.__rtcStatsLastCreatedAnswer;
+                    trace(method, this.__rtcStatsId,
+                        descriptionCompression(this.localDescription || explicitBaseDescription, args[0]),
+                        trackingId);
+                } else {
+                    // Save previous localDescription for delta.
+                    implicitBaseDescription = JSON.parse(JSON.stringify(this.localDescription));
+                    trace(method, this.__rtcStatsId, null, trackingId);
+                }
+            } else if (method === 'setRemoteDescription') {
+                trace(method, this.__rtcStatsId,
+                    descriptionCompression(this.remoteDescription, args[0]),
+                    trackingId);
+            }
+
+            return nativeMethod.apply(this, args)
+                .then(() => {
+                    if (method === 'setLocalDescription' && args.length === 0) {
+                        trace(method + 'OnSuccess', this.__rtcStatsId,
+                            descriptionCompression(implicitBaseDescription, this.localDescription),
+                            trackingId);
+                    } else {
+                        trace(method + 'OnSuccess', this.__rtcStatsId, undefined,
+                            trackingId);
+                    }
+                }, (err) => {
+                    trace(method + 'OnFailure', this.__rtcStatsId, err.toString(),
+                        trackingId);
+                    throw err;
+                });
+        };
+    });
+
+    ['addIceCandidate'].forEach(method => {
+        const nativeMethod = OrigPeerConnection.prototype[method];
+        if (!nativeMethod) return;
+        OrigPeerConnection.prototype[method] = function(...args) {
+            const trackingId = compressMethod(method) + '-' + (counters[method]++);
+            trace(method, this.__rtcStatsId, args[0], trackingId);
+            return nativeMethod.apply(this, args)
+                .then((description) => {
+                    trace(method + 'OnSuccess', this.__rtcStatsId, undefined,
+                        trackingId);
+                    return description;
+                }, (err) => {
+                    trace(method + 'OnFailure', this.__rtcStatsId, err.toString(),
+                        trackingId);
+                    throw err;
+                });
+        };
+    });
+
+    ['setConfiguration'].forEach(method => {
+        const nativeMethod = OrigPeerConnection.prototype[method];
+        if (!nativeMethod) return;
+        OrigPeerConnection.prototype[method] = function(...args) {
+            trace(method, this.__rtcStatsId, copyAndSanitizeConfig(args[0]));
+            // TODO: should this catch, log and rethrow? Rare...
+            return nativeMethod.apply(this, args);
+        };
+    });
+
+    // wrap static methods. Currently just generateCertificate.
+    if (OrigPeerConnection.generateCertificate) {
+        Object.defineProperty(RTCStatsPeerConnection, 'generateCertificate', {
+            get(...args) {
+                return args.length ?
+                    OrigPeerConnection.generateCertificate.apply(null, args)
+                    : OrigPeerConnection.generateCertificate;
+            },
+        });
+    }
+    window.RTCPeerConnection = RTCStatsPeerConnection;
+    window.RTCPeerConnection.prototype = OrigPeerConnection.prototype;
+    window.RTCPeerConnection.prototype.__rtcStats = true;
+}

package/rtcstats.js

@@ -0,0 +1,10 @@
+import {wrapRTCPeerConnection} from './peerconnection.js';
+import {wrapGetUserMedia, wrapEnumerateDevices} from './media.js';
+import {WebSocketTrace} from './trace-websocket.js';
+
+export {
+    wrapRTCPeerConnection,
+    wrapGetUserMedia,
+    wrapEnumerateDevices,
+    WebSocketTrace,
+};

package/trace-websocket.js

@@ -0,0 +1,78 @@
+import {compressMethod} from '@rtcstats/rtcstats-shared';
+
+const PROTOCOL_VERSION = '4.0';
+
+export function WebSocketTrace() {
+    let buffer = [];
+    let connection;
+    let lastTime = 0;
+    const trace = function(...args) {
+        const now = Date.now();
+        args.push(now - lastTime);
+        lastTime = now;
+
+        if (args[1] instanceof RTCPeerConnection) {
+            args[1] = args[1].__rtcStatsId;
+        }
+        const method = args[0];
+        args[0] = compressMethod(method);
+        if (connection.readyState === WebSocket.OPEN) {
+            if (buffer.length === 0) {
+                connection.send(JSON.stringify(args));
+            } else {
+                buffer.push(args);
+            }
+        } else if (connection.readyState >= WebSocket.CLOSING) {
+            // no-op. Possibly log?
+        } else {
+            buffer.push(args);
+        }
+    };
+
+    trace.close = () => {
+        connection.close();
+    };
+    trace.connect = (wsURL) => {
+        buffer = [];
+        if (connection) {
+            connection.close();
+        }
+        connection = new WebSocket(wsURL, 'rtcstats#' + PROTOCOL_VERSION);
+        connection.addEventListener('error', (e) => {
+            // console.error('WS ERROR', e);
+        });
+
+        connection.addEventListener('close', () => {
+            // 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;
+                }
+                connection.send(JSON.stringify(buffer.shift()));
+                setTimeout(flush, 0);
+            }, 0);
+        });
+
+        connection.addEventListener('message', (msg) => {
+            // no messages from the server defined yet.
+        });
+    };
+    return trace;
+}