[React/Typescript] React 웹앱에서 카메라 사용

React 웹앱을 만들다 보면 카메라 기능을 넣고 싶은 경우가 생긴다. 이럴때 사용할 수 있는 webRTC API 사용을 간단하게 설명해 볼려고 한다.

 

PWA를 사용하여 앱형태로도 카메라를 사용할 수 있기에 여러 방식으로 사용할 수 있다.

 

const videoRef = useRef<HTMLVideoElement | null>(null);
  const [isCameraOn, setIsCameraOn] = useState(false);

  useEffect(() => {
    const initCamera = async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        if (videoRef.current) {
          videoRef.current.srcObject = isCameraOn ? stream : null;
        }
      } catch (error) {
        console.error("Error accessing camera:", error);
      }
    };

    initCamera();

    return () => {
      // 컴포넌트가 언마운트되면 미디어 스트림 해제
      if (videoRef.current && videoRef.current.srcObject) {
        const tracks = (videoRef.current.srcObject as MediaStream).getTracks();
        tracks.forEach((track) => track.stop());
      }
    };
  }, [isCameraOn]);

  const toggleCamera = () => {
    setIsCameraOn((prevState) => !prevState);
  };
  
  return (
     <div>
       <button onClick={toggleCamera}>{isCameraOn ? "Turn Off Camera" : "Turn On Camera"}</button>
       <video ref={videoRef} autoPlay playsInline />
     </div>
  );

간단하게 버튼을 누를 경우 카메라를 켜고 끌수있는 형태로 구현했다.

 

간단하게 수정할 수 있는 옵션들을 설명하면

<video ref={videoRef} autoPlay playsInline />

 

안에 옵션을 추가할 수 있다.

 

1. autoPlay : 비디오가 로드되면 자동으로 재생여부 [true, false]

2. playsInline : 모바일 브라우저에서 전체화면으로 재생하지 않고 박스나 칸 안에서 재생할지 여부 [true, false]

3. controls : 비디오 플레이어에 재생, 일시정지 등 조절 옵션 사용 여부 [true, false]

4. width, height : 비디오의 너비와 높이 조절 [width = 값 height = 값]

 

으로 크기 및 재생옵션을 설정할 수 있다.

 

현재 예시 코드로 사용 시 모바일 기기도 전면 카메라만 사용가능하고, 후면 카메라 방식은 다음에 추가하겠습니댜