<video/>, navigator.mediaDevices

멋진감자·2024년 8월 31일
0

JavaScript

목록 보기
6/9
post-thumbnail

JavaScript에서 웹 페이지와 상호작용하기 위해 가장 많이 사용되는 세 가지 주요 객체는 window, document, 그리고 navigator다. 각각 브라우저 환경, HTML 문서, 그리고 사용자와 브라우저에 대한 정보를 제공한다. 디바이스나 주소 경로 등의 정보도 navigator에서 얻을 수 있다.

camera 예제

<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.mediaDevicesgetUserMedia 함수의 존재 여부를 먼저 확인한다.
사용자에게 웹캠이 없거나 지원하지 않는 브라우저일 경우 이 조건문에서 탈락된다.
함수가 존재한다면, 사용자에게 video 권한을 요청한다.

profile
난멋져

0개의 댓글