모바일 기기로 촬영한 사진 용량이 너무 클 경우, 더 작은 크기의 사진을 찍도록 설정하고 싶을 때가 있습니다. 이럴 때 W3C에서 정의한 두 가지 표준 방식으로 카메라 촬영 기능을 구현할 수 있습니다.
구현 방식은 크게 HTML만으로 처리하는 방법과 JavaScript를 활용하는 방법으로 나눌 수 있습니다.
1. HTML Media Capture
HTML 방식은 input 태그에 capture 속성과 accept="image/*" 속성을 함께 사용하여 촬영 의도를 명시합니다.
<input type="file" accept="image/*" capture="camera">이 방식은 구현이 간단하다는 장점이 있지만, 사진의 크기나 해상도를 직접 지정할 수 없다는 한계가 있습니다. 실제 촬영 결과물은 브라우저와 운영체제의 기본 동작에 따라 결정되며, 개발자가 세부적으로 제어하기 어렵습니다.
2. Media Capture Streams
MediaStream API는 카메라에 대한 완전한 프로그래밍 방식의 접근을 제공하므로, 개발자가 직접 만든 촬영 UI를 통해 동영상과 정지 이미지를 자유롭게 처리할 수 있습니다.
특히 이 방식은 width(너비), height(높이), frameRate(프레임 레이트), facingMode(카메라 방향) 등 다양한 제약 조건(constraints)을 지정할 수 있어, 원하는 해상도로 촬영 환경을 세밀하게 조정할 수 있다는 점에서 HTML Media Capture보다 유연합니다.
다만 이 스트림 방식의 전역 브라우저 지원률은 약 50% 수준으로 낮은 편이므로, 일반적인 공개 웹 서비스보다는 특정 기기나 앱 내부 웹뷰처럼 통제된 환경(closed environment)에서 사용하는 것이 안전합니다.