Skip to content

Commit d20cbff

Browse files
NathanGuilhotNathanGuilhot
authored
Fix: Broken link: "Examples" on homepage leads to 404 (#241)
Hi there! ## Issue: The "Examples" card on https://fishjam.swmansion.com/docs links to /docs/examples, which returns a 404. The page works fine at /docs/next/examples ## The fix: Copy docs/examples/ into versioned_docs/version-0.25.0/ The examples seem to be about the 0.25.0 version; if not, feel free to close this PR and remove the link from the homepage.
1 parent b474fc6 commit d20cbff

3 files changed

Lines changed: 382 additions & 0 deletions

File tree

‎versioned_docs/version-0.25.0/examples/_category_.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"label": "Examples",
3+
"position": 6,
4+
"link": {
5+
"type": "generated-index",
6+
"title": "Examples",
7+
"description": "Real-world code examples and use cases.",
8+
"slug": "/examples"
9+
}
10+
}

‎versioned_docs/version-0.25.0/examples/react-native.mdx‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
---
2+
type: explanation
3+
sidebar_position: 0
4+
---
5+
6+
# React Native Examples
7+
8+
_Runnable reference apps demonstrating common Fishjam use cases in React Native_
9+
10+
Each example is a standalone Expo application you can run locally and use as a starting point for your own project.
11+
All examples use `@fishjam-cloud/react-native-client` and require a Fishjam ID from the [Fishjam Dashboard](https://fishjam.io/app).
12+
13+
| Example | What it demonstrates |
14+
| ----------------------------------------- | ------------------------------------------------------------------ |
15+
| [Minimal Video Room](#minimal-video-room) | Simplest possible video call — the baseline for all other examples |
16+
| [Fishjam Chat](#fishjam-chat) | Full-featured video conferencing and livestreaming app |
17+
| [Background Blur](#background-blur) | Applying real-time video effects via camera track middleware |
18+
| [Text Chat](#text-chat) | Peer-to-peer text messaging with WebRTC data channels |
19+
| [Video Player](#video-player) | Livestream broadcaster and viewer with separate UI modes |
20+
21+
---
22+
23+
## Minimal Video Room
24+
25+
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.
26+
27+
**Demonstrates:**
28+
29+
- Wrapping your app in `FishjamProvider`
30+
- Connecting to a room with `useConnection`
31+
- Accessing local and remote peers with `usePeers`
32+
- Rendering video streams with `RTCView`
33+
34+
### Running the example
35+
36+
```bash
37+
cd minimal-react-native
38+
yarn install
39+
npx expo prebuild
40+
npx expo run:android # or run:ios
41+
```
42+
43+
:::important
44+
This won't work on the iOS Simulator — the Simulator can't access the camera. Test on a real device.
45+
:::
46+
47+
The room screen uses `usePeers` to retrieve all participants and renders their camera streams in a two-column grid with `RTCView`.
48+
49+
Browse the full source: [minimal-react-native on GitHub](https://github.com/fishjam-cloud/examples/tree/main/mobile-react-native/minimal-react-native)
50+
51+
---
52+
53+
## Fishjam Chat
54+
55+
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.
56+
57+
**Demonstrates:**
58+
59+
- Tab-based navigation between VideoRoom and Livestream features
60+
- Pre-call room preview before joining
61+
- Environment switching between staging and production
62+
- Screen sharing from a livestream broadcaster
63+
- Permission handling with a reusable `useMediaPermissions` hook
64+
65+
### Running the example
66+
67+
```bash
68+
cd fishjam-chat
69+
yarn install
70+
npx expo prebuild
71+
npx expo run:android # or run:ios
72+
```
73+
74+
:::important
75+
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).
76+
:::
77+
78+
The app uses Expo Router with a bottom tab navigator. Each tab handles its own connection flow independently using `useConnection`.
79+
80+
Browse the full source: [fishjam-chat on GitHub](https://github.com/fishjam-cloud/examples/tree/main/mobile-react-native/fishjam-chat)
81+
82+
---
83+
84+
## Background Blur
85+
86+
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.
87+
88+
**Demonstrates:**
89+
90+
- Installing and using `@fishjam-cloud/react-native-webrtc-background-blur`
91+
- Applying a video effect with `setCameraTrackMiddleware`
92+
- Removing an effect by passing `null` to `setCameraTrackMiddleware`
93+
94+
### Running the example
95+
96+
Install the additional blur package first:
97+
98+
```bash npm2yarn
99+
npm install @fishjam-cloud/react-native-webrtc-background-blur
100+
```
101+
102+
```bash
103+
cd blur-example
104+
yarn install
105+
npx expo prebuild
106+
npx expo run:android # or run:ios
107+
```
108+
109+
:::info
110+
Blur applies only to the local camera feed sent to other participants. Remote participants' video is unaffected.
111+
:::
112+
113+
The blur hook from `useBackgroundBlur` provides a `middleware` function that is passed directly to `setCameraTrackMiddleware`. Passing `null` disables the effect.
114+
115+
Browse the full source: [blur-example on GitHub](https://github.com/fishjam-cloud/examples/tree/main/mobile-react-native/blur-example)
116+
117+
---
118+
119+
## Text Chat
120+
121+
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.
122+
123+
**Demonstrates:**
124+
125+
- Initializing a data channel with `useDataChannel`
126+
- Publishing messages with `publishData`
127+
- Receiving incoming messages via the `onDataReceived` callback
128+
- Encoding and decoding message payloads with JSON
129+
130+
### Running the example
131+
132+
```bash
133+
cd text-chat
134+
yarn install
135+
npx expo prebuild
136+
npx expo run:android # or run:ios
137+
```
138+
139+
:::info
140+
Data channels use `reliable` mode by default, which guarantees message delivery and ordering — similar to TCP.
141+
:::
142+
143+
Messages are `Uint8Array` payloads encoded and decoded with JSON and `TextEncoder`/`TextDecoder`. The `useDataChannel` hook wires together `publishData` for sending and `onDataReceived` for receiving.
144+
145+
Browse the full source: [text-chat on GitHub](https://github.com/fishjam-cloud/examples/tree/main/mobile-react-native/text-chat)
146+
147+
---
148+
149+
## Video Player
150+
151+
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.
152+
153+
**Demonstrates:**
154+
155+
- Broadcasting with `useLivestreamStreamer`
156+
- Watching a stream with `useLivestreamViewer`
157+
- Initializing camera and microphone with `useInitializeDevices`
158+
- Toggling camera and microphone tracks during an active stream
159+
160+
### Running the example
161+
162+
```bash
163+
cd video-player
164+
yarn install
165+
npx expo prebuild
166+
npx expo run:android # or run:ios
167+
```
168+
169+
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`.
170+
171+
Browse the full source: [video-player on GitHub](https://github.com/fishjam-cloud/examples/tree/main/mobile-react-native/video-player)
172+
173+
---
174+
175+
## Next steps
176+
177+
- Follow the [React Native Quick Start](../tutorials/react-native-quick-start) if you haven't set up a project yet
178+
- Learn how to [handle screen sharing](../how-to/client/screensharing)
179+
- Learn how to [implement background streaming](../how-to/client/background-streaming)
180+
- Learn how to [work with data channels](../how-to/client/data-channels)

‎versioned_docs/version-0.25.0/examples/react.mdx‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
---
2+
type: explanation
3+
sidebar_position: 1
4+
---
5+
6+
# React Examples
7+
8+
_Runnable reference apps demonstrating common Fishjam use cases in React_
9+
10+
Each example is a standalone React application you can run locally and use as a starting point for your own project.
11+
All examples use `@fishjam-cloud/react-client` and require a Fishjam ID from the [Fishjam Dashboard](https://fishjam.io/app).
12+
13+
| Example | What it demonstrates |
14+
| ----------------------------------- | ---------------------------------------------------------------------- |
15+
| [Minimal React](#minimal-react) | Simplest video call — join a room, camera, mic, screen share |
16+
| [Audio Only](#audio-only) | Voice chat with no video and microphone device selection |
17+
| [Text Chat](#text-chat) | Peer-to-peer messaging over WebRTC data channels |
18+
| [Livestreaming](#livestreaming) | One broadcaster, many viewers with separate streamer/viewer UIs |
19+
| [Minimal Smelter](#minimal-smelter) | Custom video overlays using the Smelter rendering engine |
20+
| [Fishjam Chat](#fishjam-chat) | Full-featured conferencing app with background blur and screen sharing |
21+
22+
---
23+
24+
## Minimal React
25+
26+
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.
27+
28+
**Demonstrates:**
29+
30+
- Wrapping your app in `FishjamProvider`
31+
- Connecting to a room with `useConnection`
32+
- Accessing local and remote peers with `usePeers`
33+
- Enabling camera and microphone with `useCamera` and `useMicrophone`
34+
- Starting screen sharing with `useScreenShare`
35+
- Rendering streams with `VideoPlayer` and `AudioPlayer` components
36+
37+
### Running the example
38+
39+
```bash
40+
cd minimal-react
41+
yarn install
42+
yarn dev
43+
```
44+
45+
The room component uses `usePeers` to retrieve all participants and renders their video streams using `VideoPlayer` and audio with `AudioPlayer`.
46+
47+
:::note
48+
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).
49+
:::
50+
51+
Browse the full source: [minimal-react on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web-react/minimal-react)
52+
53+
---
54+
55+
## Audio Only
56+
57+
A voice-only room with no video — demonstrates how to initialize Fishjam with audio exclusively and let users pick their microphone device before joining.
58+
59+
**Demonstrates:**
60+
61+
- Audio-only initialization with `useInitializeDevices` (`enableVideo: false`)
62+
- Microphone device selection from available inputs
63+
- Rendering a peer list with audio playback via `AudioPlayer`
64+
65+
### Running the example
66+
67+
```bash
68+
cd audio-only
69+
yarn install
70+
yarn dev
71+
```
72+
73+
Setting `enableVideo: false` in `useInitializeDevices` skips camera initialization entirely, keeping the session lightweight for voice-only use cases.
74+
75+
Browse the full source: [audio-only on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web-react/audio-only)
76+
77+
---
78+
79+
## Text Chat
80+
81+
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.
82+
83+
**Demonstrates:**
84+
85+
- Initializing a data channel with `useDataChannel`
86+
- Publishing messages with `publishData`
87+
- Receiving incoming messages with `subscribeData`
88+
- Encoding and decoding message payloads with `TextEncoder` and `TextDecoder`
89+
90+
### Running the example
91+
92+
```bash
93+
cd text-chat
94+
yarn install
95+
yarn dev
96+
```
97+
98+
Messages are `Uint8Array` payloads encoded and decoded with JSON and `TextEncoder`/`TextDecoder`. The `useDataChannel` hook wires together `publishData` for sending and `subscribeData` for receiving.
99+
100+
Browse the full source: [text-chat on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web-react/text-chat)
101+
102+
---
103+
104+
## Livestreaming
105+
106+
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.
107+
108+
**Demonstrates:**
109+
110+
- Broadcasting with `useLivestreamStreamer`
111+
- Watching a stream with `useLivestreamViewer`
112+
- Separate broadcaster and viewer UIs within one application
113+
- Obtaining peer tokens with `useSandbox`
114+
115+
### Running the example
116+
117+
```bash
118+
cd livestreaming
119+
yarn install
120+
yarn dev
121+
```
122+
123+
The streamer side uses `useLivestreamStreamer` to publish camera and audio tracks, while the viewer side uses `useLivestreamViewer` to connect and render the incoming stream.
124+
125+
Browse the full source: [livestreaming on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web-react/livestreaming)
126+
127+
---
128+
129+
## Minimal Smelter
130+
131+
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.
132+
133+
**Demonstrates:**
134+
135+
- Creating a custom video source with `useCustomSource`
136+
- Initializing the Smelter engine with `useSmelter`
137+
- Registering inputs and outputs with `registerInput`/`registerOutput`
138+
- Compositing a text overlay on top of a live camera feed
139+
140+
### Running the example
141+
142+
```bash
143+
cd minimal-smelter
144+
yarn install
145+
yarn dev
146+
```
147+
148+
:::important
149+
Smelter requires WebAssembly support — use a modern browser.
150+
:::
151+
152+
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.
153+
154+
:::note
155+
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).
156+
:::
157+
158+
Browse the full source: [minimal-smelter on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web-react/minimal-smelter)
159+
160+
---
161+
162+
## Fishjam Chat
163+
164+
A full-featured conferencing application covering camera, microphone, screen sharing, background blur via a camera track middleware, and a settings panel for device selection.
165+
166+
**Demonstrates:**
167+
168+
- Connecting to a room with `useConnection`
169+
- Managing camera and microphone with `useCamera` and `useMicrophone`
170+
- Screen sharing with `useScreenShare`
171+
- Applying real-time background blur using a MediaPipe camera track middleware
172+
- Device selection in a settings panel
173+
174+
### Running the example
175+
176+
```bash
177+
cd fishjam-chat
178+
yarn install
179+
yarn dev
180+
```
181+
182+
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.
183+
184+
Browse the full source: [fishjam-chat on GitHub](https://github.com/fishjam-cloud/examples/tree/main/web-react/fishjam-chat)
185+
186+
---
187+
188+
## Next steps
189+
190+
- Follow the [React Quick Start](../tutorials/react-quick-start) if you haven't set up a project yet
191+
- Learn how to [work with data channels](../how-to/client/data-channels)
192+
- Learn how to [implement screen sharing](../how-to/client/screensharing)

0 commit comments

Comments
 (0)