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 App

Once you create your account on Fishjam, you will have access to the Sandbox environment as part of the Mini Jar plan. While using the Sandbox environment, you can use the Sandbox API to generate peer tokens for testing or development purposes. 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.

React (Web)

// The `useSandbox` hook gets the fishjamId from FishjamProvider
// It will work ONLY with the FISHJAM_ID of the Sandbox environment
const { getSandboxPeerToken } = useSandbox();
const peerToken = await getSandboxPeerToken(roomName, peerName);

React Native (Mobile)

// The `useSandbox` hook gets the fishjamId from FishjamProvider
// It will work ONLY with the FISHJAM_ID of the Sandbox environment
const { getSandboxPeerToken } = useSandbox();
const peerToken = await getSandboxPeerToken(roomName, peerName);

Production App

For the production app, 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.

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();

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

  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/mobile-client";

export function JoinRoomButton() {
  const { joinRoom } = useConnection();
  // fishjamId is provided through FishjamProvider
  const { getSandboxPeerToken } = useSandbox();

  const onPressJoin = useCallback(async () => {
    // in production environment, get the peerToken from your backend
    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/mobile-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
• Picture in Picture - Allow users to watch video in a floating window (Mobile)
• Background Streaming - Keep calls active when the app is backgrounded (Mobile)