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

Install @fishjam-cloud/mobile-client with your preferred package manager.

npm

npm install @fishjam-cloud/mobile-client

Yarn

yarn add @fishjam-cloud/mobile-client

pnpm

pnpm add @fishjam-cloud/mobile-client

Bun

bun add @fishjam-cloud/mobile-client

Step 2: Configure App Permissions

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

Android

Permissions below are required to stream audio and video with Fishjam on Android.

• android.permission.CAMERA
• android.permission.RECORD_AUDIO
• android.permission.MODIFY_AUDIO_SETTINGS
• android.permission.ACCESS_NETWORK_STATE
• android.permission.ACCESS_WIFI_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",
        "android.permission.ACCESS_WIFI_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_SETTING"/>
  ...
</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/mobile-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 as they're automatically asked for when your app needs them.

The SDK automatically requests camera and microphone permissions when you call initializeDevices(). The system permission dialog will be shown to the user if permissions haven't been granted yet.

If you need manual control over permissions, you can use the expo-permissions or react-native-permissions libraries.