Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion api/fishjam-server
2 changes: 1 addition & 1 deletion api/room-manager
2 changes: 1 addition & 1 deletion docs/examples/react-native.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -177,4 +177,4 @@ Browse the full source: [video-player on GitHub](https://github.com/fishjam-clou
- 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)
- Learn how to [work with data channels](../explanation/data-channels)
2 changes: 1 addition & 1 deletion docs/examples/react.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -188,5 +188,5 @@ Browse the full source: [fishjam-chat on GitHub](https://github.com/fishjam-clou
## 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 [work with data channels](../explanation/data-channels)
- Learn how to [implement screen sharing](../how-to/client/screensharing)
6 changes: 3 additions & 3 deletions docs/how-to/client/background-streaming.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ On iOS, background calls are achieved through CallKit integration. You can use t

### Manual CallKit Management

Use the [`useCallKit`](../../api/mobile/variables/useCallKit) hook for fine-grained control over CallKit sessions:
Use the [`useCallKit`](../../api/mobile/functions/useCallKit) hook for fine-grained control over CallKit sessions:

```tsx
import { useCallKit } from "@fishjam-cloud/react-native-client";
Expand All @@ -165,7 +165,7 @@ const handleLeaveRoom = async () => {

### Automatic CallKit Management

Use the [`useCallKitService`](../../api/mobile/variables/useCallKitService) hook for automatic session lifecycle management:
Use the [`useCallKitService`](../../api/mobile/functions/useCallKitService) hook for automatic session lifecycle management:

```tsx
import React from "react";
Expand All @@ -186,7 +186,7 @@ function CallScreen({ username }: { username: string }) {

### Listening to CallKit Events

Use the [`useCallKitEvent`](../../api/mobile/variables/useCallKitEvent) hook to respond to user interactions with the native CallKit interface:
Use the [`useCallKitEvent`](../../api/mobile/functions/useCallKitEvent) hook to respond to user interactions with the native CallKit interface:

```tsx
import {
Expand Down
1 change: 1 addition & 0 deletions docs/how-to/client/list-other-peers.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export function Component() {
<TabItem value="mobile" label="React Native (Mobile)">

```tsx
// @errors: 2739
import React from "react";
import { View, Text } from "react-native";
import { usePeers, RTCView } from "@fishjam-cloud/react-native-client";
Expand Down
2 changes: 1 addition & 1 deletion docs/how-to/client/managing-devices.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ Use the [`toggleMicrophone()`](../../api/web/functions/useMicrophone#togglemicro
</TabItem>
<TabItem value="mobile" label="React Native (Mobile)">

You can use [`toggleMicrophone`](../../api/mobile/variables/useMicrophone) to toggle the microphone state, or use [`startMicrophone`](../../api/mobile/variables/useMicrophone) and [`stopMicrophone`](../../api/mobile/variables/useMicrophone) for more explicit control.
You can use [`toggleMicrophone`](../../api/mobile/functions/useMicrophone) to toggle the microphone state, or use [`startMicrophone`](../../api/mobile/functions/useMicrophone) and [`stopMicrophone`](../../api/mobile/functions/useMicrophone) for more explicit control.

#### Using toggleMicrophone

Expand Down
2 changes: 2 additions & 0 deletions docs/how-to/client/migration-guide.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@ const localTrack = localPeer?.tracks.find((t) => t.type === "Video");
### After

```tsx
// @errors: 2739
import React from "react";
// ---cut---
import { usePeers, RTCView } from "@fishjam-cloud/react-native-client";
Expand Down Expand Up @@ -360,6 +361,7 @@ export function VideoCallScreen() {
### After

```tsx
// @errors: 2739
import React, { useRef } from "react";
import { View, Button } from "react-native";
import {
Expand Down
6 changes: 6 additions & 0 deletions docs/how-to/client/picture-in-picture.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@ Add the `audio` background mode to your `Info.plist`:
The `RTCPIPView` component displays video content that can be shown in Picture in Picture mode. Use `startPIP` and `stopPIP` to control PIP manually:

```tsx
// @errors: 2739
import React, { useRef } from "react";
import { View, Button } from "react-native";
import {
Expand Down Expand Up @@ -207,6 +208,7 @@ By default, Picture in Picture will start automatically when the app goes to the
You can customize the Picture in Picture behavior using the `pip` prop on `RTCPIPView`:

```tsx
// @errors: 2739
import React, { useRef } from "react";
import { View } from "react-native";
import { RTCPIPView, useCamera } from "@fishjam-cloud/react-native-client";
Expand Down Expand Up @@ -247,6 +249,7 @@ export function VideoCallScreen() {
For more control over when Picture in Picture starts and stops, use the `startPIP` and `stopPIP` functions with a ref:

```tsx
// @errors: 2739
import React, { useRef } from "react";
import { Button, View } from "react-native";
import {
Expand Down Expand Up @@ -294,6 +297,7 @@ export function VideoCallScreen() {
Here's a complete example showing Picture in Picture with a video call:

```tsx
// @errors: 2739
import React, { useRef } from "react";
import { FlatList, StyleSheet, View, Text, Button } from "react-native";
import {
Expand Down Expand Up @@ -422,6 +426,7 @@ Example configuration combining both features:
Use `RTCPIPView` to display the livestream with Picture in Picture support:

```tsx
// @errors: 2739
import React, { useRef, useEffect } from "react";
import { View, StyleSheet, Text } from "react-native";
import {
Expand Down Expand Up @@ -503,6 +508,7 @@ Configure Picture in Picture behavior using the `pip` prop:
Here's a complete example showing how to connect to a livestream and display it with Picture in Picture:

```tsx
// @errors: 2739
import React, { useEffect, useRef } from "react";
import { View, StyleSheet, Text, Button } from "react-native";
import {
Expand Down
8 changes: 4 additions & 4 deletions docs/how-to/client/screensharing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -214,11 +214,11 @@ Configuring screen sharing on iOS is a little complicated.

## Usage

You can use [`useScreenShare`](../../api/mobile/variables/useScreenShare) hook to enable screen sharing.
You can use [`useScreenShare`](../../api/mobile/functions/useScreenShare) hook to enable screen sharing.

:::tip[Permissions]

Permission request is handled for you as soon as you call [`startStreaming`](../../api/mobile/variables/useScreenShare#startstreaming).
Permission request is handled for you as soon as you call [`startStreaming`](../../api/mobile/functions/useScreenShare#startstreaming).

:::

Expand All @@ -228,8 +228,8 @@ On Android API level >= 24, you must use a foreground service when screen sharin

:::

You can enable/disable screen sharing with [`startStreaming`](../../api/mobile/variables/useScreenShare#startstreaming) and [`stopStreaming`](../../api/mobile/variables/useScreenShare#stopstreaming) methods.
And check current state by checking if [`stream`](../../api/mobile/variables/useScreenShare#stream) exists.
You can enable/disable screen sharing with [`startStreaming`](../../api/mobile/functions/useScreenShare#startstreaming) and [`stopStreaming`](../../api/mobile/functions/useScreenShare#stopstreaming) methods.
And check current state by checking if [`stream`](../../api/mobile/functions/useScreenShare#stream) exists.

```tsx
import React, { useCallback } from "react";
Expand Down
2 changes: 1 addition & 1 deletion docs/how-to/client/start-streaming.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export function ExampleCameraPreview() {
</TabItem>
<TabItem value="mobile" label="React Native (Mobile)">

To manage users' camera and microphone devices, use the respective [`useCamera`](../../api/mobile/functions/useCamera) and [`useMicrophone`](../../api/mobile/variables/useMicrophone) hooks. Both of them have similar API. To keep things simple, we will just use the camera hook.
To manage users' camera and microphone devices, use the respective [`useCamera`](../../api/mobile/functions/useCamera) and [`useMicrophone`](../../api/mobile/functions/useMicrophone) hooks. Both of them have similar API. To keep things simple, we will just use the camera hook.

You can preview your camera stream using the `RTCView` component.

Expand Down
4 changes: 2 additions & 2 deletions docs/how-to/features/text-chat.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@ This guide shows how to implement text chat in your application using data chann
Before implementing text chat, you must be [connected to a room](../client/connecting). Data channels only work after you have successfully joined a room.

:::tip
For a deeper understanding of how data channels work, including channel types and broadcast behavior, see [Data Channels](../explanation/data-channels).
For a deeper understanding of how data channels work, including channel types and broadcast behavior, see [Data Channels](../../explanation/data-channels).
:::

---

## Step 1 — Set up the chat hook

Use the [`useDataChannel`](/api/web/functions/useDataChannel) (web) or [`useDataChannel`](/api/mobile/functions/useDataChannel) (mobile) hook to work with data channels. The typical flow is:
Use the [`useDataChannel`](../../api/web/functions/useDataChannel) (web) or [`useDataChannel`](../../api/mobile/functions/useDataChannel) (mobile) hook to work with data channels. The typical flow is:

1. Initialize the data channel after connecting to a room
2. Subscribe to incoming messages
Expand Down
2 changes: 1 addition & 1 deletion docs/tutorials/livestreaming.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ We can now start sending media, which we can obtain from the user's camera, scre
If you want to continue screen sharing when the app goes to the background, you need to:

1. Enable VoIP background mode by setting `enableVoIPBackgroundMode: true` in the plugin configuration or adding the VoIP background mode to your `Info.plist`
2. Use the [`useCallKitService`](../../api/mobile/variables/useCallKitService) hook in your component to manage the CallKit session
2. Use the [`useCallKitService`](../api/mobile/functions/useCallKitService) hook in your component to manage the CallKit session

See the [background calls documentation](../how-to/client/background-streaming) for detailed instructions and code examples.

Expand Down
3 changes: 3 additions & 0 deletions docs/tutorials/react-native-quick-start.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -224,6 +224,7 @@ export function ConnectionStatus() {
Show your own video stream:

```tsx
// @errors: 2739
import React from "react";
import { Text, View } from "react-native";
import { RTCView, useCamera } from "@fishjam-cloud/react-native-client";
Expand Down Expand Up @@ -253,6 +254,7 @@ export function StreamPreview() {
Show video from other peers in the room:

```tsx
// @errors: 2739
import React from "react";
import { View, Text } from "react-native";
import { usePeers, RTCView } from "@fishjam-cloud/react-native-client";
Expand Down Expand Up @@ -295,6 +297,7 @@ export function ParticipantsView() {
Here's a complete working app:

```tsx
// @errors: 2739
import React, { useState } from "react";
import { View, Text, Button, ScrollView, StyleSheet } from "react-native";
import {
Expand Down
2 changes: 1 addition & 1 deletion packages/web-client-sdk
Submodule web-client-sdk updated 290 files
8 changes: 8 additions & 0 deletions versioned_docs/version-0.23.0/examples/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
title: Examples
sidebar_position: 99
---

# Examples

Check out the latest version of the documentation for up-to-date examples.
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,5 @@ This section contains guides for implementing custom video sources in the Fishja

## Available Guides

- [Custom Source](../../../how-to/react-native/custom-video-sources/overview) - Learn how to create a basic custom video source
- [Vision Camera](../../../how-to/react-native/custom-video-sources/vision-camera) - Learn how to implement Vision Camera as a custom video source
- [Custom Source](./custom-video-sources/overview) - Learn how to create a basic custom video source
- [Vision Camera](./custom-video-sources/vision-camera) - Learn how to implement Vision Camera as a custom video source
Comment on lines +13 to +14
Copy link

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The links add an extra custom-video-sources/ path segment. Since this file already lives in .../custom-video-sources/, ./custom-video-sources/overview resolves to .../custom-video-sources/custom-video-sources/overview (non-existent). Link directly to the sibling docs (e.g., ./overview and ./vision-camera) or use the correct relative path from this directory.

Suggested change
- [Custom Source](./custom-video-sources/overview) - Learn how to create a basic custom video source
- [Vision Camera](./custom-video-sources/vision-camera) - Learn how to implement Vision Camera as a custom video source
- [Custom Source](./overview) - Learn how to create a basic custom video source
- [Vision Camera](./vision-camera) - Learn how to implement Vision Camera as a custom video source

Copilot uses AI. Check for mistakes.
8 changes: 8 additions & 0 deletions versioned_docs/version-0.24.0/examples/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
title: Examples
sidebar_position: 99
---

# Examples

Check out the latest version of the documentation for up-to-date examples.
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,5 @@ This section contains guides for implementing custom video sources in the Fishja

## Available Guides

- [Custom Source](../../../how-to/react-native/custom-video-sources/overview) - Learn how to create a basic custom video source
- [Vision Camera](../../../how-to/react-native/custom-video-sources/vision-camera) - Learn how to implement Vision Camera as a custom video source
- [Custom Source](./custom-video-sources/overview) - Learn how to create a basic custom video source
- [Vision Camera](./custom-video-sources/vision-camera) - Learn how to implement Vision Camera as a custom video source
Comment on lines +13 to +14
Copy link

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The links add an extra custom-video-sources/ path segment. Since this file already lives in .../custom-video-sources/, ./custom-video-sources/overview resolves to .../custom-video-sources/custom-video-sources/overview (non-existent). Link directly to the sibling docs (e.g., ./overview and ./vision-camera) or use the correct relative path from this directory.

Suggested change
- [Custom Source](./custom-video-sources/overview) - Learn how to create a basic custom video source
- [Vision Camera](./custom-video-sources/vision-camera) - Learn how to implement Vision Camera as a custom video source
- [Custom Source](./overview) - Learn how to create a basic custom video source
- [Vision Camera](./vision-camera) - Learn how to implement Vision Camera as a custom video source

Copilot uses AI. Check for mistakes.
2 changes: 1 addition & 1 deletion versioned_docs/version-0.24.0/tutorials/livestreaming.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ We can now start sending media, which we can obtain from the user's camera, scre
If you want to continue screen sharing when the app goes to the background, you need to:

1. Enable VoIP background mode by setting `enableVoIPBackgroundMode: true` in the plugin configuration or adding the VoIP background mode to your `Info.plist`
2. Use the [`useCallKitService`](../../api/mobile/variables/useCallKitService) hook in your component to manage the CallKit session
2. Use the [`useCallKitService`](../api/mobile/variables/useCallKitService) hook in your component to manage the CallKit session

See the [background calls documentation](../how-to/react-native/background-streaming) for detailed instructions and code examples.

Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-0.25.0/examples/react-native.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -177,4 +177,4 @@ Browse the full source: [video-player on GitHub](https://github.com/fishjam-clou
- 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)
- Learn how to [work with data channels](../explanation/data-channels)
2 changes: 1 addition & 1 deletion versioned_docs/version-0.25.0/examples/react.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -188,5 +188,5 @@ Browse the full source: [fishjam-chat on GitHub](https://github.com/fishjam-clou
## 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 [work with data channels](../explanation/data-channels)
- Learn how to [implement screen sharing](../how-to/client/screensharing)
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ Use [`useDataChannel`](../api/web/functions/useDataChannel) from `@fishjam-cloud
</TabItem>
<TabItem value="mobile" label="React Native (Mobile)">

Use [`useDataChannel`](../api/mobile/functions/useDataChannel) from `@fishjam-cloud/react-native-client`.
Use `useDataChannel` from `@fishjam-cloud/react-native-client`.

</TabItem>
</Tabs>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ On iOS, background calls are achieved through CallKit integration. You can use t

### Manual CallKit Management

Use the [`useCallKit`](../../api/mobile/variables/useCallKit) hook for fine-grained control over CallKit sessions:
Use the `useCallKit` hook for fine-grained control over CallKit sessions:

```tsx
import { useCallKit } from "@fishjam-cloud/react-native-client";
Expand All @@ -163,7 +163,7 @@ const handleLeaveRoom = async () => {

### Automatic CallKit Management

Use the [`useCallKitService`](../../api/mobile/variables/useCallKitService) hook for automatic session lifecycle management:
Use the `useCallKitService` hook for automatic session lifecycle management:

```tsx
import React from "react";
Expand All @@ -184,7 +184,7 @@ function CallScreen({ username }: { username: string }) {

### Listening to CallKit Events

Use the [`useCallKitEvent`](../../api/mobile/variables/useCallKitEvent) hook to respond to user interactions with the native CallKit interface:
Use the `useCallKitEvent` hook to respond to user interactions with the native CallKit interface:

```tsx
import {
Expand Down
6 changes: 3 additions & 3 deletions versioned_docs/version-0.25.0/how-to/features/text-chat.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,14 @@ This guide shows how to implement text chat in your application using data chann
Before implementing text chat, you must be [connected to a room](../client/connecting). Data channels only work after you have successfully joined a room.

:::tip
For a deeper understanding of how data channels work, including channel types and broadcast behavior, see [Data Channels](../explanation/data-channels).
For a deeper understanding of how data channels work, including channel types and broadcast behavior, see [Data Channels](../../explanation/data-channels).
:::

---

## Step 1 — Set up the chat hook

Use the [`useDataChannel`](/api/web/functions/useDataChannel) (web) or [`useDataChannel`](/api/mobile/functions/useDataChannel) (mobile) hook to work with data channels. The typical flow is:
Use the [`useDataChannel`](../../api/web/functions/useDataChannel) (web) or `useDataChannel` (mobile) hook to work with data channels. The typical flow is:

1. Initialize the data channel after connecting to a room
2. Subscribe to incoming messages
Expand Down Expand Up @@ -356,4 +356,4 @@ This ensures no chat messages are lost or arrive out of order.
- [Data Channels](../../explanation/data-channels) — detailed explanation of channel types and broadcast behavior
- [Connecting to a room](../../how-to/client/connecting) — prerequisite for using data channels
- [`useDataChannel` API reference (Web)](../../api/web/functions/useDataChannel)
- [`useDataChannel` API reference (Mobile)](../../api/mobile/functions/useDataChannel)
- `useDataChannel` API reference (Mobile)
2 changes: 1 addition & 1 deletion versioned_docs/version-0.25.0/tutorials/livestreaming.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ We can now start sending media, which we can obtain from the user's camera, scre
If you want to continue screen sharing when the app goes to the background, you need to:

1. Enable VoIP background mode by setting `enableVoIPBackgroundMode: true` in the plugin configuration or adding the VoIP background mode to your `Info.plist`
2. Use the [`useCallKitService`](../../api/mobile/variables/useCallKitService) hook in your component to manage the CallKit session
2. Use the `useCallKitService` hook in your component to manage the CallKit session

See the [background calls documentation](../how-to/client/background-streaming) for detailed instructions and code examples.

Expand Down
Loading