[React] 모바일 환경에서 카메라를 통해 이미지를 획득하는 방법(feat.. input, environment)

발단

디바이스의 카메라를 제어해야 하는 상황에서 간단하게 카메라를 통해 이미지를 획득할 수 있는 방법을 알게 되어 공유합니다.

 

카메라 제어 방법

<input accept="image/*" type="file" capture="environment"/>

• 위 input 의 이벤트를 발생시키게 되면 모바일 환경에서 카메라를 제어할 수 있습니다.

 

Capture 프로퍼티

• `environment, user` 두가지 속성을 가집니다.
  • environement : 모바일 환경의 후면부 카메라를 제어합니다.
  • user : 모바일 환경의 전면부 카메라를 제어합니다.
• capture 프로퍼티는 모바일 환경에서만 동작하는 API 임으로 웹에서는 우리가 아는 input 으로써의 동작을 행합니다.
• 자세한 설명은 아래 참고를 확인하여주세요.

 

간단한 카메라 예제 코드

import React, {useState} from 'react';

function VideoCamera() {
    const [source, setSource] = useState("");
    const handleCapture = (target) => {
        if (target.files) {
            if (target.files.length !== 0) {
                const file = target.files[0];
                const newUrl = URL.createObjectURL(file);
                setSource(newUrl);
            }
        }
    };
    return (
        <div>
            {source && <img src={source} alt={"snap"} width='500' height='500'></img>}

            <input
                accept="image/*"
                id="icon-button-file"
                type="file"
                capture="environment"
                onChange={(e) => handleCapture(e.target)}
            />
        </div>
    );
}

export default VideoCamera;

 

참고

• PWA 에서 카메라를 통해 이미지 획득 방법

How to access the camera of a mobile device using React Progressive Web App (PWA)

• capture 프로퍼티는 무엇인가?

 

HTML attribute: capture - HTML: HyperText Markup Language | MDN