Skip to main content

Livestreaming

This section provides examples on how to quickly set up livestreaming in React using Fishjam.
You can learn more about livestreaming in Fishjam in our documentation.

How to start streaming?​

Prerequisites​

To start streaming, simply join the livestream room and stream as you normally would.

note

Livestreaming scenario allows only one video and one audio track to be sent at a time.
Any additional tracks will be ignored and will not be available to the viewers.

How to receive the stream?​

Prerequisites​

  • A peer connected and streaming in a room of livestream type
  • A viewer token generated for that room

Fishjam SDK provides the useLivestream hook to receive the broadcasted stream. The useLivestream hook will provide a MediaStream object once the connection with Fishjam is established.

import { useLivestream } from "@fishjam-cloud/react-client";

interface LivestreamProps {
  viewerToken: string;
}

const FISHJAM_LIVESTREAM_URL = "https://fishjam.io/api/v1/live";

export function Livestream({ viewerToken }: LivestreamProps) {
  const videoRef = useRef<HTMLVideoElement>(null);

  const { connect, disconnect, stream } = useLivestream();

  useEffect(() => {
    if (!videoRef.current) return;
    videoRef.current.srcObject = stream ?? null;
  }, [stream]);

  useEffect(() => {
    connect({
      url: FISHJAM_LIVESTREAM_URL,
      token: viewerToken,
    });

    return () => {
      disconnect();
    };
  }, [connect, disconnect, viewerToken]);

  // stream is null until the connection is established
  if (!stream) return null;

  return <video ref={videoRef} autoPlay />
}