From 0c9bcbfc54f596afa9d41aa65d5fa0ef9ab5e542 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= Date: Mon, 16 Mar 2026 15:42:25 +0100 Subject: [PATCH 1/9] Add Mobile examples docs --- docs/api/_category_.json | 2 +- docs/examples/_category_.json | 10 ++ docs/examples/mobile.mdx | 180 ++++++++++++++++++++++++++++++++++ 3 files changed, 191 insertions(+), 1 deletion(-) create mode 100644 docs/examples/_category_.json create mode 100644 docs/examples/mobile.mdx diff --git a/docs/api/_category_.json b/docs/api/_category_.json index 24fd9392..d38385d4 100644 --- a/docs/api/_category_.json +++ b/docs/api/_category_.json @@ -1,6 +1,6 @@ { "label": "API", - "position": 6, + "position": 7, "link": { "type": "generated-index", "description": "API documentation for Client and Server SDKs.", diff --git a/docs/examples/_category_.json b/docs/examples/_category_.json new file mode 100644 index 00000000..085a6d37 --- /dev/null +++ b/docs/examples/_category_.json @@ -0,0 +1,10 @@ +{ + "label": "Examples", + "position": 6, + "link": { + "type": "generated-index", + "title": "Examples", + "description": "Real-world code examples and use cases.", + "slug": "/examples" + } +} diff --git a/docs/examples/mobile.mdx b/docs/examples/mobile.mdx new file mode 100644 index 00000000..9628cdfa --- /dev/null +++ b/docs/examples/mobile.mdx @@ -0,0 +1,180 @@ +--- +type: explanation +sidebar_position: 0 +--- + +# React Native Examples + +_Runnable reference apps demonstrating common Fishjam use cases in React Native_ + +Each example is a standalone Expo application you can run locally and use as a starting point for your own project. +All examples use `@fishjam-cloud/react-native-client` and require a Fishjam ID from the [Fishjam Dashboard](https://fishjam.io/app). + +| Example | What it demonstrates | +| ----------------------------------------- | ------------------------------------------------------------------ | +| [Minimal Video Room](#minimal-video-room) | Simplest possible video call — the baseline for all other examples | +| [Fishjam Chat](#fishjam-chat) | Full-featured video conferencing and livestreaming app | +| [Background Blur](#background-blur) | Applying real-time video effects via camera track middleware | +| [Text Chat](#text-chat) | Peer-to-peer text messaging with WebRTC data channels | +| [Video Player](#video-player) | Livestream broadcaster and viewer with separate UI modes | + +--- + +## Minimal Video Room + +The simplest way to get video calling working — joining a room, displaying your own camera feed, and showing remote participants. Start here if you're new to Fishjam. + +**Demonstrates:** + +- Wrapping your app in `FishjamProvider` +- Connecting to a room with `useConnection` +- Accessing local and remote peers with `usePeers` +- Rendering video streams with `RTCView` + +### Running the example + +```bash +cd minimal-react-native +yarn install +npx expo prebuild +npx expo run:android # or run:ios +``` + +:::important +This won't work on the iOS Simulator — the Simulator can't access the camera. Test on a real device. +::: + +The room screen uses `usePeers` to retrieve all participants and renders their camera streams in a two-column grid with `RTCView`. + +Browse the full source: [minimal-react-native on GitHub](https://github.com/fishjam-cloud/examples/tree/main/mobile/minimal-react-native) + +--- + +## Fishjam Chat + +A full-featured application covering two distinct room types: a video conferencing room (conference call with multiple participants) and a livestream room (one broadcaster, many viewers). It is the most complete example and the best reference for production-like architecture. + +**Demonstrates:** + +- Tab-based navigation between VideoRoom and Livestream features +- Pre-call room preview before joining +- Environment switching between staging and production +- Screen sharing from a livestream broadcaster +- Permission handling with a reusable `useMediaPermissions` hook + +### Running the example + +```bash +cd fishjam-chat +yarn install +npx expo prebuild +npx expo run:android # or run:ios +``` + +:::important +Before prebuilding, replace the bundle identifier `io.fishjam.example.fishjamchat` with your own in `app.json` (both the Android package name and iOS bundle identifier fields). +::: + +The app uses Expo Router with a bottom tab navigator. Each tab handles its own connection flow independently using `useConnection`. + +Browse the full source: [fishjam-chat on GitHub](https://github.com/fishjam-cloud/examples/tree/main/mobile/fishjam-chat) + +--- + +## Background Blur + +Demonstrates how to apply real-time background blur to a local camera feed using camera track middleware. Blur can be toggled on and off during an active call without reconnecting. + +**Demonstrates:** + +- Installing and using `@fishjam-cloud/react-native-webrtc-background-blur` +- Applying a video effect with `setCameraTrackMiddleware` +- Removing an effect by passing `null` to `setCameraTrackMiddleware` + +### Running the example + +Install the additional blur package first: + +```bash npm2yarn +npm install @fishjam-cloud/react-native-webrtc-background-blur +``` + +```bash +cd blur-example +yarn install +npx expo prebuild +npx expo run:android # or run:ios +``` + +:::info +Blur applies only to the local camera feed sent to other participants. Remote participants' video is unaffected. +::: + +The blur hook from `useBackgroundBlur` provides a `middleware` function that is passed directly to `setCameraTrackMiddleware`. Passing `null` disables the effect. + +Browse the full source: [blur-example on GitHub](https://github.com/fishjam-cloud/examples/tree/main/mobile/blur-example) + +--- + +## Text Chat + +Demonstrates peer-to-peer text messaging over WebRTC data channels — no separate messaging server required. Messages are sent directly between peers inside the Fishjam room. + +**Demonstrates:** + +- Initializing a data channel with `useDataChannel` +- Publishing messages with `publishData` +- Receiving incoming messages via the `onDataReceived` callback +- Encoding and decoding message payloads with JSON + +### Running the example + +```bash +cd text-chat +yarn install +npx expo prebuild +npx expo run:android # or run:ios +``` + +:::info +Data channels use `reliable` mode by default, which guarantees message delivery and ordering — similar to TCP. +::: + +Messages are `Uint8Array` payloads encoded and decoded with JSON and `TextEncoder`/`TextDecoder`. The `useDataChannel` hook wires together `publishData` for sending and `onDataReceived` for receiving. + +Browse the full source: [text-chat on GitHub](https://github.com/fishjam-cloud/examples/tree/main/mobile/text-chat) + +--- + +## Video Player + +A focused livestreaming example with two separate modes: a streamer who broadcasts video and audio, and a viewer who watches the stream. Unlike Fishjam Chat, this example uses a single `App.tsx` entry point with a simple role selector screen. + +**Demonstrates:** + +- Broadcasting with `useLivestreamStreamer` +- Watching a stream with `useLivestreamViewer` +- Initializing camera and microphone with `useInitializeDevices` +- Toggling camera and microphone tracks during an active stream + +### Running the example + +```bash +cd video-player +yarn install +npx expo prebuild +npx expo run:android # or run:ios +``` + +The streamer side uses `useLivestreamStreamer` and `useInitializeDevices` to start broadcasting, while the viewer side uses `useLivestreamViewer` to connect and render the incoming stream with `RTCView`. + +Browse the full source: [video-player on GitHub](https://github.com/fishjam-cloud/examples/tree/main/mobile/video-player) + +--- + +## Next steps + +- Follow the [React Native Quick Start](../tutorials/react-native-quick-start) if you haven't set up a project yet +- Learn how to [handle screen sharing](../how-to/client/screensharing) +- Learn how to [implement background streaming](../how-to/client/background-streaming) +- Learn how to [work with data channels](../how-to/client/data-channels) From f505c58560e43cea1d1f29a3f9d75ba3e2118513 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= Date: Mon, 16 Mar 2026 16:01:20 +0100 Subject: [PATCH 2/9] Add Backend examples docs --- docs/examples/backend.mdx | 79 +++++++++++++++++++++++++++++++++++++++ docs/examples/mobile.mdx | 2 +- 2 files changed, 80 insertions(+), 1 deletion(-) create mode 100644 docs/examples/backend.mdx diff --git a/docs/examples/backend.mdx b/docs/examples/backend.mdx new file mode 100644 index 00000000..9af2e118 --- /dev/null +++ b/docs/examples/backend.mdx @@ -0,0 +1,79 @@ +--- +type: explanation +sidebar_position: 2 +--- + +# Backend Examples + +_Runnable reference apps demonstrating headless Fishjam client usage in Node.js_ + +Each example is a standalone TypeScript application you can run locally and use as a starting point for your own project. +All examples use `@fishjam-cloud/ts-client` and require a Fishjam ID from the [Fishjam Dashboard](https://fishjam.io/app). + +| Example | What it demonstrates | +| ------------------------- | -------------------------------------------------------------------- | +| [Minimal](#minimal) | Headless TypeScript client — screen sharing and track event handling | +| [Simple App](#simple-app) | Full client test harness — all APIs, simulcast, device enumeration | + +--- + +## Minimal + +The simplest headless Fishjam client — connects to a room, adds a screen-share track, and handles incoming track events. No browser UI required. + +**Demonstrates:** + +- Instantiating the low-level TypeScript client with `FishjamClient` +- Connecting to a room with `connect()` +- Publishing a track with `addTrack()` +- Reacting to room events with `on('joined')`, `on('trackReady')`, and `on('trackRemoved')` listeners + +### Running the example + +```bash +cd minimal +yarn install +yarn dev +``` + +:::important +This example runs headless — no browser UI. It prompts for a peer token on startup and connects to a local Fishjam server at `ws://localhost:5002`. +::: + +`FishjamClient` is the low-level client that underpins the React and React Native SDKs. Using it directly gives you full control over the connection lifecycle and event stream without any framework dependency. + +Browse the full source: [minimal on GitHub](https://github.com/fishjam-cloud/examples/tree/main/backend/minimal) + +--- + +## Simple App + +A comprehensive test harness that exercises the full `FishjamClient` API surface — useful for validating server behaviour, exploring simulcast quality levels, and understanding the complete peer and track lifecycle. + +**Demonstrates:** + +- Full peer and track lifecycle events (`joined`, `peerJoined`, `peerLeft`, `trackAdded`, `trackReady`, `trackRemoved`) +- Adding and removing tracks with `addTrack` and `removeTrack` +- Controlling simulcast quality with `setTargetTrackEncoding` +- Enumerating available media devices +- Observing connection state transitions + +### Running the example + +```bash +cd simple-app +yarn install +yarn dev +``` + +`setTargetTrackEncoding` lets you request a specific simulcast layer (`low`, `medium`, or `high`) for a given remote track — useful for testing adaptive quality scenarios without a full UI. + +Browse the full source: [simple-app on GitHub](https://github.com/fishjam-cloud/examples/tree/main/backend/simple-app) + +--- + +## Next steps + +- Follow the [Backend Quick Start](../tutorials/backend-quick-start) if you haven't set up a project yet +- Learn about [room types](../explanation/room-types) to choose the right architecture +- See the [React Quick Start](../tutorials/react-quick-start) to pair a backend client with a browser UI diff --git a/docs/examples/mobile.mdx b/docs/examples/mobile.mdx index 9628cdfa..17d39ed1 100644 --- a/docs/examples/mobile.mdx +++ b/docs/examples/mobile.mdx @@ -3,7 +3,7 @@ type: explanation sidebar_position: 0 --- -# React Native Examples +# Mobile examples _Runnable reference apps demonstrating common Fishjam use cases in React Native_ From 3ee3c5610a3a064ab4cc280f6c805ac3ad6a4f1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= Date: Mon, 16 Mar 2026 16:01:52 +0100 Subject: [PATCH 3/9] Add Web example docs --- docs/examples/web.mdx | 184 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 184 insertions(+) create mode 100644 docs/examples/web.mdx diff --git a/docs/examples/web.mdx b/docs/examples/web.mdx new file mode 100644 index 00000000..9e75420a --- /dev/null +++ b/docs/examples/web.mdx @@ -0,0 +1,184 @@ +--- +type: explanation +sidebar_position: 1 +--- + +# Web Examples + +_Runnable reference apps demonstrating common Fishjam use cases in React_ + +Each example is a standalone React application you can run locally and use as a starting point for your own project. +All examples use `@fishjam-cloud/react-client` and require a Fishjam ID from the [Fishjam Dashboard](https://fishjam.io/app). + +| Example | What it demonstrates | +| ----------------------------------- | ---------------------------------------------------------------------- | +| [Minimal React](#minimal-react) | Simplest video call — join a room, camera, mic, screen share | +| [Audio Only](#audio-only) | Voice chat with no video and microphone device selection | +| [Text Chat](#text-chat) | Peer-to-peer messaging over WebRTC data channels | +| [Livestreaming](#livestreaming) | One broadcaster, many viewers with separate streamer/viewer UIs | +| [Minimal Smelter](#minimal-smelter) | Custom video overlays using the Smelter rendering engine | +| [Fishjam Chat](#fishjam-chat) | Full-featured conferencing app with background blur and screen sharing | + +--- + +## Minimal React + +The simplest way to get a video call working in the browser — joining a room, displaying your own camera feed, and showing remote participants. Start here if you're new to Fishjam on the web. + +**Demonstrates:** + +- Wrapping your app in `FishjamProvider` +- Connecting to a room with `useConnection` +- Accessing local and remote peers with `usePeers` +- Enabling camera and microphone with `useCamera` and `useMicrophone` +- Starting screen sharing with `useScreenShare` +- Rendering streams with `VideoPlayer` and `AudioPlayer` components + +### Running the example + +```bash +cd minimal-react +yarn install +yarn dev +``` + +The room component uses `usePeers` to retrieve all participants and renders their video streams using `VideoPlayer` and audio with `AudioPlayer`. + +Browse the full source: [minimal-react on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web/minimal-react) + +--- + +## Audio Only + +A voice-only room with no video — demonstrates how to initialize Fishjam with audio exclusively and let users pick their microphone device before joining. + +**Demonstrates:** + +- Audio-only initialization with `useInitializeDevices` (`enableVideo: false`) +- Microphone device selection from available inputs +- Rendering a peer list with audio playback via `AudioPlayer` + +### Running the example + +```bash +cd audio-only +yarn install +yarn dev +``` + +Setting `enableVideo: false` in `useInitializeDevices` skips camera initialization entirely, keeping the session lightweight for voice-only use cases. + +Browse the full source: [audio-only on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web/audio-only) + +--- + +## Text Chat + +Demonstrates peer-to-peer text messaging over WebRTC data channels — no separate messaging server required. Messages are sent directly between peers inside the Fishjam room. + +**Demonstrates:** + +- Initializing a data channel with `useDataChannel` +- Publishing messages with `publishData` +- Receiving incoming messages with `subscribeData` +- Encoding and decoding message payloads with `TextEncoder` and `TextDecoder` + +### Running the example + +```bash +cd text-chat +yarn install +yarn dev +``` + +Messages are `Uint8Array` payloads encoded and decoded with JSON and `TextEncoder`/`TextDecoder`. The `useDataChannel` hook wires together `publishData` for sending and `subscribeData` for receiving. + +Browse the full source: [text-chat on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web/text-chat) + +--- + +## Livestreaming + +A focused livestreaming example with two separate modes: a streamer who broadcasts video and audio, and a viewer who watches the stream. Token management is handled via the `useSandbox` hook. + +**Demonstrates:** + +- Broadcasting with `useLivestreamStreamer` +- Watching a stream with `useLivestreamViewer` +- Separate broadcaster and viewer UIs within one application +- Obtaining peer tokens with `useSandbox` + +### Running the example + +```bash +cd livestreaming +yarn install +yarn dev +``` + +The streamer side uses `useLivestreamStreamer` to publish camera and audio tracks, while the viewer side uses `useLivestreamViewer` to connect and render the incoming stream. + +Browse the full source: [livestreaming on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web/livestreaming) + +--- + +## Minimal Smelter + +Shows how to apply custom video overlays to a camera feed using the Smelter rendering engine — a text label composited directly onto the outgoing video stream. + +**Demonstrates:** + +- Creating a custom video source with `useCustomSource` +- Initializing the Smelter engine with `useSmelter` +- Registering inputs and outputs with `registerInput`/`registerOutput` +- Compositing a text overlay on top of a live camera feed + +### Running the example + +```bash +cd minimal-smelter +yarn install +yarn dev +``` + +:::important +Smelter requires WebAssembly support — use a modern browser. +::: + +The `useSmelter` hook manages the Smelter engine lifecycle. `registerInput` connects the local camera feed and `registerOutput` routes the composited result back into Fishjam as a custom track. + +Browse the full source: [minimal-smelter on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web/minimal-smelter) + +--- + +## Fishjam Chat + +A full-featured conferencing application covering camera, microphone, screen sharing, background blur via a camera track middleware, and a settings panel for device selection. + +**Demonstrates:** + +- Connecting to a room with `useConnection` +- Managing camera and microphone with `useCamera` and `useMicrophone` +- Screen sharing with `useScreenShare` +- Applying real-time background blur using a MediaPipe camera track middleware +- Device selection in a settings panel + +### Running the example + +```bash +cd fishjam-chat +yarn install +yarn dev +``` + +Background blur is applied as a camera track middleware that processes each video frame with MediaPipe before the track is sent to other participants. Removing the middleware disables the effect without reconnecting. + +Browse the full source: [fishjam-chat on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web/fishjam-chat) + +--- + +## Next steps + +- Follow the [React Quick Start](../tutorials/react-quick-start) if you haven't set up a project yet +- Learn how to [work with data channels](../how-to/client/data-channels) +- Learn how to [implement screen sharing](../how-to/client/screensharing) From ad12ec4db89931ad56eb5a1731851f906777ed84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= Date: Tue, 17 Mar 2026 12:51:29 +0100 Subject: [PATCH 4/9] Add Examples on main page --- docs/index.mdx | 29 ++++++++++++++++++- docs/tutorials/backend-quick-start.mdx | 1 + docs/tutorials/react-native-quick-start.mdx | 1 + docs/tutorials/react-quick-start.mdx | 1 + .../QuickNavigation/index.module.css | 9 ++++++ src/components/QuickNavigation/index.tsx | 4 +-- src/content/cardItems.ts | 5 ++++ 7 files changed, 47 insertions(+), 3 deletions(-) diff --git a/docs/index.mdx b/docs/index.mdx index 460ff63b..b75b4bdc 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -12,7 +12,7 @@ import { useVersionedLink } from "@site/src/hooks/useVersionedLink"; Welcome to the Fishjam documentation! Learn how to create live video and audio streaming applications with Fishjam, the all-in-one multimedia streaming toolkit. -To get started, we recommend you check out one of the two guides below: +To get started, check out one of our guides or browse the examples below:

@@ -98,6 +98,33 @@ To get started, we recommend you check out one of the two guides below: +## Examples + +
+
+

+ Ready-to-run example applications for web, mobile, and backend. Most + useful when you want to see Fishjam in action or use a project as a + starting point. +

+ +
+
+
    +
  • [Web Examples](./examples/web.mdx)
    • +
  • [Mobile Examples](./examples/mobile.mdx)
    • +
  • [Backend Examples](./examples/backend.mdx)
    • +
+ +
+
+ ## API Reference
{props.items.map((item, index) => ( -
+
{item.icon} {item.title} diff --git a/src/content/cardItems.ts b/src/content/cardItems.ts index 4d97cb82..00969e9b 100644 --- a/src/content/cardItems.ts +++ b/src/content/cardItems.ts @@ -11,4 +11,9 @@ export const items: CardItem[] = [ href: "tutorials/react-quick-start", icon: "💻", }, + { + title: "Examples", + href: "examples", + icon: "🧪", + }, ]; From e1b1fafdbedf8358f8276ae1c9a303a5800768bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= Date: Tue, 17 Mar 2026 14:55:41 +0100 Subject: [PATCH 5/9] Change behaviour to behavior --- docs/examples/backend.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/examples/backend.mdx b/docs/examples/backend.mdx index 9af2e118..80833cec 100644 --- a/docs/examples/backend.mdx +++ b/docs/examples/backend.mdx @@ -48,7 +48,7 @@ Browse the full source: [minimal on GitHub](https://github.com/fishjam-cloud/exa ## Simple App -A comprehensive test harness that exercises the full `FishjamClient` API surface — useful for validating server behaviour, exploring simulcast quality levels, and understanding the complete peer and track lifecycle. +A comprehensive test harness that exercises the full `FishjamClient` API surface — useful for validating server behavior, exploring simulcast quality levels, and understanding the complete peer and track lifecycle. **Demonstrates:** From 8868754287d19956343d3d2f6bbf2603a5065b1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= Date: Tue, 17 Mar 2026 15:01:52 +0100 Subject: [PATCH 6/9] Fix formatting --- src/components/QuickNavigation/index.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/QuickNavigation/index.tsx b/src/components/QuickNavigation/index.tsx index 6698874c..c163021b 100644 --- a/src/components/QuickNavigation/index.tsx +++ b/src/components/QuickNavigation/index.tsx @@ -10,16 +10,15 @@ export default function QuickNavigation(props: { items: CardItem[] }) { return (
{props.items.map((item, index) => ( -
+
- + {item.icon} {item.title} From 76351ff916a5957f44ddb8fc0bfdc6104fae287d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= Date: Thu, 19 Mar 2026 13:21:38 +0100 Subject: [PATCH 7/9] Remove backend examples section and added info how to obtain peerToken --- docs/examples/backend.mdx | 79 ------------------- .../examples/{mobile.mdx => react-native.mdx} | 2 +- docs/examples/{web.mdx => react.mdx} | 6 +- docs/index.mdx | 10 +-- docs/tutorials/backend-quick-start.mdx | 1 - docs/tutorials/react-native-quick-start.mdx | 2 +- docs/tutorials/react-quick-start.mdx | 2 +- 7 files changed, 12 insertions(+), 90 deletions(-) delete mode 100644 docs/examples/backend.mdx rename docs/examples/{mobile.mdx => react-native.mdx} (99%) rename docs/examples/{web.mdx => react.mdx} (95%) diff --git a/docs/examples/backend.mdx b/docs/examples/backend.mdx deleted file mode 100644 index 80833cec..00000000 --- a/docs/examples/backend.mdx +++ /dev/null @@ -1,79 +0,0 @@ ---- -type: explanation -sidebar_position: 2 ---- - -# Backend Examples - -_Runnable reference apps demonstrating headless Fishjam client usage in Node.js_ - -Each example is a standalone TypeScript application you can run locally and use as a starting point for your own project. -All examples use `@fishjam-cloud/ts-client` and require a Fishjam ID from the [Fishjam Dashboard](https://fishjam.io/app). - -| Example | What it demonstrates | -| ------------------------- | -------------------------------------------------------------------- | -| [Minimal](#minimal) | Headless TypeScript client — screen sharing and track event handling | -| [Simple App](#simple-app) | Full client test harness — all APIs, simulcast, device enumeration | - ---- - -## Minimal - -The simplest headless Fishjam client — connects to a room, adds a screen-share track, and handles incoming track events. No browser UI required. - -**Demonstrates:** - -- Instantiating the low-level TypeScript client with `FishjamClient` -- Connecting to a room with `connect()` -- Publishing a track with `addTrack()` -- Reacting to room events with `on('joined')`, `on('trackReady')`, and `on('trackRemoved')` listeners - -### Running the example - -```bash -cd minimal -yarn install -yarn dev -``` - -:::important -This example runs headless — no browser UI. It prompts for a peer token on startup and connects to a local Fishjam server at `ws://localhost:5002`. -::: - -`FishjamClient` is the low-level client that underpins the React and React Native SDKs. Using it directly gives you full control over the connection lifecycle and event stream without any framework dependency. - -Browse the full source: [minimal on GitHub](https://github.com/fishjam-cloud/examples/tree/main/backend/minimal) - ---- - -## Simple App - -A comprehensive test harness that exercises the full `FishjamClient` API surface — useful for validating server behavior, exploring simulcast quality levels, and understanding the complete peer and track lifecycle. - -**Demonstrates:** - -- Full peer and track lifecycle events (`joined`, `peerJoined`, `peerLeft`, `trackAdded`, `trackReady`, `trackRemoved`) -- Adding and removing tracks with `addTrack` and `removeTrack` -- Controlling simulcast quality with `setTargetTrackEncoding` -- Enumerating available media devices -- Observing connection state transitions - -### Running the example - -```bash -cd simple-app -yarn install -yarn dev -``` - -`setTargetTrackEncoding` lets you request a specific simulcast layer (`low`, `medium`, or `high`) for a given remote track — useful for testing adaptive quality scenarios without a full UI. - -Browse the full source: [simple-app on GitHub](https://github.com/fishjam-cloud/examples/tree/main/backend/simple-app) - ---- - -## Next steps - -- Follow the [Backend Quick Start](../tutorials/backend-quick-start) if you haven't set up a project yet -- Learn about [room types](../explanation/room-types) to choose the right architecture -- See the [React Quick Start](../tutorials/react-quick-start) to pair a backend client with a browser UI diff --git a/docs/examples/mobile.mdx b/docs/examples/react-native.mdx similarity index 99% rename from docs/examples/mobile.mdx rename to docs/examples/react-native.mdx index 17d39ed1..9628cdfa 100644 --- a/docs/examples/mobile.mdx +++ b/docs/examples/react-native.mdx @@ -3,7 +3,7 @@ type: explanation sidebar_position: 0 --- -# Mobile examples +# React Native Examples _Runnable reference apps demonstrating common Fishjam use cases in React Native_ diff --git a/docs/examples/web.mdx b/docs/examples/react.mdx similarity index 95% rename from docs/examples/web.mdx rename to docs/examples/react.mdx index 9e75420a..11b7ec96 100644 --- a/docs/examples/web.mdx +++ b/docs/examples/react.mdx @@ -3,7 +3,7 @@ type: explanation sidebar_position: 1 --- -# Web Examples +# React Examples _Runnable reference apps demonstrating common Fishjam use cases in React_ @@ -44,6 +44,10 @@ yarn dev The room component uses `usePeers` to retrieve all participants and renders their video streams using `VideoPlayer` and audio with `AudioPlayer`. +:::note +This example requires a **peer token** to connect. You need to obtain one yourself — either via the [Sandbox API](../how-to/features/sandbox-api-testing#step-2-create-a-room-and-get-peer-tokens) for quick testing, or by setting up your own backend with the [Fishjam Server SDK](../tutorials/backend-quick-start). +::: + Browse the full source: [minimal-react on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web/minimal-react) --- diff --git a/docs/index.mdx b/docs/index.mdx index b75b4bdc..a9a27d35 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -109,17 +109,15 @@ To get started, check out one of our guides or browse the examples below: >

- Ready-to-run example applications for web, mobile, and backend. Most - useful when you want to see Fishjam in action or use a project as a - starting point. + Ready-to-run example applications for web and mobile. Most useful when + you want to see Fishjam in action or use a project as a starting point.

    -
  • [Web Examples](./examples/web.mdx)
    • -
  • [Mobile Examples](./examples/mobile.mdx)
    • -
  • [Backend Examples](./examples/backend.mdx)
    • +
  • [React Examples](./examples/react.mdx)
    • +
  • [React Native Examples](./examples/react-native.mdx)
diff --git a/docs/tutorials/backend-quick-start.mdx b/docs/tutorials/backend-quick-start.mdx index 4558374e..0087c9a2 100644 --- a/docs/tutorials/backend-quick-start.mdx +++ b/docs/tutorials/backend-quick-start.mdx @@ -548,7 +548,6 @@ Now that you have a working backend, explore these guides: - [How to handle webhooks and events](../how-to/backend/server-setup) - [How to implement a FastAPI backend](../how-to/backend/fastapi-example) - [How to implement a Fastify backend](../how-to/backend/fastify-example) -- [Explore backend examples](../examples/backend) Or learn more about Fishjam concepts: diff --git a/docs/tutorials/react-native-quick-start.mdx b/docs/tutorials/react-native-quick-start.mdx index 1529937b..c5909cbc 100644 --- a/docs/tutorials/react-native-quick-start.mdx +++ b/docs/tutorials/react-native-quick-start.mdx @@ -437,7 +437,7 @@ Now that you have a basic app working, explore these how-to guides: - [How to implement background streaming](../how-to/client/background-streaming) - [How to handle reconnections](../how-to/client/reconnection-handling) - [How to work with metadata](../how-to/client/metadata) -- [Explore mobile examples](../examples/mobile) +- [Explore React Native examples](../examples/react-native) Or learn more about Fishjam concepts: diff --git a/docs/tutorials/react-quick-start.mdx b/docs/tutorials/react-quick-start.mdx index efb79147..9f1330bd 100644 --- a/docs/tutorials/react-quick-start.mdx +++ b/docs/tutorials/react-quick-start.mdx @@ -278,7 +278,7 @@ Now that you have a basic app working, explore these how-to guides: - [How to implement livestreaming](../tutorials/livestreaming) - [How to work with stream middleware](../how-to/client/stream-middleware) - [How to handle custom sources](../how-to/client/custom-sources) -- [Explore web examples](../examples/web) +- [Explore React examples](../examples/react) Or learn more about Fishjam concepts: From 2ec9b954c736840782ff6003e678c6ab08a42686 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= Date: Thu, 19 Mar 2026 13:33:11 +0100 Subject: [PATCH 8/9] Fix links --- docs/examples/react-native.mdx | 10 +++++----- docs/examples/react.mdx | 12 ++++++------ 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/examples/react-native.mdx b/docs/examples/react-native.mdx index 9628cdfa..a74dd90b 100644 --- a/docs/examples/react-native.mdx +++ b/docs/examples/react-native.mdx @@ -46,7 +46,7 @@ This won't work on the iOS Simulator — the Simulator can't access the camera. The room screen uses `usePeers` to retrieve all participants and renders their camera streams in a two-column grid with `RTCView`. -Browse the full source: [minimal-react-native on GitHub](https://github.com/fishjam-cloud/examples/tree/main/mobile/minimal-react-native) +Browse the full source: [minimal-react-native on GitHub](https://github.com/fishjam-cloud/examples/tree/main/mobile-react-native/minimal-react-native) --- @@ -77,7 +77,7 @@ Before prebuilding, replace the bundle identifier `io.fishjam.example.fishjamcha The app uses Expo Router with a bottom tab navigator. Each tab handles its own connection flow independently using `useConnection`. -Browse the full source: [fishjam-chat on GitHub](https://github.com/fishjam-cloud/examples/tree/main/mobile/fishjam-chat) +Browse the full source: [fishjam-chat on GitHub](https://github.com/fishjam-cloud/examples/tree/main/mobile-react-native/fishjam-chat) --- @@ -112,7 +112,7 @@ Blur applies only to the local camera feed sent to other participants. Remote pa The blur hook from `useBackgroundBlur` provides a `middleware` function that is passed directly to `setCameraTrackMiddleware`. Passing `null` disables the effect. -Browse the full source: [blur-example on GitHub](https://github.com/fishjam-cloud/examples/tree/main/mobile/blur-example) +Browse the full source: [blur-example on GitHub](https://github.com/fishjam-cloud/examples/tree/main/mobile-react-native/blur-example) --- @@ -142,7 +142,7 @@ Data channels use `reliable` mode by default, which guarantees message delivery Messages are `Uint8Array` payloads encoded and decoded with JSON and `TextEncoder`/`TextDecoder`. The `useDataChannel` hook wires together `publishData` for sending and `onDataReceived` for receiving. -Browse the full source: [text-chat on GitHub](https://github.com/fishjam-cloud/examples/tree/main/mobile/text-chat) +Browse the full source: [text-chat on GitHub](https://github.com/fishjam-cloud/examples/tree/main/mobile-react-native/text-chat) --- @@ -168,7 +168,7 @@ npx expo run:android # or run:ios The streamer side uses `useLivestreamStreamer` and `useInitializeDevices` to start broadcasting, while the viewer side uses `useLivestreamViewer` to connect and render the incoming stream with `RTCView`. -Browse the full source: [video-player on GitHub](https://github.com/fishjam-cloud/examples/tree/main/mobile/video-player) +Browse the full source: [video-player on GitHub](https://github.com/fishjam-cloud/examples/tree/main/mobile-react-native/video-player) --- diff --git a/docs/examples/react.mdx b/docs/examples/react.mdx index 11b7ec96..9685faaf 100644 --- a/docs/examples/react.mdx +++ b/docs/examples/react.mdx @@ -48,7 +48,7 @@ The room component uses `usePeers` to retrieve all participants and renders thei This example requires a **peer token** to connect. You need to obtain one yourself — either via the [Sandbox API](../how-to/features/sandbox-api-testing#step-2-create-a-room-and-get-peer-tokens) for quick testing, or by setting up your own backend with the [Fishjam Server SDK](../tutorials/backend-quick-start). ::: -Browse the full source: [minimal-react on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web/minimal-react) +Browse the full source: [minimal-react on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web-react/minimal-react) --- @@ -72,7 +72,7 @@ yarn dev Setting `enableVideo: false` in `useInitializeDevices` skips camera initialization entirely, keeping the session lightweight for voice-only use cases. -Browse the full source: [audio-only on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web/audio-only) +Browse the full source: [audio-only on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web-react/audio-only) --- @@ -97,7 +97,7 @@ yarn dev Messages are `Uint8Array` payloads encoded and decoded with JSON and `TextEncoder`/`TextDecoder`. The `useDataChannel` hook wires together `publishData` for sending and `subscribeData` for receiving. -Browse the full source: [text-chat on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web/text-chat) +Browse the full source: [text-chat on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web-react/text-chat) --- @@ -122,7 +122,7 @@ yarn dev The streamer side uses `useLivestreamStreamer` to publish camera and audio tracks, while the viewer side uses `useLivestreamViewer` to connect and render the incoming stream. -Browse the full source: [livestreaming on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web/livestreaming) +Browse the full source: [livestreaming on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web-react/livestreaming) --- @@ -151,7 +151,7 @@ Smelter requires WebAssembly support — use a modern browser. The `useSmelter` hook manages the Smelter engine lifecycle. `registerInput` connects the local camera feed and `registerOutput` routes the composited result back into Fishjam as a custom track. -Browse the full source: [minimal-smelter on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web/minimal-smelter) +Browse the full source: [minimal-smelter on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web-react/minimal-smelter) --- @@ -177,7 +177,7 @@ yarn dev Background blur is applied as a camera track middleware that processes each video frame with MediaPipe before the track is sent to other participants. Removing the middleware disables the effect without reconnecting. -Browse the full source: [fishjam-chat on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web/fishjam-chat) +Browse the full source: [fishjam-chat on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web-react/fishjam-chat) --- From c10c6cbed378b0736493b0bb2434f083fa2d2458 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= Date: Thu, 19 Mar 2026 14:44:36 +0100 Subject: [PATCH 9/9] Add information about requiring peerToken for smelter example --- docs/examples/react.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/examples/react.mdx b/docs/examples/react.mdx index 9685faaf..d7e5f3c1 100644 --- a/docs/examples/react.mdx +++ b/docs/examples/react.mdx @@ -151,6 +151,10 @@ Smelter requires WebAssembly support — use a modern browser. The `useSmelter` hook manages the Smelter engine lifecycle. `registerInput` connects the local camera feed and `registerOutput` routes the composited result back into Fishjam as a custom track. +:::note +This example requires a **peer token** to connect. You need to obtain one yourself — either via the [Sandbox API](../how-to/features/sandbox-api-testing#step-2-create-a-room-and-get-peer-tokens) for quick testing, or by setting up your own backend with the [Fishjam Server SDK](../tutorials/backend-quick-start). +::: + Browse the full source: [minimal-smelter on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web-react/minimal-smelter) ---