@jellyfish-dev/browser-media-utils/dist/useMedia.js

Facilitates the use of getUserMedia and enumerateDevices.

import { useCallback, useEffect, useState } from "react";
import { NOOP } from "./utils";
const defaultState = {
    isError: false,
    stream: null,
    isLoading: false,
    start: NOOP,
    stop: NOOP,
    isEnabled: true,
    disable: NOOP,
    enable: NOOP,
};
const stopTracks = (stream) => {
    stream.getTracks().forEach((track) => {
        track.stop();
    });
};
/**
 * Hook that returns media stream and methods to control it, depending on the passed method.
 *
 * @param getMedia - Promise that returns a promise with MediaStream
 * @returns object containing information about the media stream and methods to control it
 */
export const useMedia = (getMedia) => {
    const [state, setState] = useState(defaultState);
    const start = useCallback((getMedia) => {
        const setEnable = (stream, status) => {
            stream?.getTracks().forEach((track) => {
                track.enabled = status;
            });
            setState((prevState) => ({
                ...prevState,
                isEnabled: status,
            }));
        };
        setState((prevState) => ({ ...prevState, isLoading: true }));
        return getMedia()
            .then((mediasStream) => {
            const stop = () => {
                stopTracks(mediasStream);
                setState((prevState) => ({
                    ...prevState,
                    stop: NOOP,
                    start: () => start(getMedia),
                    stream: null,
                    isEnabled: false,
                    disable: NOOP,
                    enable: NOOP,
                }));
            };
            setState((prevState) => {
                return {
                    ...prevState,
                    isLoading: false,
                    stream: mediasStream,
                    start: NOOP,
                    stop: stop,
                    disable: () => setEnable(mediasStream, false),
                    enable: () => setEnable(mediasStream, true),
                    isEnabled: true,
                };
            });
            return mediasStream;
        })
            .catch((e) => {
            setState((prevState) => ({
                ...prevState,
                isLoading: false,
                isError: true,
                isEnabled: false,
                disable: NOOP,
                enable: NOOP,
            }));
            return Promise.reject(e);
        });
    }, []);
    useEffect(() => {
        if (!getMedia)
            return;
        const result = start(getMedia);
        return () => {
            result.then((mediaStream) => {
                stopTracks(mediaStream);
                setState((prevState) => ({
                    ...prevState,
                    stop: NOOP,
                    start: () => start(getMedia),
                    stream: null,
                }));
            });
        };
    }, [getMedia, start]);
    return state;
};