javascript로 카드 스캔 구현하기 - 1. 카메라 띄우기

 

팀 프로젝트에서 카드 등록 기능을 구현해야 했습니다..

카드를 등록하는데 카드 스캔이 빠지면 아쉽겠죠?

이런건 어떻게 구현할까요?

 

팀원들의 반응은 다음과 같았습니다.

 

백엔드 팀원 : 이게 가능해?

프론트엔드를 처음 맡게 된 프론트엔드 팀원 : 이게 가능해?

 

개발 전에는

video태그로 카메라 영상을 띄우고 z-index로 ui를 표시한 후 html2canvas로 카드 이미지를 캡쳐할 계획이었습니다.

결론부터 말하자면 구현에 성공하긴 했지만 생각보다 난관이 많았습니다.

일단, html2canvas는 video를 캡쳐할 수 없었습니다...

 

구현 방법

 

1. video태그에 카메라 연결하기

 

먼저 카메라를 띄울 수 있어야겠죠?

 

import React, { useRef, useEffect } from 'react';
import './CameraComponent.css'; // 위에서 작성한 CSS 파일을 import 해줍니다.

const CameraComponent = () => {
  const videoRef = useRef(null);

  useEffect(() => {
    // 비디오 요소 가져오기
    const videoElement = videoRef.current;

    // 미디어 장치에 접근하는 API를 통해 사용자의 카메라 가져오기
    navigator.mediaDevices.getUserMedia({ video: true })
      .then(stream => {
        // 비디오 요소에 스트림 설정
        videoElement.srcObject = stream;
      })
      .catch(err => {
        console.error('카메라에 접근할 수 없습니다:', err);
      });

    // 컴포넌트가 언마운트될 때 스트림 해제
    return () => {
      if (videoElement.srcObject) {
        const stream = videoElement.srcObject;
        const tracks = stream.getTracks();

        tracks.forEach(track => {
          track.stop();
        });
      }
    };
  }, []); // 한 번만 실행되도록 빈 배열을 전달

  return (
    <div className="video-container"> {/* CSS 클래스 추가 */}
      <h2>카메라 화면</h2>
      <video ref={videoRef} autoPlay playsInline />
    </div>
  );
};

export default CameraComponent;

 

 

2. 카메라 전체화면으로 만들기

css를 적용하지 않는다면 카메라 비율과 화면 비율이 다를 때 여백이 발생합니다.

화면 비율에 맞게 꽉 차게 보여주기 위해서 css를 적용해줍니다.

.video-container {
  width: 100%;
  height: 100dvh; /* 화면의 높이를 전체 화면으로 설정 */
  overflow: hidden; /* 비디오 요소가 넘치는 경우를 대비하여 오버플로우 숨김 설정 */
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 비디오를 전체 화면에 맞게 조정 */
}