JavaScript에서 웹 페이지와 상호작용하기 위해 가장 많이 사용되는 세 가지 주요 객체는 window
, document
, 그리고 navigator
다. 각각 브라우저 환경, HTML 문서, 그리고 사용자와 브라우저에 대한 정보를 제공한다. 디바이스나 주소 경로 등의 정보도 navigator
에서 얻을 수 있다.
<body>
<video id="video" width="640" height="480" autoplay></video>
</body>
document.addEventListener('DOMContentLoaded', function() {
const video = document.querySelector('#video')
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
video.srcObject = stream
})
.catch(function(error) {
console.log("카메라에 대한 권한을 얻지 못했습니다.", error)
})
} else {
alert('기능을 지원하지 않는 브라우저입니다.')
}
})
<video/>
태그를 통해 카메라를 구현하려고 하는 상황이다.
권한 요청을 위해 navigator.mediaDevices
와 getUserMedia
함수의 존재 여부를 먼저 확인한다.
사용자에게 웹캠이 없거나 지원하지 않는 브라우저일 경우 이 조건문에서 탈락된다.
함수가 존재한다면, 사용자에게 video 권한을 요청한다.