Skip to main content
Version: Next

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 Fishjam ID​

  1. Log in to Fishjam Dashboard
  2. Navigate to your Sandbox environment
  3. Copy your Fishjam ID

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 Fishjam ID
const FISHJAM_ID = "YOUR_FISHJAM_ID";

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

  const startStreaming = useCallback(async () => {
    // In sandbox environment, you can get the peer token from our sandbox API
    // In production environment, you need to get it from your backend
    const peerToken = await getSandboxPeerToken(roomName, peerName);

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

    // Join the room
    await joinRoom({ peerToken, fishjamId: FISHJAM_ID });
  }, [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 [peerToken, setPeerToken] = useState<string | null>(null);
  const { getSandboxPeerToken } = useSandbox({ fishjamId: FISHJAM_ID });

  useEffect(() => {
    const fetchPeerToken = async () => {
      try {
        const peerToken = await getSandboxPeerToken(roomName, peerName);
        setPeerToken(peerToken);
      } catch (_) {
        setPeerToken(null);
      }
    };
    fetchPeerToken();
  }, []);

  if (!peerToken) {
    return null;
  }

  return <FishjamRoom fishjamUrl={fishjamUrl} peerToken={peerToken} />;
}

Next steps​

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

Or learn more about Fishjam concepts: