Webcam Stream doesn't stop on component unmount

[MatejFacko]

Packages used for development

React - v18.1.0
Typescript - v4.6.4
React useFaceDetection - v1.0.1

Device:
Any device

Browser and version
Any browser

There is a way how to fix this in ReactWebCam library: https://github.com/mozmorris/react-webcam/issues/232

I can access the stream via ref and call following:

const webcamRef = useRef<Webcam>(null);

  useEffect(() => {
    return (): void => {
      webcamRef.current?.stream?.getVideoTracks()?.map(({ stop }) => stop());
      webcamRef.current?.stream?.getAudioTracks()?.map(({ stop }) => stop());
    };
  }, []);

stream.getVideoTracks().map(track => track.stop());
stream.getAudioTracks().map(track => track.stop());

 const { webcamRef } = useFaceDetection({
  });

webCamRef doesn't have the stream, typing is broken and even if I try to call the webcamRef.current?.stream?.getVideoTracks()?.map(({ stop }) => stop()) it doesn't work because webCamRef is always undefined in useEffect cleanUp function.

[partha-0103]

@MatejFacko did u find any solution for this?

[iagobispo]

@partha-0103 @MatejFacko I have the same problem. Did you find a solution?

[lauirvin]

This issue has been addressed in PR #7, which introduces a cleanup function to ensure the camera stops automatically when the component unmounts.

Please upgrade to version 1.0.2, which includes this fix.

Let us know if you’re still experiencing any issues after the update. Thanks for your feedback and patience!