Skip to main content

Quick Setup

This article is a fast track to integrate Fishjam into your React Native application.
It contains all the required steps to start streaming video with Fishjam.
You can also see a full example at the end of the article.

Prerequisites​

In this part, let's focus on everything you need to prepare to use Fishjam in your project.

1. Install the package​

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

2. Build native dependencies​

npx expo prebuild

3. Configure required 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

Add required permissions to the app.json file.

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

iOS​

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:

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

4. Get Room Manager URL​

Log in to Fishjam Dashboard and get your Room Manager URL.

Step-by-step instructions​

Now you are good to jump right into your IDE and integrate Fishjam into your app. In a few simple steps, you will be able to implement a simple video call functionality.

1. Fetch peer token​

Use your Room Manager URL to fetch a peer token to get a new room:

const response = await fetch(
  `https://fishjam.io/api/v1/connect/${YOUR_ID}/room-manager/?roomName=${roomName}&peerName=${peerName}`,
);

const { url, peerToken } = await response.json();

2. Join Room and start streaming​

danger

If you want to use the camera, you must first request permission. Check permission guide for more information.

important

Keep in mind that this won't work on the iOS Simulator, as the Simulator can't access the camera.

To start streaming, you have to prepare your camera and join the room:

import { useCallback } from "react";
import { Button } from "react-native";
import { useCamera, useConnection } from "@fishjam-cloud/react-native-client";

export function StartStreamingButton({
  roomName,
  peerName,
}: {
  roomName: string;
  peerName: string;
}) {
  const { prepareCamera } = useCamera();
  const { joinRoom } = useConnection();

  const startStreaming = useCallback(async () => {
    const response = await fetch(
      `https://fishjam.io/api/v1/connect/${YOUR_ID}/room-manager/?roomName=${roomName}&peerName=${peerName}`,
    );
    const { url, peerToken } = await response.json();

    await prepareCamera({ cameraEnabled: true });

    await joinRoom({ url, peerToken });
  }, [joinRoom, prepareCamera, roomName, peerName]);

  return <Button title="Start Streaming" onPress={startStreaming} />;
}

3. Check if you are connected​

Once you are connected, you can check the connection status with useConnection hook

const { peerStatus } = useConnection();

4. Show other peers​

note

In order to get peers, you must first join a room. See the steps above.

Fetching other peers in your room can be done with the usePeers hook. To display their video stream, you can use the VideoRendererView component. Example code could look like this:

import {
  usePeers,
  VideoRendererView,
} from "@fishjam-cloud/react-native-client";
import { View } from "react-native";

export function TracksView() {
  const { remotePeers } = usePeers();

  const videoTracks = remotePeers.flatMap((peer) =>
    peer.tracks.filter((track) => track.type === "Video" && track.isActive),
  );

  return (
    <View>
      {videoTracks.map((track) => (
        <VideoRendererView
          key={track.id}
          trackId={track.id}
          videoLayout="FIT"
        />
      ))}
    </View>
  );
}

Full example​

Here is how it all could work together:

info

We are using expo-camera to request camera permissions in the example app. You can install and build it using the following command:

npx expo install expo-camera && npx expo prebuild
import { useEffect, useState } from "react";
import { FishjamRoom } from "@fishjam-cloud/react-native-client";

type RoomData = {
  url: string;
  peerToken: string;
};

const roomName = "testRoom";
const peerName = `testUser_${(Math.random() * 100).toFixed()}`;

export default function HomeScreen() {
  const [roomData, setRoomData] = useState<RoomData | null>(null);

  useEffect(() => {
    const fetchRoomData = async () => {
      try {
        const response = await fetch(
          `https://fishjam.io/api/v1/connect/*YOUR_ID*/room-manager?roomName=${roomName}&peerName=${peerName}`,
        );
        const responseData = await response.json();
        setRoomData(responseData);
      } catch (_) {
        setRoomData(null);
      }
    };
    fetchRoomData();
  }, []);

  if (!roomData) {
    return null;
  }

  return (
    <FishjamRoom fishjamUrl={roomData.url} peerToken={roomData.peerToken} />
  );
}