HTML5로 웹캠 사진 촬영이 첫 페이지 로드 시 작동하지 않을 때 해결 방법

HTML5로 웹캠 사진 촬영 구현하기

HTML5를 사용해 웹캠에서 사진을 캡처하려면 몇 가지 기본 설정이 필요합니다. 먼저 페이지에서 사용할 DOM 요소들을 변수로 선언하고, 이어서 브라우저의 카메라 접근 API인 getUserMedia를 설정해야 합니다.

1. 변수 선언

비디오 스트림 상태, 비디오·캔버스·사진 영역, 촬영 버튼 등 필요한 요소들을 미리 참조해 둡니다.

var streaming = false,
    video = document.querySelector('#video'),
    canvas = document.querySelector('#canvas'),
    photo = document.querySelector('#photo'),
    startbutton = document.querySelector('#startbutton'),
    width = 320,
    height = 0;

2. getUserMedia 설정

브라우저마다 지원하는 API 이름이 다르기 때문에, 크로스 브라우저 호환성을 위해 각 벤더 프리픽스를 순차적으로 확인하여 할당합니다.

navigator.getMedia = ( navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.msGetUserMedia);

추가 팁

최신 브라우저 대응: 위 방식은 구형 브라우저 호환용이며, 현재는 표준화된 navigator.mediaDevices.getUserMedia() API를 사용하는 것이 권장됩니다.

HTTPS 필수: 보안 정책에 따라 웹캠 접근은 HTTPS 환경 또는 localhost에서만 허용됩니다. 일반 HTTP 페이지에서는 카메라 권한 요청이 차단되니 배포 전 반드시 확인하세요.