Connecting

This article will guide you through the process of connecting to a Fishjam room.

Getting URL and token

In order to connect, you need to obtain a Peer Token (the token that will authenticate the peer in your Room).

Sandbox API

Once you create your account on Fishjam, you can use the Sandbox API to generate peer tokens for testing or development purposes without setting up your own backend. This is basically a service that will create a Room, add your app as the Room's Peer, and return the token required to use that Room. It is available to all accounts, including the free Mini Jar plan. For React/React Native apps, copy both the Fishjam ID from the Dashboard tab and Sandbox API URL from the Sandbox tab: the Sandbox API URL is used to get peer tokens, while the Fishjam ID is passed to FishjamProvider for media server access.

React (Web)

const { getSandboxPeerToken } = useSandbox({ sandboxApiUrl: SANDBOX_API_URL });
const peerToken = await getSandboxPeerToken(roomName, peerName);

React Native (Mobile)

const { getSandboxPeerToken } = useSandbox({ sandboxApiUrl: SANDBOX_API_URL });
const peerToken = await getSandboxPeerToken(roomName, peerName);

Own Backend

For production, you need to implement your own backend service that will provide the user with a Peer Token. To do that, follow our server setup instructions. The Standard Jar plan is recommended for production deployments.

Connecting

Use the useConnection hook to get the joinRoom function.

React (Web)

import { useConnection, useSandbox } from "@fishjam-cloud/react-client";
import React, { useCallback } from "react";

export function JoinRoomButton() {
  const { joinRoom } = useConnection();
  // get the peer token from sandbox or your backend
  const { getSandboxPeerToken } = useSandbox({
    sandboxApiUrl: SANDBOX_API_URL,
  });

  const onJoinRoomPress = useCallback(async () => {
    const peerToken = await getSandboxPeerToken("Room", "User");
    await joinRoom({ peerToken });
  }, [joinRoom, getSandboxPeerToken]);

  return <button onClick={onJoinRoomPress}>Join room</button>;
}

React Native (Mobile)

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

const SANDBOX_API_URL = "your-sandbox-api-url-here";

export function JoinRoomButton() {
  const { joinRoom } = useConnection();
  // get the peer token from sandbox or your backend
  const { getSandboxPeerToken } = useSandbox({
    sandboxApiUrl: SANDBOX_API_URL,
  });

  const onPressJoin = useCallback(async () => {
    // in production apps, get the peerToken from your own backend instead
    const peerToken = await getSandboxPeerToken("Room", "User");

    await joinRoom({ peerToken });
  }, [joinRoom, getSandboxPeerToken]);

  return <Button onPress={onPressJoin} title="Join Room" />;
}

Disconnecting

In order to close connection, use the leaveRoom method from useConnection hook.

React (Web)

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

export function LeaveRoomButton() {
  const { leaveRoom } = useConnection();

  return <button onClick={leaveRoom}>Leave room</button>;
}

React Native (Mobile)

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

export function LeaveRoomButton() {
  const { leaveRoom } = useConnection();

  const onPressLeave = useCallback(async () => {
    await leaveRoom();
  }, [leaveRoom]);

  return <Button onPress={onPressLeave} title="Leave Room" />;
}

Next Steps

Now that you're connected to a room, you can explore additional features:

• Start Streaming - Enable your camera and microphone
• List Other Peers - Display video from other participants
• Data Channels - Send and receive arbitrary data between peers (e.g., text chat)
• Picture in Picture - Allow users to watch video in a floating window (Mobile)
• Background Calls - Keep calls active when the app is backgrounded (Mobile)