-
초보자를 위한 웹브라우져에 웹캠 비디오 영상 보여주기Study/JavaScript 2024. 3. 7. 11:44반응형
웹캠을 이용하여 웹브라우져에 띄우는 작업을 하거나 카메라를 이용하여 서비스를 만든다고 하면
도대체 카메라를 웹브라우져에 어떻게 띄우는 걸까?!
궁금해 하실 저와 같은 병아리신입 개발자를 위해 글을 써볼까 함요.
그럼 잔말 말고 얼른 어케띄우는지 보자
1.결과
위에 이미지는 웹캠을 띄워서 일부 화면만 캡쳐했움...왜냐면 얼굴이 나오니까 일부만 캡쳐 함요.
여튼 결론적으로 브라우져에 실시간으로 웹캠영상을 띄웠음
2.설명
(1)html 코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <video id="video" width="640" height="480" autoplay muted playsinline></video> </body> </html>기본 html 코드에 video 에 id를 적어줘서 나중에 자바스크립트단에서 접근시 사용 하기 위함.
비디오 크기를 정하기 위해 width 와 height 를 정해줌.
(2) javaScript 코드
<script> const video = document.getElementById('video'); //html코드에서 id 부분 스크립트 코드에서 다루기위해 변수엠 담음 navigator.mediaDevices.getUserMedia({ video: true, audio: false }) // 미디어 장치(예: 카메라, 마이크)에 액세스할 수 있는 미디어 스트림을 반환하는 스트림 .then(function (stream) { video.srcObject = stream; // HTML <video> 요소의 srcObject 속성에 할당함으로써, 사용자의 웹캠으로 부터 비디오를 보여주는 작업 }); </script>설명은 주석으로 처리함.
참고로 javaScript 부분은 body 태그 제일 하단에 위치해야 웹브라우져 엔진이 html 코드를 읽어 script 코드를 맨마지막으로 읽기때문에 로딩에 의한 에러가 안남.
(3) 기타
위에 코드에 띄우면 처음 접속시 위와 같은 화면이 나올꺼임.
이때 '이번에만 허용' 또는 '방문할 때마다 허용' 이거를 눌러야지 웹브라우져에서 웹캠이 접속이 가능함.
위와 같은 팝업이 뜨는 이유는 정확히는 잘 모르지만 정책상 웹브라우져에서 개인 카메라에 접속시 사용자에서 다시한번물어보고 진행 하기 때문에 뜨는거 같음.
반응형'Study > JavaScript' 카테고리의 다른 글
초보자를 위한 자바스크립트를 이용하여 간단하게 얼굴 인식하기( openCV.js 활용)_2 (0) 2024.03.08 초보자를 위한 자바스크립트를 이용하여 간단하게 얼굴 인식하기( openCV.js 활용)_1 (0) 2024.03.08 초보자를 위한 게시판의 글자색을 바꾸는 기능을 만들어 보자 (0) 2024.02.05 var 와 let 둘 중 뭐를 써야 될까?? (0) 2023.08.04 초보자도 쉽게 이해하는 jQuery 문법_태그 및 요소 추가하기_ .wrap() .wrapAll() .html() .text()_(2) (0) 2023.03.26