@fishjam-cloud/react-client 0.5.0

package/dist/useSetupMedia.js

@@ -0,0 +1,262 @@
+import { useEffect, useMemo, useRef } from "react";
+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 configRef = useRef(config);
+        useEffect(() => {
+            configRef.current = config;
+            if (config.screenShare.streamConfig) {
+                state.client.setScreenManagerConfig(config.screenShare.streamConfig);
+            }
+            state.client.setDeviceManagerConfig({
+                storage: config.storage,
+            });
+        }, [config, state.client]);
+        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,
+                });
+            }
+            // 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;
+                if (isBroadcastedTrackChanged(client, pending)) {
+                    if (!stream && config.broadcastOnDeviceStart) {
+                        pending = true;
+                        await videoTrackManager
+                            .startStreaming(config.defaultTrackMetadata, config.defaultSimulcastConfig, config.defaultMaxBandwidth)
+                            .finally(() => {
+                            pending = false;
+                        });
+                    }
+                    else if (stream && onDeviceChange === "replace") {
+                        pending = true;
+                        await videoTrackManager.refreshStreamedTrack().finally(() => {
+                            pending = false;
+                        });
+                    }
+                    else if (stream && onDeviceChange === "remove") {
+                        pending = true;
+                        await videoTrackManager.stopStreaming().finally(() => {
+                            pending = false;
+                        });
+                    }
+                }
+            };
+            const managerInitialized = async (event, client) => {
+                if (event.video?.media?.stream) {
+                    await broadcastOnCameraStart(client);
+                }
+            };
+            const devicesReady = async (event, client) => {
+                if (event.trackType === "video" && event.restarted && event?.media?.stream) {
+                    await broadcastOnCameraStart(client);
+                }
+            };
+            const deviceReady = async (event, client) => {
+                if (event.trackType === "video") {
+                    await broadcastOnCameraStart(client);
+                }
+            };
+            state.client.on("managerInitialized", managerInitialized);
+            state.client.on("devicesReady", devicesReady);
+            state.client.on("deviceReady", deviceReady);
+            return () => {
+                state.client.removeListener("managerInitialized", managerInitialized);
+                state.client.removeListener("devicesReady", devicesReady);
+                state.client.removeListener("deviceReady", deviceReady);
+            };
+        }, [state.client]);
+        useEffect(() => {
+            const removeOnCameraStopped = async (event, client) => {
+                const camera = client.devices.camera;
+                const videoTrackManager = client.videoTrackManager;
+                const stream = camera.broadcast?.stream;
+                const onDeviceStop = configRef.current.camera.onDeviceStop ?? "mute";
+                if (event.mediaDeviceType === "userMedia" &&
+                    event.trackType === "video" &&
+                    isBroadcastedTrackStopped(client.status, stream)) {
+                    if (onDeviceStop === "mute") {
+                        await videoTrackManager.pauseStreaming();
+                    }
+                    else {
+                        await videoTrackManager.stopStreaming();
+                    }
+                }
+            };
+            state.client.on("deviceStopped", removeOnCameraStopped);
+            return () => {
+                state.client.removeListener("deviceStopped", removeOnCameraStopped);
+            };
+        }, [state.client]);
+        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);
+                }
+            };
+            state.client.on("joined", broadcastCameraOnConnect);
+            return () => {
+                state.client.removeListener("joined", broadcastCameraOnConnect);
+            };
+        }, [state.client]);
+        useEffect(() => {
+            let pending = false;
+            const broadcastOnMicrophoneStart = async (client) => {
+                const microphone = client.devices.microphone;
+                const audioTrackManager = client.audioTrackManager;
+                const stream = microphone.broadcast?.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(() => {
+                            pending = false;
+                        });
+                    }
+                    else if (stream && onDeviceChange === "replace") {
+                        pending = true;
+                        await audioTrackManager.refreshStreamedTrack().finally(() => {
+                            pending = false;
+                        });
+                    }
+                    else if (stream && onDeviceChange === "remove") {
+                        pending = true;
+                        await audioTrackManager.stopStreaming().finally(() => {
+                            pending = false;
+                        });
+                    }
+                }
+            };
+            const managerInitialized = async (event, client) => {
+                if (event.audio?.media?.stream) {
+                    await broadcastOnMicrophoneStart(client);
+                }
+            };
+            const devicesReady = async (event, client) => {
+                if (event.trackType === "audio" && event.restarted && event?.media?.stream) {
+                    await broadcastOnMicrophoneStart(client);
+                }
+            };
+            const deviceReady = async (event, client) => {
+                if (event.trackType === "audio") {
+                    await broadcastOnMicrophoneStart(client);
+                }
+            };
+            state.client.on("managerInitialized", managerInitialized);
+            state.client.on("deviceReady", deviceReady);
+            state.client.on("devicesReady", devicesReady);
+            return () => {
+                state.client.removeListener("managerInitialized", managerInitialized);
+                state.client.removeListener("deviceReady", deviceReady);
+                state.client.removeListener("devicesReady", devicesReady);
+            };
+        }, [state.client]);
+        useEffect(() => {
+            const onMicrophoneStopped = async (event, client) => {
+                const audioTrackManager = client.audioTrackManager;
+                const stream = client.devices.microphone.broadcast?.stream;
+                const onDeviceStop = configRef.current.microphone.onDeviceStop ?? "mute";
+                const isRightDeviceType = event.mediaDeviceType === "userMedia";
+                const isRightTrackType = event.trackType === "audio";
+                if (isRightDeviceType && isRightTrackType && isBroadcastedTrackStopped(client.status, stream)) {
+                    if (onDeviceStop === "mute") {
+                        await audioTrackManager.pauseStreaming();
+                    }
+                    else {
+                        await audioTrackManager.stopStreaming();
+                    }
+                }
+            };
+            state.client.on("deviceStopped", onMicrophoneStopped);
+            return () => {
+                state.client.removeListener("deviceStopped", onMicrophoneStopped);
+            };
+        }, [state.client]);
+        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);
+                }
+            };
+            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]);
+        return useMemo(() => ({
+            init: () => state.client.initializeDevices({
+                audioTrackConstraints: configRef.current?.microphone?.trackConstraints,
+                videoTrackConstraints: configRef.current?.camera?.trackConstraints,
+            }),
+        }), [state.client]);
+    };
+};

package/dist/utils/errors.d.ts

@@ -0,0 +1,7 @@
+import type { DeviceError } from "../types";
+export declare const PERMISSION_DENIED: DeviceError;
+export declare const OVERCONSTRAINED_ERROR: DeviceError;
+export declare const NOT_FOUND_ERROR: DeviceError;
+export declare const UNHANDLED_ERROR: DeviceError;
+export declare const parseUserMediaError: (error: unknown) => DeviceError | null;
+//# sourceMappingURL=errors.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../../src/utils/errors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,eAAO,MAAM,iBAAiB,EAAE,WAAyC,CAAC;AAC1E,eAAO,MAAM,qBAAqB,EAAE,WAA8C,CAAC;AACnF,eAAO,MAAM,eAAe,EAAE,WAAuC,CAAC;AACtE,eAAO,MAAM,eAAe,EAAE,WAAyC,CAAC;AAIxE,eAAO,MAAM,mBAAmB,UAAW,OAAO,KAAG,WAAW,GAAG,IAelE,CAAC"}

package/dist/utils/errors.js

@@ -0,0 +1,22 @@
+export const PERMISSION_DENIED = { name: "NotAllowedError" };
+export const OVERCONSTRAINED_ERROR = { name: "OverconstrainedError" };
+export const NOT_FOUND_ERROR = { name: "NotFoundError" };
+export const UNHANDLED_ERROR = { name: "UNHANDLED_ERROR" };
+// https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#exceptions
+// OverconstrainedError has higher priority than NotAllowedError
+export const parseUserMediaError = (error) => {
+    if (!(error instanceof DOMException)) {
+        console.warn({ name: "Unhandled getUserMedia error", error });
+        return null;
+    }
+    if (error.name === "NotAllowedError") {
+        return PERMISSION_DENIED;
+    }
+    else if (error.name === "OverconstrainedError") {
+        return OVERCONSTRAINED_ERROR;
+    }
+    else if (error.name === "NotFoundError") {
+        return NOT_FOUND_ERROR;
+    }
+    return null;
+};

package/dist/utils/localStorage.d.ts

@@ -0,0 +1,5 @@
+export declare const loadObject: <T>(key: string, defaultValue: T) => T;
+export declare const loadString: (key: string, defaultValue?: string) => string;
+export declare const saveObject: <T>(key: string, value: T) => void;
+export declare const saveString: (key: string, value: string) => void;
+//# sourceMappingURL=localStorage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"localStorage.d.ts","sourceRoot":"","sources":["../../src/utils/localStorage.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,GAAI,CAAC,OAAO,MAAM,gBAAgB,CAAC,KAAG,CAM5D,CAAC;AAEF,eAAO,MAAM,UAAU,QAAS,MAAM,kCAMrC,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,CAAC,OAAO,MAAM,SAAS,CAAC,SAGlD,CAAC;AAEF,eAAO,MAAM,UAAU,QAAS,MAAM,SAAS,MAAM,SAEpD,CAAC"}

package/dist/utils/localStorage.js

@@ -0,0 +1,21 @@
+export const loadObject = (key, defaultValue) => {
+    const stringValue = loadString(key, "");
+    if (stringValue === "") {
+        return defaultValue;
+    }
+    return JSON.parse(stringValue);
+};
+export const loadString = (key, defaultValue = "") => {
+    const value = localStorage.getItem(key);
+    if (value === null || value === undefined) {
+        return defaultValue;
+    }
+    return value;
+};
+export const saveObject = (key, value) => {
+    const stringValue = JSON.stringify(value);
+    saveString(key, stringValue);
+};
+export const saveString = (key, value) => {
+    localStorage.setItem(key, value);
+};

package/dist/utils/media.d.ts

@@ -0,0 +1,12 @@
+import type { CurrentDevices, DeviceError, DeviceState, StorageConfig } from "../types";
+export declare const removeSpecifiedDeviceFromConstraints: (trackConstraints?: boolean | MediaTrackConstraints) => boolean | MediaTrackConstraints | undefined;
+export declare const REQUESTING = "Requesting";
+export declare const NOT_REQUESTED = "Not requested";
+export declare const getDeviceInfo: (trackDeviceId: string | null, devices: MediaDeviceInfo[]) => MediaDeviceInfo | null;
+export declare const getCurrentDevicesSettings: (requestedDevices: MediaStream, mediaDeviceInfos: MediaDeviceInfo[]) => CurrentDevices;
+export declare const isDeviceDifferentFromLastSession: (lastDevice: MediaDeviceInfo | null, currentDevice: MediaDeviceInfo | null) => boolean | null;
+export declare const isAnyDeviceDifferentFromLastSession: (lastVideoDevice: MediaDeviceInfo | null, lastAudioDevice: MediaDeviceInfo | null, currentDevices: CurrentDevices | null) => boolean;
+export declare const stopTracks: (requestedDevices: MediaStream) => void;
+export declare const prepareDeviceState: (stream: MediaStream | null, track: MediaStreamTrack | null, devices: MediaDeviceInfo[], error: DeviceError | null, shouldAsk: boolean) => DeviceState;
+export declare const getLocalStorageConfig: (deviceType: "audio" | "video") => StorageConfig;
+//# sourceMappingURL=media.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../src/utils/media.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAiB,WAAW,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAIvG,eAAO,MAAM,oCAAoC,sBAC5B,OAAO,GAAG,qBAAqB,KACjD,OAAO,GAAG,qBAAqB,GAAG,SAKpC,CAAC;AAEF,eAAO,MAAM,UAAU,eAAe,CAAC;AACvC,eAAO,MAAM,aAAa,kBAAkB,CAAC;AAE7C,eAAO,MAAM,aAAa,kBAAmB,MAAM,GAAG,IAAI,WAAW,eAAe,EAAE,KAAG,eAAe,GAAG,IACpB,CAAC;AAExF,eAAO,MAAM,yBAAyB,qBAClB,WAAW,oBACX,eAAe,EAAE,KAClC,cAcF,CAAC;AAEF,eAAO,MAAM,gCAAgC,eAC/B,eAAe,GAAG,IAAI,iBACnB,eAAe,GAAG,IAAI,mBAC2E,CAAC;AAEnH,eAAO,MAAM,mCAAmC,oBAC7B,eAAe,GAAG,IAAI,mBACtB,eAAe,GAAG,IAAI,kBACvB,cAAc,GAAG,IAAI,KACpC,OAMA,CAAC;AAEJ,eAAO,MAAM,UAAU,qBAAsB,WAAW,SAIvD,CAAC;AAQF,eAAO,MAAM,kBAAkB,WACrB,WAAW,GAAG,IAAI,SACnB,gBAAgB,GAAG,IAAI,WACrB,eAAe,EAAE,SACnB,WAAW,GAAG,IAAI,aACd,OAAO,KACjB,WAgBF,CAAC;AAEF,eAAO,MAAM,qBAAqB,eAAgB,OAAO,GAAG,OAAO,KAAG,aAMrE,CAAC"}

package/dist/utils/media.js

@@ -0,0 +1,64 @@
+import { loadObject, saveObject } from "./localStorage";
+export const removeSpecifiedDeviceFromConstraints = (trackConstraints) => {
+    if (typeof trackConstraints === "object") {
+        return { ...trackConstraints, deviceId: undefined };
+    }
+    return trackConstraints;
+};
+export const REQUESTING = "Requesting";
+export const NOT_REQUESTED = "Not requested";
+export const getDeviceInfo = (trackDeviceId, devices) => (trackDeviceId && devices.find(({ deviceId }) => trackDeviceId === deviceId)) || null;
+export const getCurrentDevicesSettings = (requestedDevices, mediaDeviceInfos) => {
+    const currentDevices = { videoinput: null, audioinput: null };
+    for (const track of requestedDevices.getTracks()) {
+        const settings = track.getSettings();
+        if (settings.deviceId) {
+            const currentDevice = mediaDeviceInfos.find((device) => device.deviceId == settings.deviceId);
+            const kind = currentDevice?.kind ?? null;
+            if ((currentDevice && kind === "videoinput") || kind === "audioinput") {
+                currentDevices[kind] = currentDevice ?? null;
+            }
+        }
+    }
+    return currentDevices;
+};
+export const isDeviceDifferentFromLastSession = (lastDevice, currentDevice) => lastDevice && (currentDevice?.deviceId !== lastDevice.deviceId || currentDevice?.label !== lastDevice?.label);
+export const isAnyDeviceDifferentFromLastSession = (lastVideoDevice, lastAudioDevice, currentDevices) => !!((currentDevices?.videoinput &&
+    isDeviceDifferentFromLastSession(lastVideoDevice, currentDevices?.videoinput || null)) ||
+    (currentDevices?.audioinput &&
+        isDeviceDifferentFromLastSession(lastAudioDevice, currentDevices?.audioinput || null)));
+export const stopTracks = (requestedDevices) => {
+    for (const track of requestedDevices.getTracks()) {
+        track.stop();
+    }
+};
+const prepareStatus = (requested, track) => {
+    if (!requested)
+        return ["Not requested", null];
+    if (track)
+        return ["OK", null];
+    return ["Error", null];
+};
+export const prepareDeviceState = (stream, track, devices, error, shouldAsk) => {
+    const deviceInfo = getDeviceInfo(track?.getSettings()?.deviceId || null, devices);
+    const [devicesStatus, newError] = prepareStatus(shouldAsk, track);
+    return {
+        devices,
+        devicesStatus,
+        media: {
+            stream: track ? stream : null,
+            track: track,
+            deviceInfo,
+            enabled: !!track,
+        },
+        mediaStatus: devicesStatus,
+        error: newError ?? error,
+    };
+};
+export const getLocalStorageConfig = (deviceType) => {
+    const key = `last-selected-${deviceType}-device`;
+    return {
+        getLastDevice: () => loadObject(key, null),
+        saveLastDevice: (info) => saveObject(key, info),
+    };
+};

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@fishjam-cloud/react-client",
+  "version": "0.5.0",
+  "description": "React client library for Fishjam Cloud",
+  "license": "Apache-2.0",
+  "author": "Fishjam Cloud Team",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "repository": "github:fishjam-cloud/web-client-sdk",
+  "homepage": "https://github.com/fishjam-cloud/web-client-sdk#readme",
+  "bugs": "https://github.com/fishjam-cloud/web-client-sdk/issues",
+  "keywords": [
+    "webrtc",
+    "fishjam"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/index.d.ts"
+      ]
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "e2e": "NODE_OPTIONS=--dns-result-order=ipv4first playwright test",
+    "docs": "typedoc src src/experimental",
+    "format": "prettier --write . --ignore-path ./.eslintignore",
+    "format:check": "prettier --check . --ignore-path ./.eslintignore",
+    "lint": "eslint . --ext .ts,.tsx --fix",
+    "lint:check": "eslint . --ext .ts,.tsx",
+    "prepack": "yarn workspace @fishjam-cloud/ts-client build && yarn build",
+    "typecheck": "tsc"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.45.3",
+    "@types/events": "^3.0.3",
+    "@types/lodash.isequal": "^4.5.8",
+    "@types/node": "^22.0.0",
+    "@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",
+    "typescript": "^5.5.4"
+  },
+  "dependencies": {
+    "@fishjam-cloud/ts-client": "0.5.0",
+    "events": "3.3.0",
+    "lodash.isequal": "4.5.0"
+  },
+  "directories": {
+    "example": "examples"
+  },
+  "packageManager": "yarn@4.3.0"
+}

package/readme.md

@@ -0,0 +1,151 @@
+# Fishjam React Client
+
+React client library for [Fishjam Cloud](https://cloud.fishjam.stream).
+It is a wrapper around
+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:
+
+```bash
+yarn run docs
+```
+
+## Installation
+
+You can install the library using `npm` or `yarn:
+
+```bash
+npm install @fishjam-cloud/react-client
+```
+
+```bash
+yarn add @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.
+- Created room and token of peer in that room.
+  You can use Room Manager to create room and peer token.
+
+This snippet is based
+on [minimal-react](../../examples/react-client/minimal-react/) example.
+
+```tsx
+// main.tsx
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { App, FishjamContextProvider } from "./components/App";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <FishjamContextProvider>
+      <App />
+    </FishjamContextProvider>
+  </React.StrictMode>,
+);
+
+// components/App.tsx
+import VideoPlayer from "./VideoPlayer";
+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 App = () => {
+  const [token, setToken] = useState("");
+
+  const connect = useConnect();
+  const disconnect = useDisconnect();
+  const api = useApi();
+  const status = useStatus();
+  const tracks = useTracks();
+
+  return (
+    <div>
+      <input value={token} onChange={(e) => setToken(() => e?.target?.value)} placeholder="token" />
+      <div>
+        <button
+          disabled={token === "" || status === "joined"}
+          onClick={() => {
+            if (!token || token === "") throw Error("Token is empty");
+            connect({
+              peerMetadata: { name: "John Doe" }, // example metadata
+              token: token,
+            });
+          }}
+        >
+          Connect
+        </button>
+        <button
+          disabled={status !== "joined"}
+          onClick={() => {
+            disconnect();
+          }}
+        >
+          Disconnect
+        </button>
+        <button
+          disabled={status !== "joined"}
+          onClick={() => {
+            // Get screen sharing MediaStream
+            navigator.mediaDevices.getDisplayMedia(SCREEN_SHARING_MEDIA_CONSTRAINTS).then((screenStream) => {
+              // Add local MediaStream to webrtc
+              screenStream.getTracks().forEach((track) => api.addTrack(track, { type: "screen" }));
+            });
+          }}
+        >
+          Start screen share
+        </button>
+        <span>Status: {status}</span>
+      </div>
+      {/* Render the remote tracks from other peers*/}
+      {Object.values(tracks).map(({ stream, trackId }) => (
+        <VideoPlayer key={trackId} stream={stream} /> // Simple component to render a video element
+      ))}
+    </div>
+  );
+};
+```
+
+### 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.
+
+## Copyright and License
+
+Copyright 2024, [Software Mansion](https://swmansion.com/?utm_source=git&utm_medium=readme&utm_campaign=react-client)
+
+[![Software Mansion](https://logo.swmansion.com/logo?color=white&variant=desktop&width=200&tag=react-client)](https://swmansion.com/?utm_source=git&utm_medium=readme&utm_campaign=react-client)
+
+Licensed under the [Apache License, Version 2.0](LICENSE)