Fishjam

https://fishjam.swmansion.com/docs
Admin
Fishjam is an all-in-one multimedia streaming toolkit that enables developers to build live video...
Tokens:114,204
Snippets:1,402
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install and Run Video Player Example

Source: https://fishjam.swmansion.com/docs/examples/react-native

Instructions to install dependencies and run the video player example on Android or iOS.

```bash
Copycd video-player
yarn install
npx expo prebuild
npx expo run:android  # or run:ios
```

--------------------------------

### Install and Run Livestreaming Example

Source: https://fishjam.swmansion.com/docs/examples/react

Installs dependencies and runs the livestreaming example. This showcases separate streamer and viewer functionalities.

```bash
cd livestreaming
yarn install
yarn dev
```

--------------------------------

### Install and Run Minimal React Example

Source: https://fishjam.swmansion.com/docs/examples/react

Instructions to install dependencies and run the minimal React example for a basic video call.

```bash
yarn install
yarn dev
```

--------------------------------

### Install and Run Text Chat Example

Source: https://fishjam.swmansion.com/docs/examples/react-native

Instructions to install dependencies and run the text chat example on Android or iOS.

```bash
Copycd text-chat
yarn install
npx expo prebuild
npx expo run:android  # or run:ios
```

--------------------------------

### Install and Run Audio-Only Example

Source: https://fishjam.swmansion.com/docs/examples/react

Installs dependencies and runs the audio-only example. This mode is optimized for voice communication by disabling video.

```bash
cd audio-only
yarn install
yarn dev
```

--------------------------------

### Install and Run Text Chat Example

Source: https://fishjam.swmansion.com/docs/examples/react

Installs dependencies and runs the text chat example. This demonstrates peer-to-peer messaging using WebRTC data channels.

```bash
cd text-chat
yarn install
yarn dev
```

--------------------------------

### Run Background Blur Example

Source: https://fishjam.swmansion.com/docs/examples/react-native

Installs dependencies and prepares the background blur example for running on Android or iOS. Ensure the blur package is installed first.

```bash
cd blur-example
yarn install
npx expo prebuild
npx expo run:android  # or run:ios
```

--------------------------------

### Install and Run Minimal React Native Example

Source: https://fishjam.swmansion.com/docs/examples/react-native

Instructions for installing dependencies and running the minimal video room example on an Android device. Ensure you are using a real device for testing as the iOS Simulator cannot access the camera.

```bash
Copycd minimal-react-native
yarn install
npx expo prebuild
npx expo run:android  # or run:ios
```

--------------------------------

### Install and Run Minimal Smelter

Source: https://fishjam.swmansion.com/docs/examples/react

Instructions to install dependencies and run the Minimal Smelter example. Requires a modern browser with WebAssembly support.

```bash
cd minimal-smelter
yarn install
yarn dev
```

--------------------------------

### Install and Run Fishjam Chat

Source: https://fishjam.swmansion.com/docs/examples/react

Instructions to install dependencies and run the Fishjam Chat example. This example includes features like screen sharing and background blur.

```bash
cd fishjam-chat
yarn install
yarn dev
```

--------------------------------

### Install FastAPI with uv

Source: https://fishjam.swmansion.com/docs/tutorials/backend-quick-start

Install FastAPI and its standard dependencies using uv.

```bash
uv add fastapi[standard]

```

--------------------------------

### Install iOS Pods

Source: https://fishjam.swmansion.com/docs/tutorials/moq/react-native-publishing

After installing the library, navigate to the ios directory and install the necessary pods.

```bash
cd ios && pod install
```

--------------------------------

### Install MoQ Packages (Bun)

Source: https://fishjam.swmansion.com/docs/tutorials/moq/web-publishing

Install the necessary MoQ packages for publishing using Bun.

```bash
bun add @moq/lite @moq/publish

```

--------------------------------

### Install Express with yarn

Source: https://fishjam.swmansion.com/docs/tutorials/backend-quick-start

Install the Express framework and its types using yarn.

```bash
yarn add express @types/express

```

--------------------------------

### Install with Bun

Source: https://fishjam.swmansion.com/docs/how-to/client/installation

Use this command to install the Fishjam React client using Bun.

```bash
bun add @fishjam-cloud/react-client
```

--------------------------------

### Install @moq/lite and @moq/watch with Bun

Source: https://fishjam.swmansion.com/docs/tutorials/moq/web-subscribing

Install the necessary MoQ packages for subscribing and watching streams using Bun.

```bash
bun add @moq/lite @moq/watch

```

--------------------------------

### Install MoQ Packages (npm)

Source: https://fishjam.swmansion.com/docs/tutorials/moq/web-publishing

Install the necessary MoQ packages for publishing using npm.

```bash
npm install @moq/lite @moq/publish

```

--------------------------------

### Install react-native-moq with Bun

Source: https://fishjam.swmansion.com/docs/tutorials/moq/react-native-publishing

Use this command to install the react-native-moq library using Bun.

```bash
bun add react-native-moq
```

--------------------------------

### Install Express with npm

Source: https://fishjam.swmansion.com/docs/tutorials/backend-quick-start

Install the Express framework and its types using npm.

```bash
npm install express @types/express

```

--------------------------------

### Install @moq/lite and @moq/watch with pnpm

Source: https://fishjam.swmansion.com/docs/tutorials/moq/web-subscribing

Install the necessary MoQ packages for subscribing and watching streams using pnpm.

```bash
pnpm add @moq/lite @moq/watch

```

--------------------------------

### Complete Picture-in-Picture Video Call Example

Source: https://fishjam.swmansion.com/docs/how-to/client/picture-in-picture

This example demonstrates a full video call screen with Picture-in-Picture capabilities, including starting and stopping PiP, rendering local and remote video streams, and handling multiple remote participants.

```javascript
import React, { useRef } from "react";
import { FlatList, StyleSheet, View, Text, Button } from "react-native";
import {
  RTCPIPView,
  RTCView,
  startPIP,
  stopPIP,
  usePeers,
  type MediaStream,
} from "@fishjam-cloud/react-native-client";

function VideoPlayer({ stream }: { stream: MediaStream | null }) {
  if (!stream) return <Text>No video</Text>;
  return (
    <RTCView mediaStream={stream} style={styles.video} objectFit="cover" />
  );
}

export function VideoCallScreen() {
  const pipViewRef = useRef<React.ElementRef<typeof RTCPIPView>>(null);
  const { localPeer, remotePeers } = usePeers();
  const firstRemotePeer = remotePeers[0];
  const remoteStream = firstRemotePeer?.cameraTrack?.stream;

  return (
    <View style={styles.container}>
      <Button title="Start PiP" onPress={() => startPIP(pipViewRef as any)} />
      <Button title="Stop PiP" onPress={() => stopPIP(pipViewRef as any)} />

      {/* Render local video */}
      {localPeer?.cameraTrack?.stream && (
        <VideoPlayer stream={localPeer.cameraTrack.stream} />
      )}

      {/* Render first remote peer with PiP support */}
      {remoteStream && (
        <RTCPIPView
          ref={pipViewRef}
          mediaStream={remoteStream}
          style={styles.video}
          pip={{
            startAutomatically: true,
            stopAutomatically: true,
            enabled: true,
          }}
        />
      )}

      {/* Render remaining remote videos */}
      <FlatList
        data={remotePeers.slice(1)}
        keyExtractor={(peer) => peer.id}
        renderItem={({ item: peer }) => (
          <View>
            {peer.cameraTrack?.stream && (
              <VideoPlayer stream={peer.cameraTrack.stream} />
            )}
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  video: {
    width: "100%",
    height: 200,
  },
});

```

--------------------------------

### Install Express with pnpm

Source: https://fishjam.swmansion.com/docs/tutorials/backend-quick-start

Install the Express framework and its types using pnpm.

```bash
pnpm add express @types/express

```

--------------------------------

### Install MoQ Packages (Yarn)

Source: https://fishjam.swmansion.com/docs/tutorials/moq/web-publishing

Install the necessary MoQ packages for publishing using Yarn.

```bash
yarn add @moq/lite @moq/publish

```

--------------------------------

### Install @moq/lite and @moq/watch with Yarn

Source: https://fishjam.swmansion.com/docs/tutorials/moq/web-subscribing

Install the necessary MoQ packages for subscribing and watching streams using Yarn.

```bash
yarn add @moq/lite @moq/watch

```

--------------------------------

### Install @moq/lite and @moq/watch with npm

Source: https://fishjam.swmansion.com/docs/tutorials/moq/web-subscribing

Install the necessary MoQ packages for subscribing and watching streams using npm.

```bash
npm install @moq/lite @moq/watch

```

--------------------------------

### Install Fishjam Chat Dependencies

Source: https://fishjam.swmansion.com/docs/examples/react-native

Installs the necessary dependencies for the Fishjam Chat example. Ensure you replace the bundle identifier in app.json before prebuilding.

```bash
cd fishjam-chat
yarn install
npx expo prebuild
npx expo run:android  # or run:ios
```

--------------------------------

### Install with npm

Source: https://fishjam.swmansion.com/docs/how-to/client/installation

Use this command to install the Fishjam React client using npm.

```bash
npm install @fishjam-cloud/react-client
```

--------------------------------

### Install react-native-moq with npm

Source: https://fishjam.swmansion.com/docs/tutorials/moq/react-native-publishing

Use this command to install the react-native-moq library using npm.

```bash
npm install react-native-moq
```

--------------------------------

### Install MoQ Packages (pnpm)

Source: https://fishjam.swmansion.com/docs/tutorials/moq/web-publishing

Install the necessary MoQ packages for publishing using pnpm.

```bash
pnpm add @moq/lite @moq/publish

```

--------------------------------

### Install Node.js SDK with npm

Source: https://fishjam.swmansion.com/docs/how-to/backend/server-setup

Use npm to install the Fishjam JavaScript server SDK.

```bash
npm install @fishjam-cloud/js-server-sdk
```

--------------------------------

### Install FastAPI with pip

Source: https://fishjam.swmansion.com/docs/tutorials/backend-quick-start

Install FastAPI and its standard dependencies using pip.

```bash
pip install fastapi[standard]

```

--------------------------------

### Install VAPI and Fishjam Server SDKs for Node.js

Source: https://fishjam.swmansion.com/docs/integrations/vapi-integration

Install the necessary server SDKs for Node.js to integrate VAPI and Fishjam.

```bash
npm install @fishjam-cloud/js-server-sdk @vapi-ai/server-sdk
```

--------------------------------

### Install react-native-moq with Yarn

Source: https://fishjam.swmansion.com/docs/tutorials/moq/react-native-publishing

Use this command to install the react-native-moq library using Yarn.

```bash
yarn add react-native-moq
```

--------------------------------

### Install react-native-moq with pnpm

Source: https://fishjam.swmansion.com/docs/tutorials/moq/react-native-publishing

Use this command to install the react-native-moq library using pnpm.

```bash
pnpm add react-native-moq
```

--------------------------------

### Install Gemini SDK for JavaScript

Source: https://fishjam.swmansion.com/docs/integrations/gemini-live-integration

Install the Google GenAI SDK alongside the Fishjam JavaScript Server SDK.

```bash
npm install @fishjam-cloud/js-server-sdk @google/genai
```

--------------------------------

### Install react-native-moq-ui with Bun

Source: https://fishjam.swmansion.com/docs/tutorials/moq/react-native-subscribing

Install the optional react-native-moq-ui package and its dependency for UI controls using Bun.

```bash
bun add react-native-moq-ui @react-native-vector-icons/material-icons
```

--------------------------------

### Install with Yarn

Source: https://fishjam.swmansion.com/docs/how-to/client/installation

Use this command to install the Fishjam React client using Yarn.

```bash
yarn add @fishjam-cloud/react-client
```

--------------------------------

### connect()

Source: https://fishjam.swmansion.com/docs/api/web/interfaces/UseLivestreamStreamerResult

Starts publishing selected audio and video media streams. Calling this multiple times will only publish the last specified inputs.

```APIDOC
## connect()

### Description
Callback used to start publishing the selected audio and video media streams.

### Method
(Implicitly a function call within a hook)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
* **inputs** (ConnectStreamerConfig) - Required - Configuration for starting the stream.
* **urlOverride?** (string) - Optional - An alternative URL to use for the connection.

### Request Example
```javascript
// Assuming 'connect' is available from useLivestreamStreamer hook
connect({ audio: true, video: true }, 'rtmp://example.com/live');
```

### Response
#### Success Response
`Promise<void>` - The operation completes without returning a value upon success.

#### Response Example
(No specific return value on success, the promise resolves)

### Remarks
Calling connect multiple times will have the effect of only publishing the **last** specified inputs.
```

--------------------------------

### Install with pnpm

Source: https://fishjam.swmansion.com/docs/how-to/client/installation

Use this command to install the Fishjam React client using pnpm.

```bash
pnpm add @fishjam-cloud/react-client
```

--------------------------------

### Install VAPI and Fishjam Server SDKs for Python

Source: https://fishjam.swmansion.com/docs/integrations/vapi-integration

Install the necessary server SDKs for Python to integrate VAPI and Fishjam.

```bash
pip install fishjam-server-sdk vapi-server-sdk
```

--------------------------------

### Install Python SDK with pip

Source: https://fishjam.swmansion.com/docs/how-to/backend/server-setup

Use pip to install the Fishjam Python server SDK.

```bash
pip install fishjam-server-sdk
```

--------------------------------

### Install Node.js SDK with yarn

Source: https://fishjam.swmansion.com/docs/how-to/backend/server-setup

Use yarn to install the Fishjam JavaScript server SDK.

```bash
yarn add @fishjam-cloud/js-server-sdk
```

--------------------------------

### Install react-native-moq-ui with npm

Source: https://fishjam.swmansion.com/docs/tutorials/moq/react-native-subscribing

Install the optional react-native-moq-ui package and its dependency for UI controls using npm.

```bash
npm install react-native-moq-ui @react-native-vector-icons/material-icons
```

--------------------------------

### Install react-native-moq-ui with Yarn

Source: https://fishjam.swmansion.com/docs/tutorials/moq/react-native-subscribing

Install the optional react-native-moq-ui package and its dependency for UI controls using Yarn.

```bash
yarn add react-native-moq-ui @react-native-vector-icons/material-icons
```

--------------------------------

### Install react-native-moq-ui with pnpm

Source: https://fishjam.swmansion.com/docs/tutorials/moq/react-native-subscribing

Install the optional react-native-moq-ui package and its dependency for UI controls using pnpm.

```bash
pnpm add react-native-moq-ui @react-native-vector-icons/material-icons
```

--------------------------------

### Install Client with Bun

Source: https://fishjam.swmansion.com/docs/how-to/client/installation

Use this command to install the Fishjam React Native client and react-native-get-random-values using Bun.

```bash
bun add @fishjam-cloud/react-native-client react-native-get-random-values@1.11.0
```

--------------------------------

### Install React Native WebRTC Background Blur (Bun)

Source: https://fishjam.swmansion.com/docs/examples/react-native

Installs the background blur package for React Native using Bun.

```bash
bun add @fishjam-cloud/react-native-webrtc-background-blur
```

--------------------------------

### Complete Video Call Application Example

Source: https://fishjam.swmansion.com/docs/tutorials/react-quick-start

This example demonstrates a full video call application, including joining a room, displaying your video, and showing other participants' videos. It utilizes various Fishjam hooks and React's `useState` and `useEffect`.

```jsx
function VideoPlayer({ stream }: { stream: MediaStream | null | undefined }) {
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    if (!videoRef.current) return;
    videoRef.current.srcObject = stream ?? null;
  }, [stream]);

  return <video ref={videoRef} autoPlay playsInline />;
}

function VideoCall() {
  const { joinRoom, peerStatus } = useConnection();
  const { cameraStream } = useCamera();
  const { remotePeers } = usePeers();
  const { initializeDevices } = useInitializeDevices();
  const { getSandboxPeerToken } = useSandbox({
    sandboxApiUrl: SANDBOX_API_URL,
  });

  const [isJoined, setIsJoined] = useState(false);

  const handleJoin = async () => {
    const roomName = "testRoom";
    const peerName = `user_${Date.now()}`;

    // Initialize devices first
    await initializeDevices();

    // For testing with the Sandbox API, use getSandboxPeerToken
    // For production apps, get the peerToken from your own backend instead
    const peerToken = await getSandboxPeerToken(roomName, peerName);

    await joinRoom({ peerToken });
    setIsJoined(true);
  };

  return (
    <div>
      <h1>Fishjam Video Call</h1>
      <p>Status: {peerStatus}</p>

      {!isJoined && <button onClick={handleJoin}>Join Room</button>}

      {cameraStream && (
        <div>
          <h3>Your Video</h3>
          <VideoPlayer stream={cameraStream} />
        </div>
      )}

      <div>
        <h3>Other Participants</h3>
        {remotePeers.map((peer) => (
          <div key={peer.id}>
            {peer.cameraTrack?.stream && (
              <VideoPlayer stream={peer.cameraTrack.stream} />
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

export default function App() {
  return (
    <FishjamProvider fishjamId={FISHJAM_ID}>
      <VideoCall />
    </FishjamProvider>
  );
}
```

--------------------------------

### connect()

Source: https://fishjam.swmansion.com/docs/api/web/interfaces/UseLivestreamViewerResult

Starts receiving a livestream. Requires connection configuration and optionally a URL. Use a token for private streams or a stream ID for public streams.

```APIDOC
## connect()

### Description
Callback to start receiving a livestream. If the livestream is private, provide `token`. If the livestream is public, provide `streamId`.

### Method
connect

### Parameters
#### Path Parameters
- **config** (ConnectViewerConfig) - Required - Configuration for connecting to the stream.
- **url?** (string) - Optional - The URL for the stream.

### Returns
`Promise<void>`
```

--------------------------------

### Install Python SDK with uv

Source: https://fishjam.swmansion.com/docs/how-to/backend/server-setup

Use uv to add the Fishjam Python server SDK to your project.

```bash
uv add fishjam-server-sdk
```

--------------------------------

### Install FastAPI with poetry

Source: https://fishjam.swmansion.com/docs/tutorials/backend-quick-start

Add FastAPI and its standard dependencies to your project using poetry.

```bash
poetry add fastapi[standard]

```

--------------------------------

### Install Client with npm

Source: https://fishjam.swmansion.com/docs/how-to/client/installation

Use this command to install the Fishjam React Native client and react-native-get-random-values using npm.

```bash
npm install @fishjam-cloud/react-native-client react-native-get-random-values@1.11.0
```

--------------------------------

### Install Gemini Integration for Python

Source: https://fishjam.swmansion.com/docs/integrations/gemini-live-integration

Install the Fishjam Python Server SDK with the 'gemini' extra to include necessary libraries for Gemini integration.

```bash
pip install "fishjam-server-sdk[gemini]"
```

--------------------------------

### Start Node.js/TypeScript Backend Server

Source: https://fishjam.swmansion.com/docs/tutorials/backend-quick-start

Use this command to start your Node.js/TypeScript backend server directly with tsx, or compile and run the JavaScript output.

```bash
npx tsx server.ts
```

```bash
npx tsc server.ts && node server.js
```

--------------------------------

### Install React Native WebRTC Background Blur (npm)

Source: https://fishjam.swmansion.com/docs/examples/react-native

Installs the background blur package for React Native using npm.

```bash
npm install @fishjam-cloud/react-native-webrtc-background-blur
```

--------------------------------

### Install Fishjam React Native Client with Bun

Source: https://fishjam.swmansion.com/docs/tutorials/react-native-quick-start

Use this command to install the Fishjam React Native client package using Bun.

```bash
bun add @fishjam-cloud/react-native-client
```

--------------------------------

### Install React Native WebRTC Background Blur (Yarn)

Source: https://fishjam.swmansion.com/docs/examples/react-native

Installs the background blur package for React Native using Yarn.

```bash
yarn add @fishjam-cloud/react-native-webrtc-background-blur
```

--------------------------------

### Join Room and Start Streaming in React

Source: https://fishjam.swmansion.com/docs/tutorials/react-quick-start

This component demonstrates how to join a room and start streaming using Fishjam hooks. It uses the Sandbox API for peer token generation and initializes devices for camera access.

```jsx
import React from "react";

import {
  useConnection,
  useCamera,
  useInitializeDevices,
  useSandbox,
} from "@fishjam-cloud/react-client";

const SANDBOX_API_URL = "YOUR_SANDBOX_API_URL";

export function JoinRoomButton() {
  const { joinRoom } = useConnection();
  const { selectCamera } = useCamera();
  const { initializeDevices } = useInitializeDevices();
  const { getSandboxPeerToken } = useSandbox({
    sandboxApiUrl: SANDBOX_API_URL,
  });

  const handleJoinRoom = async () => {
    const roomName = "testRoom";
    const peerName = "testUser";

    // For testing with the Sandbox API, use getSandboxPeerToken
    // For production apps, get the peerToken from your own backend instead
    const peerToken = await getSandboxPeerToken(roomName, peerName);

    // Start camera by selecting the first available camera
    await initializeDevices({ enableAudio: false }); // or just initializeDevices(); if you want both camera and mic

    // Join the room
    await joinRoom({ peerToken });
  };

  return <button onClick={handleJoinRoom}>Join Room</button>;
}

```

--------------------------------

### Join Room and Start Streaming

Source: https://fishjam.swmansion.com/docs/tutorials/react-native-quick-start

This component joins a room and starts streaming video. It uses the Sandbox API for token generation and initializes devices for camera access. For production, replace Sandbox token generation with your own backend.

```javascript
import React from "react";
import { Button } from "react-native";
import {
  useConnection,
  useSandbox,
  useInitializeDevices,
} from "@fishjam-cloud/react-native-client";

const SANDBOX_API_URL = "YOUR_SANDBOX_API_URL";

export function JoinRoomButton() {
  const { joinRoom } = useConnection();
  const { initializeDevices } = useInitializeDevices();
  const { getSandboxPeerToken } = useSandbox({
    sandboxApiUrl: SANDBOX_API_URL,
  });

  const handleJoinRoom = async () => {
    const roomName = "testRoom";
    const peerName = "testUser";

    // For testing with the Sandbox API, use getSandboxPeerToken
    // For production apps, get the peerToken from your own backend instead
    const peerToken = await getSandboxPeerToken(roomName, peerName);

    // Start camera by selecting the first available camera
    await initializeDevices({ enableAudio: false }); // or just initializeDevices(); if you want both camera and mic

    // Join the room
    await joinRoom({ peerToken });
  };

  return <Button title="Join Room" onPress={handleJoinRoom} />;
}
```

--------------------------------

### Setup Fishjam Fastify Plugin

Source: https://fishjam.swmansion.com/docs/how-to/backend/fastify-example

Create a Fastify plugin to encapsulate Fishjam functionality. This involves extending the FastifyInstance interface and decorating it with the FishjamClient.

```javascript
import fastifyPlugin from "fastify-plugin";
import { FishjamClient } from "@fishjam-cloud/js-server-sdk";

declare module "fastify" {
  interface FastifyInstance {
    fishjam: FishjamClient;
    config: {
      FISHJAM_ID: string;
      FISHJAM_MANAGEMENT_TOKEN: string;
    };
  }
}

export const fishjamPlugin = fastifyPlugin((fastify) => {
  const fishjamClient = new FishjamClient({
    fishjamId: fastify.config.FISHJAM_ID,
    managementToken: fastify.config.FISHJAM_MANAGEMENT_TOKEN,
  });

  fastify.decorate("fishjam", fishjamClient);
});

```

--------------------------------

### Install Python SDK with poetry

Source: https://fishjam.swmansion.com/docs/how-to/backend/server-setup

Use poetry to add the Fishjam Python server SDK to your project.

```bash
poetry add fishjam-server-sdk
```

--------------------------------

### Install Client and WebRTC with Bun (Expo SDK 54+)

Source: https://fishjam.swmansion.com/docs/how-to/client/installation

For Expo SDK 54+, install the Fishjam React Native client, WebRTC module, and react-native-get-random-values using Bun.

```bash
bun add @fishjam-cloud/react-native-client @fishjam-cloud/react-native-webrtc react-native-get-random-values@1.11.0
```

--------------------------------

### Complete React Native Video Call Example

Source: https://fishjam.swmansion.com/docs/tutorials/react-native-quick-start

A full example of a React Native video call application. It includes joining a room, displaying your own camera stream, and showing streams from other participants. Ensure to replace placeholder values like SANDBOX_API_URL and FISHJAM_ID with your actual credentials.

```javascript
function VideoPlayer({ stream }: { stream: MediaStream | null | undefined }) {
  if (!stream) {
    return (
      <View style={styles.videoPlaceholder}>
        <Text>No video</Text>
      </View>
    );
  }

  return (
    <RTCView mediaStream={stream} style={styles.video} objectFit="cover" />
  );
}

function VideoCall() {
  const { joinRoom, peerStatus } = useConnection();
  const { cameraStream } = useCamera();
  const { remotePeers } = usePeers();
  const { initializeDevices } = useInitializeDevices();
  const { getSandboxPeerToken } = useSandbox({
    sandboxApiUrl: SANDBOX_API_URL,
  });

  const [isJoined, setIsJoined] = useState(false);

  const handleJoin = async () => {
    const roomName = "testRoom";
    const peerName = `user_${Date.now()}`;

    // Initialize devices first
    await initializeDevices();

    // For testing with the Sandbox API, use getSandboxPeerToken
    // For production apps, get the peerToken from your own backend instead
    const peerToken = await getSandboxPeerToken(roomName, peerName);

    await joinRoom({ peerToken });
    setIsJoined(true);
  };

  return (
    <ScrollView style={styles.container}>
      <Text style={styles.title}>Fishjam Video Call</Text>
      <Text style={styles.status}>Status: {peerStatus}</Text>

      {!isJoined && <Button title="Join Room" onPress={handleJoin} />}

      {cameraStream && (
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Your Video</Text>
          <VideoPlayer stream={cameraStream} />
        </View>
      )}

      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Other Participants</Text>
        {remotePeers.length === 0 ? (
          <Text>No other participants</Text>
        ) : (
          remotePeers.map((peer) => (
            <View key={peer.id} style={styles.participant}>
              {peer.cameraTrack?.stream && (
                <VideoPlayer stream={peer.cameraTrack.stream} />
              )}
            </View>
          ))
        )}
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 10,
  },
  status: {
    fontSize: 16,
    marginBottom: 20,
  },
  section: {
    marginTop: 20,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: "600",
    marginBottom: 10,
  },
  participant: {
    marginBottom: 10,
  },
  video: {
    height: 200,
    width: "100%",
    borderRadius: 8,
  },
  videoPlaceholder: {
    height: 200,
    width: "100%",
    backgroundColor: "#000",
    borderRadius: 8,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default function App() {
  return (
    <FishjamProvider fishjamId={FISHJAM_ID}>
      <VideoCall />
    </FishjamProvider>
  );
}

```

--------------------------------

### React Native Livestream Viewer with PiP

Source: https://fishjam.swmansion.com/docs/how-to/client/picture-in-picture

This example shows how to connect to a livestream and display it using the Picture-in-Picture feature. It includes buttons to manually start and stop PiP, and handles stream connection and disconnection.

```javascript
import React, { useEffect, useRef } from "react";
import { View, StyleSheet, Text, Button } from "react-native";
import {
  RTCPIPView,
  useLivestreamViewer,
  useSandbox,
  startPIP,
  stopPIP,
} from "@fishjam-cloud/react-native-client";

const SANDBOX_API_URL = "your-sandbox-api-url-here";

export function LivestreamViewerScreen() {
  const pipViewRef = useRef<React.ElementRef<typeof RTCPIPView>>(null);
  const { getSandboxViewerToken } = useSandbox({
    sandboxApiUrl: SANDBOX_API_URL,
  });
  const { connect, disconnect, stream } = useLivestreamViewer();

  useEffect(() => {
    const connectToStream = async () => {
      try {
        const token = await getSandboxViewerToken("room-name");
        await connect({ token });
      } catch (err) {
        console.error("Failed to connect to livestream:", err);
      }
    };

    connectToStream();

    return () => {
      disconnect();
    };
  }, []);

  return (
    <View style={styles.container}>
      <Button title="Start PiP" onPress={() => startPIP(pipViewRef as any)} />
      <Button title="Stop PiP" onPress={() => stopPIP(pipViewRef as any)} />
      {stream ? (
        <RTCPIPView
          ref={pipViewRef}
          mediaStream={stream}
          style={styles.viewer}
          pip={{
            startAutomatically: true,
            stopAutomatically: true,
            enabled: true,
          }}
        />
      ) : (
        <Text style={styles.loading}>Connecting to stream...</Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000",
  },
  viewer: {
    flex: 1,
  },
  loading: {
    color: "#fff",
    textAlign: "center",
    marginTop: 20,
  },
});

```

--------------------------------

### Setup FishjamProvider

Source: https://fishjam.swmansion.com/docs/how-to/client/installation

Wrap your app's root component with FishjamProvider to initialize the Fishjam context. Replace 'your-fishjam-id' with your actual Fishjam ID.

```javascript
import React from "react";
import { FishjamProvider } from "@fishjam-cloud/react-native-client";

// Check https://fishjam.io/app/ for your Fishjam ID
const FISHJAM_ID = "your-fishjam-id";

export default function App() {
  return (
    <FishjamProvider fishjamId={FISHJAM_ID}>
      {/* Your app components */}
    </FishjamProvider>
  );
}
```

--------------------------------

### Obtain Sandbox Viewer Token (React)

Source: https://fishjam.swmansion.com/docs/tutorials/livestreaming

Use this snippet to get a viewer token for a sandbox livestream in a React application. Ensure you have the '@fishjam-cloud/react-client' installed and replace 'your-sandbox-api-url-here' with your actual sandbox API URL.

```javascript
import { useSandbox } from '@fishjam-cloud/react-client';

const SANDBOX_API_URL = 'your-sandbox-api-url-here';
const { getSandboxViewerToken } = useSandbox({ sandboxApiUrl: SANDBOX_API_URL });
const viewerToken = await getSandboxViewerToken('example-room');

```

--------------------------------

### Start Python FastAPI Backend Server

Source: https://fishjam.swmansion.com/docs/tutorials/backend-quick-start

Use the fastapi-cli to run your Python backend server on port 3000.

```bash
fastapi run --port 3000
```

--------------------------------

### Log Connection Status

Source: https://fishjam.swmansion.com/docs/how-to/client/reconnection-handling

This example hook logs the current reconnection status to the console. It uses the `useConnection` hook to get the status and `useEffect` to monitor changes. It's useful for debugging and understanding the reconnection flow.

```typescript
import { useEffect, useRef } from "react";
import {
  ReconnectionStatus,
  useConnection,
} from "@fishjam-cloud/react-native-client";

export function useLogConnectionStatus() {
  const prevStatus = useRef<ReconnectionStatus>("idle");

  const { reconnectionStatus } = useConnection();

  useEffect(() => {
    if (prevStatus.current === reconnectionStatus) return;
    prevStatus.current = reconnectionStatus;

    switch (reconnectionStatus) {
      case "error":
        return console.log("Failed to reconnect");
      case "reconnecting":
        return console.log("Connection is broken, reconnecting...");
      default:
        return console.log("Connected successfully");
    }
  }, [reconnectionStatus]);
}
```

--------------------------------

### Initialize Devices Before Streaming

Source: https://fishjam.swmansion.com/docs/how-to/client/migration-guide

Use `initializeDevices` for initial device setup on mobile. This grants access to all devices and requests necessary permissions. It replaces the older `prepareCamera` method.

```typescript
import { useCamera } from "@fishjam-cloud/react-native-client";

const { prepareCamera } = useCamera();

await prepareCamera({ cameraEnabled: true });
```

```typescript
import { useInitializeDevices } from "@fishjam-cloud/react-native-client";

const { initializeDevices } = useInitializeDevices();

// Initialize devices when you first want to stream
await initializeDevices({ enableAudio: false }); // or initializeDevices() for both audio and video
```

--------------------------------

### Curated Stage & Audience System (Python)

Source: https://fishjam.swmansion.com/docs/how-to/backend/selective-subscriptions

This Python example demonstrates setting up a curated stage and audience. New speakers can be added to the audience's feed by calling `subscribe_peer`.

```python
audience = fishjam_client.create_peer(room.id, PeerOptions(subscribe_mode="manual"))
current_speakers = fishjam_client.get_room(room.id).peers
# audience peer already exists (manual)
for speaker in current_speakers:
    fishjam_client.subscribe_peer(room.id, audience.id, speaker.id)
```

--------------------------------

### Create Peers with Manual Subscription Mode (Python)

Source: https://fishjam.swmansion.com/docs/how-to/backend/selective-subscriptions

Create a conference room and then create peers. Set `subscribe_mode` to 'manual' for subscribers who should not automatically receive media. Peers in 'auto' mode subscribe to everyone by default.

```python
from fishjam import RoomOptions, PeerOptions

room_options = RoomOptions(room_type="conference")
room = fishjam_client.create_room(room_options)

peer_options = PeerOptions(subscribe_mode="manual")
publisher = fishjam_client.create_peer(room.id, peer_options)
viewer = fishjam_client.create_peer(room.id, peer_options)

```

--------------------------------

### Migrate Camera Control: After

Source: https://fishjam.swmansion.com/docs/how-to/client/migration-guide

Demonstrates the updated camera control methods: `startCamera`, `stopCamera`, and `toggleCamera`.

```javascript
import { useCamera } from "@fishjam-cloud/react-native-client";
const { startCamera, stopCamera, toggleCamera } = useCamera();

await startCamera();

await stopCamera();

toggleCamera();

```

--------------------------------

### AgentOptions Initialization

Source: https://fishjam.swmansion.com/docs/api/server-python/fishjam

Initializes AgentOptions with output configuration and peer subscription mode.

```python
def __init__(
    output: AgentOutputOptions = <factory>,
    subscribe_mode: Literal['auto', 'manual'] = 'auto'
)


```

--------------------------------

### Minimal FastAPI Setup with FishjamClient

Source: https://fishjam.swmansion.com/docs/how-to/backend/fastapi-example

Sets up a basic FastAPI application that uses the FishjamClient to fetch all rooms. Ensure FISHJAM_ID and FISHJAM_MANAGEMENT_TOKEN environment variables are set.

```python
import os
from typing import Annotated
from fastapi import Depends, FastAPI
from fishjam import FishjamClient


app = FastAPI()

def fishjam_client():
    fishjam_id = os.environ["FISHJAM_ID"]
    management_token = os.environ["FISHJAM_MANAGEMENT_TOKEN"]
    return FishjamClient(fishjam_id=fishjam_id, management_token=management_token)


@app.get("/")
async def get_rooms(fishjam_client: Annotated[FishjamClient, Depends(fishjam_client)]):
    rooms = fishjam_client.get_all_rooms()
    return {"rooms": rooms}
```

--------------------------------

### Initialize Fishjam Client (Python)

Source: https://fishjam.swmansion.com/docs/tutorials/backend-quick-start

Initialize the Fishjam client with your credentials. Ensure environment variables are set before running.

```python
import os
from fishjam import FishjamClient

fishjam_id = os.environ["FISHJAM_ID"]
management_token = os.environ["FISHJAM_MANAGEMENT_TOKEN"]

fishjam_client = FishjamClient(fishjam_id, management_token)
```

--------------------------------

### Complete Python FastAPI Backend Example

Source: https://fishjam.swmansion.com/docs/tutorials/backend-quick-start

A full Python backend server implementation using FastAPI and the Fishjam SDK to handle room creation and peer joining.

```python
import os
from fastapi import FastAPI, HTTPException
from pydantic import BaseModel
from fishjam import FishjamClient, PeerOptions

app = FastAPI()

fishjam_client = FishjamClient(
    os.environ["FISHJAM_ID"],
    os.environ["FISHJAM_MANAGEMENT_TOKEN"]
)

class JoinRoomRequest(BaseModel):
    room_name: str
    peer_name: str

@app.post("/join-room")
async def join_room(request: JoinRoomRequest):
    try:
        room = fishjam_client.create_room()
        options = PeerOptions(metadata={"name": request.peer_name})
        peer, peer_token = fishjam_client.create_peer(room.id, options=options)

        return {
            "room_id": room.id,
            "peer_token": peer_token
        }
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))

```

--------------------------------

### InitializeDevicesSettings

Source: https://fishjam.swmansion.com/docs/api/mobile/type-aliases/InitializeDevicesSettings

Represents the settings for initializing media devices, with optional flags for enabling audio and video.

```APIDOC
## Type Alias: InitializeDevicesSettings

> **InitializeDevicesSettings** = `object`

### Description

This type alias defines an object used to configure initial settings for media devices. It allows for optional specification of whether to enable audio and video.

### Properties

#### enableAudio

> `optional` **enableAudio** : `boolean`

If true, audio will be enabled. This property is optional.

#### enableVideo

> `optional` **enableVideo** : `boolean`

If true, video will be enabled. This property is optional.
```

--------------------------------

### initializeDevices()

Source: https://fishjam.swmansion.com/docs/api/mobile/type-aliases/UseInitializeDevicesReturn

Initializes devices and returns a Promise that resolves with the InitializeDevicesResult. This function accepts a variable number of arguments.

```APIDOC
## initializeDevices()

### Description
Initializes devices and returns a Promise that resolves with the InitializeDevicesResult. This function accepts a variable number of arguments.

### Signature
`initializeDevices(...args: Parameters<ReturnType<typeof useInitializeDevicesReactClient>["initializeDevices"]>) => Promise<InitializeDevicesResult>`

### Parameters
#### Arguments
- **...args**: `Parameters<ReturnType<typeof useInitializeDevicesReactClient>["initializeDevices"]>` - A variable number of arguments required by the underlying initializeDevices function.

### Returns
- **Promise<InitializeDevicesResult>** - A promise that resolves with the result of the device initialization.
```

--------------------------------

### Migrate Connection API: Before

Source: https://fishjam.swmansion.com/docs/how-to/client/migration-guide

Shows the previous method for joining a room using `useConnection` and `useSandbox`.

```javascript
import { useConnection, useSandbox } from "@fishjam-cloud/react-native-client";

const { joinRoom } = useConnection();
const { getSandboxPeerToken } = useSandbox({ fishjamId: "your-id" });

const peerToken = await getSandboxPeerToken("roomName", "peerName");
await joinRoom({ fishjamId: "your-id", peerToken });

```

--------------------------------

### Install Client with pnpm

Source: https://fishjam.swmansion.com/docs/how-to/client/installation

Use this command to install the Fishjam React Native client and react-native-get-random-values using pnpm.

```bash
pnpm add @fishjam-cloud/react-native-client react-native-get-random-values@1.11.0
```

--------------------------------

### Install Client with Yarn

Source: https://fishjam.swmansion.com/docs/how-to/client/installation

Use this command to install the Fishjam React Native client and react-native-get-random-values using Yarn.

```bash
yarn add @fishjam-cloud/react-native-client react-native-get-random-values@1.11.0
```

--------------------------------

### AgentOutputOptions Initialization

Source: https://fishjam.swmansion.com/docs/api/server-python/fishjam

Initializes AgentOutputOptions with audio format and sample rate.

```python
def __init__(
    audio_format: Literal['pcm16'] = 'pcm16',
    audio_sample_rate: Literal[16000, 24000] = 16000
)


```

--------------------------------

### Install React Native WebRTC Background Blur (pnpm)

Source: https://fishjam.swmansion.com/docs/examples/react-native

Installs the background blur package for React Native using pnpm.

```bash
pnpm add @fishjam-cloud/react-native-webrtc-background-blur
```

--------------------------------

### Initialize Fishjam Client (Python)

Source: https://fishjam.swmansion.com/docs/how-to/backend/server-setup

Create and verify credentials for the Fishjam client in Python. This ensures that your `fishjam_id` and `management_token` are valid upon startup.

```python
import os
from fishjam import FishjamClient

fishjam_client = FishjamClient.create_and_verify(
    fishjam_id=os.environ["FISHJAM_ID"],
    management_token=os.environ["FISHJAM_MANAGEMENT_TOKEN"],
)

# The above is roughly equivalent to:
fishjam_client = FishjamClient(...)
fishjam_client.check_credentials()
```

--------------------------------

### PeerOptions Initialization

Source: https://fishjam.swmansion.com/docs/api/server-python/fishjam

Constructor for PeerOptions, allowing configuration of metadata and subscribe mode.

```python
def __init__(
    metadata: dict[str, typing.Any] | None = None,
    subscribe_mode: Literal['auto', 'manual'] = 'auto'
)
```

--------------------------------

### Create Room and Peer (Python)

Source: https://fishjam.swmansion.com/docs/tutorials/agents

Initializes the Fishjam client and creates a room and a peer. Ensure you have a working backend server before using agents.

```python
from fishjam import FishjamClient

fishjam_client = FishjamClient(fishjam_id, management_token)
room = fishjam_client.create_room()
peer = fishjam_client.create_peer(room.id)

```

--------------------------------

### Install Fishjam React Native Client with pnpm

Source: https://fishjam.swmansion.com/docs/tutorials/react-native-quick-start

Use this command to install the Fishjam React Native client package using pnpm.

```bash
pnpm add @fishjam-cloud/react-native-client
```

--------------------------------

### Install Fishjam React Native Client with Yarn

Source: https://fishjam.swmansion.com/docs/tutorials/react-native-quick-start

Use this command to install the Fishjam React Native client package using Yarn.

```bash
yarn add @fishjam-cloud/react-native-client
```

--------------------------------

### Install Fishjam React Native Client with npm

Source: https://fishjam.swmansion.com/docs/tutorials/react-native-quick-start

Use this command to install the Fishjam React Native client package using npm.

```bash
npm install @fishjam-cloud/react-native-client
```

--------------------------------

### Install Node.js SDK with pnpm

Source: https://fishjam.swmansion.com/docs/tutorials/backend-quick-start

Install the JavaScript server SDK using pnpm. This is another package manager option for Node.js projects.

```bash
pnpm add @fishjam-cloud/js-server-sdk
```

--------------------------------

### Migrate Connection API: After

Source: https://fishjam.swmansion.com/docs/how-to/client/migration-guide

Illustrates the updated approach for joining a room, utilizing a sandbox API URL and passing `fishjamId` via `FishjamProvider`.

```javascript
import { useConnection, useSandbox } from "@fishjam-cloud/react-native-client";

const { joinRoom } = useConnection();
const sandboxApiUrl = "your-sandbox-api-url-here";
const { getSandboxPeerToken } = useSandbox({ sandboxApiUrl });

const peerToken = await getSandboxPeerToken("roomName", "peerName");
await joinRoom({ peerToken }); // fishjamId passed through FishjamProvider

```

--------------------------------

### Manual Picture-in-Picture Control

Source: https://fishjam.swmansion.com/docs/how-to/client/picture-in-picture

Provides manual control over Picture-in-Picture start and stop using the startPIP and stopPIP functions with a ref. Disables automatic PiP start.

```javascript
import React, { useRef } from "react";
import { Button, View } from "react-native";
import {
  RTCPIPView,
  startPIP,
  stopPIP,
  useCamera,
} from "@fishjam-cloud/react-native-client";

export function VideoCallScreen() {
  const pipViewRef = useRef<React.ElementRef<typeof RTCPIPView>>(null);
  const { cameraStream } = useCamera();

  const handleStartPip = () => {
    startPIP(pipViewRef as any);
  };

  const handleStopPip = () => {
    stopPIP(pipViewRef as any);
  };

  return (
    <View>
      <Button title="Start PiP" onPress={handleStartPip} />
      <Button title="Stop PiP" onPress={handleStopPip} />
      {cameraStream && (
        <RTCPIPView
          ref={pipViewRef}
          mediaStream={cameraStream}
          style={{ width: 300, height: 200 }}
          pip={{
            startAutomatically: false, // Disable automatic PiP
            stopAutomatically: true,
            enabled: true,
          }}
        />
      )}
    </View>
  );
}

```

--------------------------------

### Migrate Camera Device Selection: Before

Source: https://fishjam.swmansion.com/docs/how-to/client/migration-guide

Demonstrates the previous method for switching cameras based on facing direction using `useCamera`.

```javascript
import { useCamera } from "@fishjam-cloud/react-native-client";

const { cameras, switchCamera, currentCamera } = useCamera();

// find first camera facing opposite direction than current camera
const otherCamera = cameras.find(
  (camera) => camera.facingDirection !== currentCamera?.facingDirection,
);
if (otherCamera) {
  switchCamera(otherCamera.id);
}

```

--------------------------------

### Install Client and WebRTC with pnpm (Expo SDK 54+)

Source: https://fishjam.swmansion.com/docs/how-to/client/installation

For Expo SDK 54+, install the Fishjam React Native client, WebRTC module, and react-native-get-random-values using pnpm.

```bash
pnpm add @fishjam-cloud/react-native-client @fishjam-cloud/react-native-webrtc react-native-get-random-values@1.11.0
```

--------------------------------

### Install Client and WebRTC with Yarn (Expo SDK 54+)

Source: https://fishjam.swmansion.com/docs/how-to/client/installation

For Expo SDK 54+, install the Fishjam React Native client, WebRTC module, and react-native-get-random-values using Yarn.

```bash
yarn add @fishjam-cloud/react-native-client @fishjam-cloud/react-native-webrtc react-native-get-random-values@1.11.0
```

--------------------------------

### Migrate Screen Sharing: After

Source: https://fishjam.swmansion.com/docs/how-to/client/migration-guide

This is the new way to handle screen sharing, using `startStreaming` and `stopStreaming`.

```javascript
import { useScreenShare } from "@fishjam-cloud/react-native-client";

const { startStreaming, stopStreaming, stream } = useScreenShare();

const onPressToggle = () => {
  if (stream) {
    stopStreaming();
  } else {
    startStreaming();
  }
};

<Button onPress={onPressToggle} title={stream ? "Disable" : "Enable"} />;
```

--------------------------------

### Install Client and WebRTC with npm (Expo SDK 54+)

Source: https://fishjam.swmansion.com/docs/how-to/client/installation

For Expo SDK 54+, install the Fishjam React Native client, WebRTC module, and react-native-get-random-values using npm.

```bash
npm install @fishjam-cloud/react-native-client @fishjam-cloud/react-native-webrtc react-native-get-random-values@1.11.0
```

--------------------------------

### Get MediaStream from Smelter

Source: https://fishjam.swmansion.com/docs/how-to/client/custom-sources

If using the Smelter library, register an output with `registerOutput` and specify the output type as 'stream' to get a MediaStream. Ensure the Wasm bundle URL is set before initializing Smelter.

```javascript
import React from "react";
import Smelter, { setWasmBundleUrl } from "@swmansion/smelter-web-wasm";
import { View } from "@swmansion/smelter";

setWasmBundleUrl("/assets/smelter.wasm");

async function run() {
  const smelter = new Smelter({ framerate: 30 });
  const { stream } = await smelter.registerOutput("example-output", <View />, {
    type: "stream",
    video: {
      resolution: { width: 1920, height: 1080 },
    },
  });
  await smelter.init();
}

```

--------------------------------

### Initialize Fishjam and Gemini Clients (Python)

Source: https://fishjam.swmansion.com/docs/integrations/gemini-live-integration

Initializes the Fishjam client and the Gemini integration client using environment variables for authentication.

```python
import os
from fishjam import FishjamClient
from fishjam.integrations.gemini import GeminiIntegration

fishjam_client = FishjamClient(
    fishjam_id=os.environ["FISHJAM_ID"],
    management_token=os.environ["FISHJAM_TOKEN"]
)

# pass standard Google client kwargs here
gen_ai = GeminiIntegration.create_client(api_key=os.environ["GOOGLE_API_KEY"])

```
Tokens:
Raw