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.