@fishjam-cloud/react-client/dist/hooks/useLivestreamViewer.js

React client library for Fishjam

import { LivestreamError, receiveLivestream } from "@fishjam-cloud/ts-client";
import { useCallback, useRef, useState } from "react";
import { useFishjamId } from "../contexts/fishjamId";
import { buildLivestreamWhepUrl } from "../utils/fishjamUrl";
const isLivestreamError = (err) => Object.values(LivestreamError).includes(err);
const urlFromConfig = (config, baseUrl) => {
    if (config.streamId)
        return `${baseUrl}/${config.streamId}`;
    return baseUrl;
};
/**
 * Hook for receiving a published livestream.
 * @category Livestream
 * @group Hooks
 */
export const useLivestreamViewer = () => {
    const [stream, setStream] = useState(null);
    const [error, setError] = useState(null);
    const resultRef = useRef(null);
    const [isConnected, setIsConnected] = useState(false);
    const isConnectedRef = useRef(false);
    const fishjamId = useFishjamId();
    const disconnect = useCallback(() => {
        setStream(null);
        resultRef.current?.stop();
        resultRef.current = null;
    }, []);
    const onConnectionStateChange = useCallback((pc) => {
        if (isConnectedRef.current && pc.connectionState !== "connected") {
            disconnect();
        }
        const connected = pc.connectionState === "connected";
        isConnectedRef.current = connected;
        setIsConnected(connected);
    }, [disconnect]);
    const connect = useCallback(async (config, url) => {
        if (resultRef.current !== null)
            disconnect();
        try {
            const baseUrl = buildLivestreamWhepUrl(fishjamId);
            const result = await receiveLivestream(url ?? urlFromConfig(config, baseUrl), config.token, {
                onConnectionStateChange,
            });
            resultRef.current = result;
            setError(null);
            setStream(result.stream);
        }
        catch (e) {
            if (isLivestreamError(e))
                setError(e);
        }
    }, [disconnect, onConnectionStateChange, fishjamId]);
    const getStatistics = useCallback(async () => resultRef.current?.getStatistics(), []);
    return { stream, connect, disconnect, error, isConnected, getStatistics };
};