react webcam object-fit cover

react-webcam 라이브러리 사용할 때 비디오가 화면비율에 맞지 않게 출력되는 현상!!
비디오에 object-fit:cover  효과를 준 것처럼 하고 싶어요!

>> react webcam without object-fit cover 검색

https://stackoverflow.com/questions/55920961/react-webcam-npm-package-video-sizing

 

친절하게 hook 사용예시까지 제공해줌..프로젝트에 반영하니까 바로 됨 !!!

const isLandscape = size.height <= size.width;
  const ratio = isLandscape ? size.width / size.height : size.height / 
  size.width;

  // Hook
    function useWindowSize() {
    // Initialize state with undefined width/height so server and client renders match
    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
    const [windowSize, setWindowSize] = useState({
      width: undefined,
      height: undefined,
    });

    useEffect(() => {
        // Handler to call on window resize
        function handleResize() {
          // Set window width/height to state
          setWindowSize({
            width: window.innerWidth,
            height: window.innerHeight,
          });
        }
        
        // Add event listener
        window.addEventListener("resize", handleResize);
        
        // Call handler right away so state gets updated with initial window size
        handleResize();
        
        // Remove event listener on cleanup
        return () => window.removeEventListener("resize", handleResize);
      }, []); // Empty array ensures that effect is only run on mount
    
      return windowSize;
    }

 

   <Webcam 
        height={size.height} 
        width={size.width}
        videoConstraints={{facingMode: 'user', aspectRatio: ratio}
        ref={camera => window.camera = camera} />

 

 

선임개발자가 문제발견하고 스택오버플로에서 코드 복사해서 챡챡 해결하는거보고
어이없어서 기록하는 글..
나도 구글 검색할수있엇는데 왜 난 못했냐...