@fishjam-cloud/react-client 0.5.1 → 0.5.5

package/dist/useSetupMedia.js

@@ -3,13 +3,10 @@ export const createUseSetupMediaHook = (useFishjamContext) => {
     const isBroadcastedTrackChanged = (client, pending) => client.status === "joined" && !pending && !client.isReconnecting();
     const isBroadcastedTrackStopped = (status, stream) => status === "joined" && stream;
     return (config) => {
-        const { state } = useFishjamContext();
+        const { state, videoTrackManager, audioTrackManager } = useFishjamContext();
         const configRef = useRef(config);
         useEffect(() => {
             configRef.current = config;
-            if (config.screenShare.streamConfig) {
-                state.client.setScreenManagerConfig(config.screenShare.streamConfig);
-            }
             state.client.setDeviceManagerConfig({
                 storage: config.storage,
             });
@@ -17,28 +14,23 @@ export const createUseSetupMediaHook = (useFishjamContext) => {
         useEffect(() => {
             if (!configRef.current.startOnMount)
                 return;
-            if (state.client.audioDeviceManager.getStatus() === "uninitialized" ||
-                state.client.videoDeviceManager.getStatus() === "uninitialized") {
-                state.client.initializeDevices({
-                    audioTrackConstraints: configRef?.current.microphone.trackConstraints,
-                    videoTrackConstraints: configRef?.current.camera.trackConstraints,
-                });
-            }
+            state.client.initializeDevices({
+                audioTrackConstraints: configRef?.current.microphone.trackConstraints,
+                videoTrackConstraints: configRef?.current.camera.trackConstraints,
+            });
             // eslint-disable-next-line
         }, []);
         useEffect(() => {
             let pending = false;
             const broadcastOnCameraStart = async (client) => {
                 const config = configRef.current.camera;
-                const videoTrackManager = client.videoTrackManager;
                 const onDeviceChange = config.onDeviceChange ?? "replace";
-                const camera = client.devices.camera;
-                const stream = camera.broadcast?.stream;
+                const stream = videoTrackManager.getCurrentTrack()?.stream;
                 if (isBroadcastedTrackChanged(client, pending)) {
                     if (!stream && config.broadcastOnDeviceStart) {
                         pending = true;
                         await videoTrackManager
-                            .startStreaming(config.defaultTrackMetadata, config.defaultSimulcastConfig, config.defaultMaxBandwidth)
+                            .startStreaming(config.defaultSimulcastConfig, config.defaultMaxBandwidth)
                             .finally(() => {
                             pending = false;
                         });
@@ -80,12 +72,10 @@ export const createUseSetupMediaHook = (useFishjamContext) => {
                 state.client.removeListener("devicesReady", devicesReady);
                 state.client.removeListener("deviceReady", deviceReady);
             };
-        }, [state.client]);
+        }, [state.client, videoTrackManager]);
         useEffect(() => {
             const removeOnCameraStopped = async (event, client) => {
-                const camera = client.devices.camera;
-                const videoTrackManager = client.videoTrackManager;
-                const stream = camera.broadcast?.stream;
+                const stream = videoTrackManager.getCurrentTrack()?.stream;
                 const onDeviceStop = configRef.current.camera.onDeviceStop ?? "mute";
                 if (event.mediaDeviceType === "userMedia" &&
                     event.trackType === "video" &&
@@ -102,35 +92,31 @@ export const createUseSetupMediaHook = (useFishjamContext) => {
             return () => {
                 state.client.removeListener("deviceStopped", removeOnCameraStopped);
             };
-        }, [state.client]);
+        }, [state.client, videoTrackManager]);
         useEffect(() => {
             const broadcastCameraOnConnect = async (_, client) => {
                 const camera = client.devices.camera;
                 const stream = camera.stream;
                 const config = configRef.current.camera;
                 if (stream && config.broadcastOnConnect) {
-                    await client.videoTrackManager.startStreaming(config.defaultTrackMetadata, config.defaultSimulcastConfig, config.defaultMaxBandwidth);
+                    await videoTrackManager.startStreaming(config.defaultSimulcastConfig, config.defaultMaxBandwidth);
                 }
             };
             state.client.on("joined", broadcastCameraOnConnect);
             return () => {
                 state.client.removeListener("joined", broadcastCameraOnConnect);
             };
-        }, [state.client]);
+        }, [state.client, videoTrackManager]);
         useEffect(() => {
             let pending = false;
             const broadcastOnMicrophoneStart = async (client) => {
-                const microphone = client.devices.microphone;
-                const audioTrackManager = client.audioTrackManager;
-                const stream = microphone.broadcast?.stream;
+                const stream = audioTrackManager.getCurrentTrack()?.stream;
                 const config = configRef.current.microphone;
                 const onDeviceChange = config.onDeviceChange ?? "replace";
                 if (isBroadcastedTrackChanged(client, pending)) {
                     if (!stream && config.broadcastOnDeviceStart) {
                         pending = true;
-                        await audioTrackManager
-                            .startStreaming(config.defaultTrackMetadata, undefined, config.defaultMaxBandwidth)
-                            .finally(() => {
+                        await audioTrackManager.startStreaming(undefined, config.defaultMaxBandwidth).finally(() => {
                             pending = false;
                         });
                     }
@@ -171,11 +157,10 @@ export const createUseSetupMediaHook = (useFishjamContext) => {
                 state.client.removeListener("deviceReady", deviceReady);
                 state.client.removeListener("devicesReady", devicesReady);
             };
-        }, [state.client]);
+        }, [state.client, audioTrackManager]);
         useEffect(() => {
             const onMicrophoneStopped = async (event, client) => {
-                const audioTrackManager = client.audioTrackManager;
-                const stream = client.devices.microphone.broadcast?.stream;
+                const stream = audioTrackManager.getCurrentTrack()?.stream;
                 const onDeviceStop = configRef.current.microphone.onDeviceStop ?? "mute";
                 const isRightDeviceType = event.mediaDeviceType === "userMedia";
                 const isRightTrackType = event.trackType === "audio";
@@ -192,66 +177,20 @@ export const createUseSetupMediaHook = (useFishjamContext) => {
             return () => {
                 state.client.removeListener("deviceStopped", onMicrophoneStopped);
             };
-        }, [state.client]);
+        }, [state.client, audioTrackManager]);
         useEffect(() => {
             const broadcastMicrophoneOnConnect = async (_, client) => {
                 const config = configRef.current.microphone;
                 const microphone = client.devices.microphone;
                 if (microphone.stream && config.broadcastOnConnect) {
-                    await client.audioTrackManager.startStreaming(config.defaultTrackMetadata, undefined, config.defaultMaxBandwidth);
+                    await audioTrackManager.startStreaming(undefined, config.defaultMaxBandwidth);
                 }
             };
             state.client.on("joined", broadcastMicrophoneOnConnect);
             return () => {
                 state.client.removeListener("joined", broadcastMicrophoneOnConnect);
             };
-        }, [state.client]);
-        useEffect(() => {
-            let pending = false;
-            const broadcastOnScreenShareStart = async (event, client) => {
-                const screenShare = client.devices.screenShare;
-                const stream = screenShare.broadcast?.stream;
-                const { broadcastOnDeviceStart, defaultTrackMetadata, defaultMaxBandwidth } = configRef.current.screenShare;
-                if (event.mediaDeviceType === "displayMedia" &&
-                    isBroadcastedTrackChanged(client, pending) &&
-                    !stream &&
-                    broadcastOnDeviceStart) {
-                    pending = true;
-                    await screenShare.startStreaming(defaultTrackMetadata, defaultMaxBandwidth).finally(() => {
-                        pending = false;
-                    });
-                }
-            };
-            state.client.on("deviceReady", broadcastOnScreenShareStart);
-            return () => {
-                state.client.removeListener("deviceReady", broadcastOnScreenShareStart);
-            };
-        }, [state.client]);
-        useEffect(() => {
-            const onScreenShareStop = async (event, client) => {
-                const stream = client.devices.screenShare.broadcast?.stream;
-                const isRightDeviceType = event.mediaDeviceType === "displayMedia";
-                const isRightTrackType = event.trackType === "video";
-                if (isRightDeviceType && isRightTrackType && isBroadcastedTrackStopped(client.status, stream)) {
-                    await client.devices.screenShare.stopStreaming();
-                }
-            };
-            state.client.on("deviceStopped", onScreenShareStop);
-            return () => {
-                state.client.removeListener("deviceStopped", onScreenShareStop);
-            };
-        }, [state.client]);
-        useEffect(() => {
-            const broadcastScreenShareOnConnect = async (_, client) => {
-                if (client.devices.screenShare.stream && configRef.current.screenShare.broadcastOnConnect) {
-                    await client.devices.screenShare.startStreaming(configRef.current.screenShare.defaultTrackMetadata, configRef.current.screenShare.defaultMaxBandwidth);
-                }
-            };
-            state.client.on("joined", broadcastScreenShareOnConnect);
-            return () => {
-                state.client.removeListener("joined", broadcastScreenShareOnConnect);
-            };
-        }, [state.client]);
+        }, [state.client, audioTrackManager]);
         return useMemo(() => ({
             init: () => state.client.initializeDevices({
                 audioTrackConstraints: configRef.current?.microphone?.trackConstraints,

package/dist/utils/track.d.ts

@@ -0,0 +1,5 @@
+import type { FishjamClient } from "@fishjam-cloud/ts-client";
+import type { Track } from "../state.types";
+import type { PeerMetadata, TrackMetadata } from "../types";
+export declare const getRemoteOrLocalTrack: (tsClient: FishjamClient<PeerMetadata, TrackMetadata>, remoteOrLocalTrackId: string | null) => Track | null;
+//# sourceMappingURL=track.d.ts.map

package/dist/utils/track.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"track.d.ts","sourceRoot":"","sources":["../../src/utils/track.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAgB,MAAM,0BAA0B,CAAC;AAC5E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAsC5D,eAAO,MAAM,qBAAqB,aACtB,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,wBAC9B,MAAM,GAAG,IAAI,iBAKpC,CAAC"}

package/dist/utils/track.js

@@ -0,0 +1,37 @@
+// In most cases, the track is identified by its remote track ID.
+// This ID comes from the ts-client `addTrack` method.
+// However, we don't have that ID before the `addTrack` method returns it.
+//
+// The `addTrack` method emits the `localTrackAdded` event.
+// This event will refresh the internal state of this object.
+// However, in that event handler, we don't yet have the remote track ID.
+// Therefore, for that brief moment, we will use the local track ID from the MediaStreamTrack object to identify the track.
+const getRemoteOrLocalTrackContext = (tsClient, remoteOrLocalTrackId) => {
+    if (!remoteOrLocalTrackId)
+        return null;
+    const tracks = tsClient?.getLocalPeer()?.tracks;
+    if (!tracks)
+        return null;
+    const trackByRemoteId = tracks?.get(remoteOrLocalTrackId);
+    if (trackByRemoteId)
+        return trackByRemoteId;
+    const trackByLocalId = [...tracks.values()].find((track) => track.track?.id === remoteOrLocalTrackId);
+    return trackByLocalId ? trackByLocalId : null;
+};
+const getTrackFromContext = (context) => ({
+    rawMetadata: context.rawMetadata,
+    metadata: context.metadata,
+    trackId: context.trackId,
+    stream: context.stream,
+    simulcastConfig: context.simulcastConfig || null,
+    encoding: context.encoding || null,
+    vadStatus: context.vadStatus,
+    track: context.track,
+    metadataParsingError: context.metadataParsingError,
+});
+export const getRemoteOrLocalTrack = (tsClient, remoteOrLocalTrackId) => {
+    const context = getRemoteOrLocalTrackContext(tsClient, remoteOrLocalTrackId);
+    if (!context)
+        return null;
+    return getTrackFromContext(context);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fishjam-cloud/react-client",
-  "version": "0.5.1",
+  "version": "0.5.5",
   "description": "React client library for Fishjam Cloud",
   "license": "Apache-2.0",
   "author": "Fishjam Cloud Team",
@@ -42,19 +42,19 @@
     "typecheck": "tsc"
   },
   "devDependencies": {
-    "@playwright/test": "^1.45.3",
+    "@playwright/test": "^1.46.1",
     "@types/events": "^3.0.3",
     "@types/lodash.isequal": "^4.5.8",
-    "@types/node": "^22.0.0",
+    "@types/node": "^22.4.1",
     "@types/react": "^18.2.55",
     "react": "^18.2.0",
     "typed-emitter": "^2.1.0",
-    "typedoc": "^0.26.5",
-    "typedoc-plugin-mdn-links": "^3.2.6",
+    "typedoc": "^0.26.6",
+    "typedoc-plugin-mdn-links": "^3.2.10",
     "typescript": "^5.5.4"
   },
   "dependencies": {
-    "@fishjam-cloud/ts-client": "0.5.1",
+    "@fishjam-cloud/ts-client": "0.5.5",
     "events": "3.3.0",
     "lodash.isequal": "4.5.0"
   },

package/readme.md

@@ -1,3 +1,7 @@
+[![NPM Version](https://img.shields.io/npm/v/@fishjam-cloud/react-client)](https://www.npmjs.com/package/@fishjam-cloud/react-client)
+[![TypeScript Strict](https://badgen.net/badge/TS/Strict)](https://www.typescriptlang.org)
+[![TypeDoc](https://img.shields.io/badge/TypeDoc-8A2BE2)](https://fishjam-cloud.github.io/web-client-sdk/modules/_fishjam_dev_react_client.html)
+
 # Fishjam React Client
 
 React client library for [Fishjam Cloud](https://cloud.fishjam.stream).
@@ -6,7 +10,7 @@ the [TS client](../ts-client/README.md).
 
 ## Documentation
 
-Documentation is available [here](https://fishjam-cloud.github.io/web-client-sdk/modules/_fishjam_dev_react_client.html or you can generate it locally:
+Documentation is available [here](https://fishjam-cloud.github.io/web-client-sdk/modules/_fishjam_dev_react_client.html) or you can generate it locally:
 
 ```bash
 yarn run docs
@@ -14,26 +18,23 @@ yarn run docs
 
 ## Installation
 
-You can install the library using `npm` or `yarn:
+You can install this package using `npm`:
 
 ```bash
 npm install @fishjam-cloud/react-client
 ```
 
+or `yarn`:
+
 ```bash
-yarn add @fishjam-cloud/react-client
+yarn @fishjam-cloud/react-client
 ```
 
-It was tested with `nodejs` version mentioned in [`.tool-versions`](./.tool-versions) file.
-
 ## Usage
 
-For pure TypeScript usage,
-see [TS client](../ts-client/README.md).
-
 Prerequisites:
 
-- Account on Fishjam Cloud with App configured.
+- Account on [Fishjam Cloud](https://cloud.fishjam.stream) with App configured.
 - Created room and token of peer in that room.
   You can use Room Manager to create room and peer token.
 
@@ -60,22 +61,9 @@ import { SCREEN_SHARING_MEDIA_CONSTRAINTS } from "@fishjam-cloud/react-client";
 import { create } from "@fishjam-cloud/react-client";
 import { useState } from "react";
 
-// Example metadata types for peer and track
-// You can define your own metadata types just make sure they are serializable
-export type PeerMetadata = {
-  name: string;
-};
-
-export type TrackMetadata = {
-  type: "camera" | "screen";
-};
-
 // Create a Fishjam client instance
 // remember to use FishjamContextProvider
-export const { useApi, useTracks, useStatus, useConnect, useDisconnect, FishjamContextProvider } = create<
-  PeerMetadata,
-  TrackMetadata
->();
+export const { useApi, useTracks, useStatus, useConnect, useDisconnect, FishjamContextProvider } = create();
 
 export const App = () => {
   const [token, setToken] = useState("");
@@ -95,7 +83,6 @@ export const App = () => {
           onClick={() => {
             if (!token || token === "") throw Error("Token is empty");
             connect({
-              peerMetadata: { name: "John Doe" }, // example metadata
               token: token,
             });
           }}
@@ -133,11 +120,6 @@ export const App = () => {
 };
 ```
 
-### Releasing new versions
-
-To release a new version of the package, go to `Actions` > `Release package` workflow and trigger it with the chosen release type.
-The workflow will bump the package version in `package.json`, release the package to NPM, create a new git tag and a GitHub release.
-
 ## Examples
 
 For examples, see [examples](../../examples/react-client/) folder.

package/dist/ScreenShareManager.d.ts

@@ -1,57 +0,0 @@
-import type TypedEmitter from "typed-emitter";
-import type { DeviceError, DevicesStatus } from "./types";
-import type { TrackKind } from "@fishjam-cloud/ts-client";
-export type TrackType = TrackKind | "audiovideo";
-export type MediaDeviceType = "displayMedia" | "userMedia";
-export type DisplayMediaManagerEvents = {
-    deviceReady: (event: {
-        type: TrackType;
-    }, state: ScreenShareDeviceState) => void;
-    deviceStopped: (event: {
-        type: TrackType;
-    }, state: ScreenShareDeviceState) => void;
-    deviceEnabled: (event: {
-        type: TrackType;
-    }, state: ScreenShareDeviceState) => void;
-    deviceDisabled: (event: {
-        type: TrackType;
-    }, state: ScreenShareDeviceState) => void;
-    error: (event: {
-        type: TrackType;
-        error: DeviceError | null;
-        rawError: any;
-    }, state: ScreenShareDeviceState) => void;
-};
-export interface ScreenShareManagerConfig {
-    audioTrackConstraints?: boolean | MediaTrackConstraints;
-    videoTrackConstraints?: boolean | MediaTrackConstraints;
-}
-export type ScreenShareMedia = {
-    stream: MediaStream | null;
-    track: MediaStreamTrack | null;
-    enabled: boolean;
-};
-export type ScreenShareDeviceState = {
-    status: DevicesStatus;
-    audioMedia: ScreenShareMedia | null;
-    videoMedia: ScreenShareMedia | null;
-    error: DeviceError | null;
-};
-declare const ScreenShareManager_base: new () => TypedEmitter<DisplayMediaManagerEvents>;
-export declare class ScreenShareManager extends ScreenShareManager_base {
-    private readonly defaultConfig?;
-    private config?;
-    private data;
-    getSnapshot(): ScreenShareDeviceState;
-    constructor(defaultConfig?: ScreenShareManagerConfig);
-    setConfig(config: ScreenShareManagerConfig): void;
-    private getType;
-    getMedia: () => ScreenShareMedia | null;
-    start(config?: ScreenShareManagerConfig): Promise<void>;
-    private setupOnEndedCallback;
-    private onTrackEnded;
-    stop(type: TrackType): Promise<void>;
-    setEnable(type: TrackType, value: boolean): void;
-}
-export {};
-//# sourceMappingURL=ScreenShareManager.d.ts.map

package/dist/ScreenShareManager.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScreenShareManager.d.ts","sourceRoot":"","sources":["../src/ScreenShareManager.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,YAAY,MAAM,eAAe,CAAC;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAE1D,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,YAAY,CAAC;AACjD,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG,WAAW,CAAC;AAE3D,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,EAAE,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACjF,aAAa,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,EAAE,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACnF,aAAa,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,EAAE,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACnF,cAAc,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,EAAE,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACpF,KAAK,EAAE,CACL,KAAK,EAAE;QACL,IAAI,EAAE,SAAS,CAAC;QAChB,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;QAC1B,QAAQ,EAAE,GAAG,CAAC;KACf,EACD,KAAK,EAAE,sBAAsB,KAC1B,IAAI,CAAC;CACX,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,qBAAqB,CAAC,EAAE,OAAO,GAAG,qBAAqB,CAAC;IACxD,qBAAqB,CAAC,EAAE,OAAO,GAAG,qBAAqB,CAAC;CACzD;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC/B,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,aAAa,CAAC;IACtB,UAAU,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACpC,UAAU,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACpC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;CAC3B,CAAC;iDAEiE,YAAY,CAAC,yBAAyB,CAAC;AAA1G,qBAAa,kBAAmB,SAAQ,uBAAmE;IACzG,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,CAA2B;IAC1D,OAAO,CAAC,MAAM,CAAC,CAA2B;IAE1C,OAAO,CAAC,IAAI,CAKV;IAGK,WAAW,IAAI,sBAAsB;gBAIhC,aAAa,CAAC,EAAE,wBAAwB;IAK7C,SAAS,CAAC,MAAM,EAAE,wBAAwB;IAIjD,OAAO,CAAC,OAAO;IAOR,QAAQ,gCAA8B;IAEhC,KAAK,CAAC,MAAM,CAAC,EAAE,wBAAwB;IA0CpD,OAAO,CAAC,oBAAoB;IAgB5B,OAAO,CAAC,YAAY,CAKlB;IAEW,IAAI,CAAC,IAAI,EAAE,SAAS;IA2B1B,SAAS,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO;CAwBjD"}

package/dist/ScreenShareManager.js

@@ -1,135 +0,0 @@
-import EventEmitter from "events";
-import { parseUserMediaError } from "./utils/errors";
-export class ScreenShareManager extends EventEmitter {
-    defaultConfig;
-    config;
-    data = {
-        audioMedia: null,
-        videoMedia: null,
-        status: "Not requested",
-        error: null,
-    };
-    // todo add nested read only
-    getSnapshot() {
-        return this.data;
-    }
-    constructor(defaultConfig) {
-        super();
-        this.defaultConfig = defaultConfig;
-    }
-    setConfig(config) {
-        this.config = config;
-    }
-    getType(options) {
-        if (options.audio && options.video)
-            return "audiovideo";
-        if (options.audio)
-            return "audio";
-        if (options.video)
-            return "video";
-        return null;
-    }
-    getMedia = () => this.data.videoMedia;
-    async start(config) {
-        const options = {
-            video: config?.videoTrackConstraints ??
-                this.config?.videoTrackConstraints ??
-                this.defaultConfig?.videoTrackConstraints,
-            audio: config?.audioTrackConstraints ??
-                this.config?.audioTrackConstraints ??
-                this.defaultConfig?.audioTrackConstraints,
-        };
-        const type = this.getType(options);
-        if (!type)
-            return;
-        try {
-            const newStream = await navigator.mediaDevices.getDisplayMedia(options);
-            this.data = {
-                error: null,
-                videoMedia: {
-                    enabled: true,
-                    stream: newStream,
-                    track: newStream?.getVideoTracks()[0] ?? null,
-                },
-                audioMedia: {
-                    enabled: true,
-                    stream: newStream,
-                    track: newStream?.getAudioTracks()[0] ?? null,
-                },
-                status: "OK",
-            };
-            this.setupOnEndedCallback();
-            this.emit("deviceReady", { type: type }, this.data);
-        }
-        catch (error) {
-            const parsedError = parseUserMediaError(error);
-            this.emit("error", { type, error: parsedError, rawError: error }, this.data);
-        }
-    }
-    setupOnEndedCallback() {
-        if (this.data.videoMedia?.track) {
-            this.data.videoMedia.track.addEventListener("ended", async (event) => await this.onTrackEnded("video", event.target.id));
-        }
-        if (this.data.audioMedia?.track) {
-            this.data.audioMedia.track.addEventListener("ended", async (event) => await this.onTrackEnded("audio", event.target.id));
-        }
-    }
-    onTrackEnded = async (kind, trackId) => {
-        const mediaType = kind === "video" ? "videoMedia" : "audioMedia";
-        if (trackId === this?.data[mediaType]?.track?.id) {
-            await this.stop("audiovideo");
-        }
-    };
-    async stop(type) {
-        if (type === "video") {
-            for (const track of this.data?.videoMedia?.stream?.getTracks() ?? []) {
-                track.stop();
-            }
-            this.data.videoMedia = null;
-        }
-        else if (type === "audio") {
-            // todo test it
-            for (const track of this.data?.audioMedia?.stream?.getTracks() ?? []) {
-                track.stop();
-            }
-            this.data.audioMedia = null;
-        }
-        else {
-            for (const track of this.data?.videoMedia?.stream?.getTracks() ?? []) {
-                track.stop();
-            }
-            this.data.videoMedia = null;
-            for (const track of this.data?.audioMedia?.stream?.getTracks() ?? []) {
-                track.stop();
-            }
-            this.data.audioMedia = null;
-        }
-        this.emit("deviceStopped", { type }, this.data);
-    }
-    setEnable(type, value) {
-        if (type === "video" && this.data.videoMedia?.track) {
-            this.data.videoMedia.track.enabled = value;
-            this.data.videoMedia.enabled = value;
-        }
-        else if (type === "audio" && this.data.audioMedia?.track) {
-            this.data.audioMedia.track.enabled = value;
-            this.data.audioMedia.enabled = value;
-        }
-        else {
-            if (this.data.videoMedia?.track) {
-                this.data.videoMedia.track.enabled = value;
-                this.data.videoMedia.enabled = value;
-            }
-            if (this.data.audioMedia?.track) {
-                this.data.audioMedia.track.enabled = value;
-                this.data.audioMedia.enabled = value;
-            }
-        }
-        if (value) {
-            this.emit("deviceEnabled", { type }, this.data);
-        }
-        else {
-            this.emit("deviceDisabled", { type }, this.data);
-        }
-    }
-}