Installation

React (Web)

1. Install the package

npm

npm install @fishjam-cloud/react-client

Yarn

yarn add @fishjam-cloud/react-client

pnpm

pnpm add @fishjam-cloud/react-client

Bun

bun add @fishjam-cloud/react-client

2. Setup Fishjam context

Wrap your app in our FishjamProvider component. Get your Fishjam ID from Fishjam Dashboard and pass it to the provider.

import React from "react";
import ReactDOM from "react-dom/client";
// import App from "./App";
import { FishjamProvider } from "@fishjam-cloud/react-client";

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

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <FishjamProvider fishjamId={FISHJAM_ID}>
      <App />
    </FishjamProvider>
  </React.StrictMode>,
);

tip

It's possible to have many independent Fishjam contexts in one app.
Just render many FishjamProvider components and make sure they don't overlap.

React Native (Mobile)

Optional: Create a New App

Follow these steps to create a new mobile app

If you don't have an existing project, you can create a new Expo app using a template

npx create-expo-app@latest my-video-app

As the next step, you have to generate native files with the expo prebuild command:

npx expo prebuild

You can also follow more detailed Expo instructions.

Step 1: Install the Package

Expo (SDK 54+)

Install @fishjam-cloud/react-native-client and react-native-get-random-values with your preferred package manager.

npm

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

Yarn

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

pnpm

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

Bun

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

Expo SDK 54+ resolves native dependencies recursively, so @fishjam-cloud/react-native-webrtc (a transitive dependency) is autolinked automatically.

Bare React Native / Expo SDK < 54

Install @fishjam-cloud/react-native-client, @fishjam-cloud/react-native-webrtc, and react-native-get-random-values:

npm

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

Yarn

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

pnpm

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

Bun

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

Bare React Native and Expo SDK versions below 54 only autolink direct dependencies. @fishjam-cloud/react-native-webrtc must be in your app's package.json for its native code to be linked.

Step 2: Configure App Permissions

Your app needs to have permissions configured in order to use the microphone and camera.

Android

The following Android permissions are required by Fishjam:

• android.permission.CAMERA
• android.permission.RECORD_AUDIO
• android.permission.MODIFY_AUDIO_SETTINGS
• android.permission.ACCESS_NETWORK_STATE

Expo

Add required permissions to the app.json file.

{
  "expo": {
    ...
    "android": {
      ...
      "permissions": [
        "android.permission.CAMERA",
        "android.permission.RECORD_AUDIO",
        "android.permission.MODIFY_AUDIO_SETTINGS",
        "android.permission.ACCESS_NETWORK_STATE"
      ]
    }
  }
}

Bare workflow

Add required permissions to the AndroidManifest.xml file.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  ...
  <uses-permission android:name="android.permission.CAMERA"/>
  <uses-permission android:name="android.permission.RECORD_AUDIO"/>
  <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
  ...
</manifest>

iOS

Expo

You don't have to make any changes to run app on iOS. To update default content of permission alert, you can add these settings to app.json:

{
  "expo": {
    ...
   "ios": {
      ...
      "infoPlist": {
        "NSCameraUsageDescription": "Allow $(PRODUCT_NAME) to access your camera.",
        "NSMicrophoneUsageDescription": "Allow $(PRODUCT_NAME) to access your microphone."
      }
    },
  }
}

Bare workflow

Ensure Info.plist contains camera and microphone usage description entries:

    <key>NSCameraUsageDescription</key>
    <string>Allow $(PRODUCT_NAME) to access your camera.</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>Allow $(PRODUCT_NAME) to access your microphone.</string>

Step 3: Setup Fishjam Context

Wrap your app in the FishjamProvider component:

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>
  );
}

Camera and Microphone Permissions

info

You don't need to explicitly request permissions — they're automatically requested when your app calls initializeDevices().

If you need manual control over when permissions are requested, see Managing Permissions.