self is not defined when using both dolbyio/webrtc-stats and millicast/sdk initStats

[j12y]

This may be my error but logging the issue while investigating what the right thing to do would be and which library is the source of the conflict.

Describe the bug

When trying to use webrtc-stats in combination with the millicast/sdk with initStats enabled I'm seeing this error:

ReferenceError: self is not defined
    at Object.<anonymous> (/Users/me/millicast-svelte-tester/node_modules/@dolbyio/webrtc-stats/dist/webrtc-stats.js:1:269)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at cjsLoader (node:internal/modules/esm/translators:284:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:234:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async nodeImport (file:///Users/jdela/w/gh/millicast/millicast-svelte-tester/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:54744:17)

Expected Behavior

This prevents vite from starting the app.

• perhaps a warning / error if there is a resource conflict

Minimalistic code (recommended)

This is a basic svelte project (npm create svelte@latest millicast-svelte-tester) but I'm trying to use both the built-in stats and the webrtc-stats library.

    const millicastView = new View(STREAM_NAME, tokenGenerator);
    millicastView.on('track', (event) => {
        videoNode.srcObject = event.streams[0];
    });

    const collection = new WebRTCStats({
        getStatsInterval: 1000,
        getStats: () => {
            return millicastView.webRTCPeer.getRTCPeer().getStats();
        },
    });

    collection.on('stats', (event) => {
        console.log(event);
    });

    millicastView.webRTCPeer?.on('stats', (stats) => {
        console.log(stats);
    });

    try {
        const options = { }
        await millicastView.connect(options);

        // all of the datas 
        millicastView.webRTCPeer.initStats();
        collection.start();
    } catch (e) {
        console.log('Connection failed: ', e);
        millicastView.reconnect();
    }

Specifications

> node --version
v20.8.0
> cat package.json
{
        "name": "millicast-svelte-tester",
        "version": "0.0.1",
        "private": true,
        "scripts": {
                "dev": "vite dev",
                "build": "vite build",
                "preview": "vite preview",
                "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
                "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
        },
        "devDependencies": {
                "@sveltejs/adapter-auto": "^3.0.0",
                "@sveltejs/kit": "^2.0.0",
                "@sveltejs/vite-plugin-svelte": "^3.0.0",
                "svelte": "^4.2.7",
                "svelte-check": "^3.6.0",
                "tslib": "^2.4.1",
                "typescript": "^5.0.0",
                "vite": "^5.0.3"
        },
        "type": "module",
        "dependencies": {
                "@dolbyio/webrtc-stats": "^0.3.0",
                "@millicast/sdk": "^0.1.43"
        }
}

[j12y]

The issue seems to be that SvelteKit will do Server-side Rendering and the stats must be gathered client-side so something with the import for both libraries didn't detect the scenario and failed to load. Disabling SSR for a specific route that uses these libraries to gather stats resolves the issue.

[j12y]

Closing as there is nothing to be done.