in src/frontends/live_api_react/frontend/src/hooks/use-webcam.ts [20:69]
export function useWebcam(): UseMediaStreamResult {
const [stream, setStream] = useState<MediaStream | null>(null);
const [isStreaming, setIsStreaming] = useState(false);
useEffect(() => {
const handleStreamEnded = () => {
setIsStreaming(false);
setStream(null);
};
if (stream) {
stream
.getTracks()
.forEach((track) => track.addEventListener("ended", handleStreamEnded));
return () => {
stream
.getTracks()
.forEach((track) =>
track.removeEventListener("ended", handleStreamEnded),
);
};
}
}, [stream]);
const start = async () => {
const mediaStream = await navigator.mediaDevices.getUserMedia({
video: true,
});
setStream(mediaStream);
setIsStreaming(true);
return mediaStream;
};
const stop = () => {
if (stream) {
stream.getTracks().forEach((track) => track.stop());
setStream(null);
setIsStreaming(false);
}
};
const result: UseMediaStreamResult = {
type: "webcam",
start,
stop,
isStreaming,
stream,
};
return result;
}