React 카메라 on/off 문제

플러그인을 사용하면 보통 알아서 처리해주기에 그럴일은 없겠지만
직접 video 태그를 사용하고, getUserMedia를 사용하는 경우 문제가 있을 수 있다.

  const [localStream, setLocalStream] = useState<MediaStream>();
  useEffect(() => {
    navigator.mediaDevices.getUserMedia({
      video: { facingMode: "user" }, //전면
      // video: { facingMode: { exact: "environment" } }, //후면
    })
      .then(stream => {
        console.log(stream);
        setLocalStream(stream);
      })
    return () => {
      if (localStream) {
          const vidTrack = localStream.getVideoTracks();
          vidTrack.forEach(track => {
            localStream.removeTrack(track);
          });
      }
    }
  }, []);

위와 같은 코드로 해당 컴포넌트가 RemoveTrack으로 해당 미디어스트림에 등록된 비디오들을 제거해줘야 한다.