Skip to main content

Tutorial: React Native Quick Start

This tutorial will guide you through integrating Fishjam into your React Native application step by step.
By the end, you'll have a working video streaming app and understand the core concepts.

What you'll build​

A simple React Native app that can join conference calls and stream audio/video between participants.

What you'll learn​

  • How to install and configure Fishjam SDK
  • How to join a room and start streaming
  • How to display video and play audio from other participants
  • How to check connection status

Prerequisites​

Step 1: Install and configure​

Install the package​

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

Build native dependencies​

npx expo prebuild

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

Add required permissions to the app.json file.

{
  "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:

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

Get your Room Manager URL​

  1. Log in to Fishjam Dashboard
  2. Navigate to your Sandbox environment
  3. Copy your Room Manager URL - you'll need this for testing

Step 2: Join a room and start streaming​

Create a component that joins a room and starts streaming video:

// Check https://fishjam.io/app for your Room Manager ID
const ROOM_MANAGER_ID = "YOUR_ROOM_MANAGER_ID";

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

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

    // Prepare camera
    await prepareCamera({ cameraEnabled: true });

    // Join the room
    await joinRoom({ url, peerToken });
  }, [joinRoom, prepareCamera, roomName, peerName]);

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

This won't work on the iOS Simulator, as the Simulator can't access the camera. Test on a real device.

Step 3: Check connection status​

Monitor your connection status:

export function ConnectionStatus() {
  const { peerStatus } = useConnection();

  return <Text>Status: {peerStatus}</Text>;
}

Step 4: Display other participants​

Show video from other peers in the room:

export function ParticipantsView() {
  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>
  );
}

Complete example​

Here's a complete working example:

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/${ROOM_MANAGER_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} />
  );
}

Next steps​

Now that you have a basic app working, explore these how-to guides:

Or learn more about Fishjam concepts: