• Docs
  • Web SDK
  • Store States
  • Mic

Mic States

Lets you access the micStream of the client user. These values are exposed as a micStates property on the client.

Mic Store

type IMicSlice = {
    micState: {
        stream: MediaStream | null;
        mediaDevice: MediaDeviceInfo | null;
        streamError: {
            type: IMediErrorType;
            blocked: boolean;
        } | null;
        deviceLoading: boolean;
    };
    audioDevices: MediaDeviceInfo[]
}

stream - The current stream of the client user.
mediaDevice - The current device that is being used by the client user.
streamError - The current error that is being thrown by the client user's microphone.
deviceLoading - A boolean that is true if the client user's microphone is loading and false if it is not.
audioDevices - An array of all the audio devices that are available to the client user.

streamError

This is the error that is thrown when the stream is not available. The error has two properties, type and blocked. possible case for this to occur might be if user denied permission to access the microphone or if the microphone is not available.

NOTE: The blocked property is available if any of the error cases occur.

type - The type of error that is thrown.

  • NotAllowedError - The user has denied permission to access the camera.
  • NotFoundError - The camera is not available.
  • NotReadableError - The camera is already in use.
  • OverconstrainedError - The camera is not available.
  • SecurityError - The camera is not available.
  • AbortError - The camera is not available.
  • NotSupportedError - The camera is not available.
  • TypeError - The camera is not available.

Example

Example

You can access the camera state using the useMeCamTrack hook.

import { useHuddleStore, useMeCamTrack } from "huddle01-client/hooks";
 
interface Props {
    peerId: string;
}
 
const Component = ({ peerId }) => {
    const audioElem = useRef<HTMLAudioElement>(null);
    const isMicPaused = useHuddleStore(state => state.isMicPaused);
    const deviceId = useRootStore(state => state.activeSpeaker?.deviceId);
    const myMicTrack = useMeMicTrack(peerId);
 
    const getStream = (_track: MediaStreamTrack) => {
        const stream = new MediaStream();
        stream.addTrack(_track);
        return stream;
    };
 
    useEffect(() => {
            const audioRef = audioElem.current;
 
            if (myMicTrack && audioRef) {
            audioRef.load();
            audioRef.srcObject = getStream(myMicTrack);
            }
 
            if (audioElement && typeof deviceId === 'string') {
                audioElement.setSinkId(deviceId);
            }
 
            return () => {
            if (audioRef) {
                audioRef.srcObject = null;
            }
        };
    }, [audioElement, deviceId, myMicTrack]);
 
    return (
        <div>
            {isMicPaused ? "Paused" : "Not Paused"}
            {isMicPaused ?  <audio
                id="peerAudio"
                autoPlay
                playsInline
                controls={false}
                ref={audioElem}
            /> : null}
            ...
        <div />
    )
}

NOTE: Doing this will subscribe isCamPaused, myCamStream state to that component and will re-render the component when the state changes.
Pro Tip: You dont need to add useEffect to subscribe to the state and change certains states based on this, it is already done for you.

CameraChat