React : react-webcam 을 이용하여 기기에서 지원하는 최대 해상도 비디오 스트림 얻어오기

 

 

모바일이나 데스크톱 웹 애플리케이션을 개발할때 현재 디바이스의 카메라 화면을 가져오고 싶을때가 있습니다. 

 

React로 개발할때 이를 쉽게 구현해주는 `react-webcam` 이라는 패키지를 활용하면 쉽게 카메라 화면(Stream)을 가져와서 기능 구현에 활용할 수 있습니다.

 

 

react-webcam 사용법

 

react-webcam

 

 

위의 npm 링크를 들어가면 사용법을 확인하실수 있습니다. 

 

저는 보통 아래와 같은 방식으로 간단하게 사용하고 있습니다. 

 

import Webcam from 'react-webcam'
const FACING_MODE_USER_ = 'user'
const FACING_MODE_ENVIRONMENT_ = 'environment'
const videoConstraints = {
  facingMode: FACING_MODE_ENVIRONMENT,
}

function WebcamComponent() {
  return (
    <Webcam
      id='main-webcam'
      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
      className='fixed left-0 top-0 z-[-1]' 
      audio={false}
      screenshotFormat='image/jpeg' 
      videoConstraints={{ 
        ...videoConstraints
      }}
      onUserMediaError={onMediaSuccess} 
      onUserMedia={onMediaError} 
    />
  )
}

 

 

 

제가 사용한 설정 이외에도 아래와 같은 props를 통해 여러 옵션을 지정할 수 있습니다.

 

• audio (불리언, 기본값: false): 오디오 활성화/비활성화
• audioConstraints (객체): 오디오에 대한 MediaStreamConstraint(s)
• disablePictureInPicture (불리언, 기본값: false): 화면 속 화면(Picture-in-Picture) 비활성화
• forceScreenshotSourceSize (불리언, 기본값: false): 원본 비디오 스트림의 크기를 사용 (다른 크기 관련 속성 무시)
• imageSmoothing (불리언, 기본값: true): 캡처된 스크린샷의 픽셀 부드럽게 처리
• mirrored (불리언, 기본값: false): 카메라 미리보기 및 캡처된 스크린샷을 좌우 반전
• minScreenshotHeight (숫자): 스크린샷의 최소 높이
• minScreenshotWidth (숫자): 스크린샷의 최소 너비
• onUserMedia (함수, 기본값: noop): 컴포넌트가 미디어 스트림을 받을 때 호출되는 콜백 함수
• onUserMediaError (함수, 기본값: noop): MediaStreamError와 함께 컴포넌트가 미디어 스트림을 받을 수 없을 때 호출되는 콜백 함수
• screenshotFormat (문자열, 기본값: 'image/webp'): 스크린샷의 포맷
• screenshotQuality (숫자, 기본값: 0.92): 스크린샷의 품질(0에서 1까지)
• videoConstraints (객체): 비디오에 대한 MediaStreamConstraints(s)

 

 

react-webcam으로 현재 기기의 최대 해상도 얻어오기

 

react-webcam으로 최대 해상도를 얻어오기 위해서는 videoConstraints 속성을 사용해야합니다. 

 

videoConstraints 속성은 웹에서 사용자의 카메라로부터 비디오 스트림을 가져올때 원하는 품질이나 속성을 지정할수 있도록 설정하는 MediaStreamConstraints의 속성입니다. (공식 문서)

 

해당 속성중 react-webcam에서는 videoConstrains 옵션을 이용하여 원하는 해상도의 Stream을 가져올 수 있습니다.

 

하지만 브라우저 및 기기별로 지원하는 해상도가 다를수 있는데요, 이때 최대 해상도를 가져오기 위해서는 아래와 같이 constraints를 입력하면 됩니다.

 

import Webcam from 'react-webcam'
const FACING_MODE_USER_ = 'user'
const FACING_MODE_ENVIRONMENT_ = 'environment'
const videoConstraints = {
  facingMode: FACING_MODE_ENVIRONMENT_,
  advanced: [
    { width: { exact: 2560 }, height: { exact: 1440 } }, // QHD
    { width: { exact: 1920 }, height: { exact: 1080 } }, // Full HD
    { width: { exact: 1280 }, height: { exact: 720 } }, // HD
    { width: { exact: 1024 }, height: { exact: 576 } }, // 1024x576
    { width: { exact: 900 }, height: { exact: 506 } }, // 900x506
    { width: { exact: 800 }, height: { exact: 450 } }, // 800x450
    { width: { exact: 640 }, height: { exact: 360 } }, // nHD
    { width: { exact: 320 }, height: { exact: 180 } }, // QVGA
  ],
}

function WebcamComponent() {
  return (
    <Webcam
      id='main-webcam'
      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
      className='fixed left-0 top-0 z-[-1]' 
      audio={false}
      screenshotFormat='image/jpeg' 
      videoConstraints={{ 
        ...videoConstraints
      }}
      onUserMediaError={onMediaSuccess} 
      onUserMedia={onMediaError} 
    />
  )
}

 

이렇게 constraints를 설정한다면 모바일 브라우저에서 후면카메라(environment) 기준으로 지원하는 가장 큰 해상도의 Stream을 얻어오게 됩니다. 

 

`advanced` 를 키로가진 배열을 사용하면 해당 배열을 순차적으로 검색하여 최적의 해상도를 가져올 수 있게됩니다. 이는 브라우저별로 지원가능한 해상도가 다를때 유용하게 사용할 수 있습니다.

 

 

 

마무리

 

오늘은 react-webcam을 이용하여 최대 해상도를 얻어오는 방법에 대해 알아보았습니다. constraint를 이용하여 미디어 stream을 얻어오는 방법은 이밖에도 여러가지가 있으니 개발할때 공식문서를 잘 읽어보는게 중요한것 같습니다.

 

다음번에도 유용한 내용으로 포스팅 하도록 하겠습니다.

 

감사합니다.

 

참고

 

Get maximum video resolution with getUserMedia