투케이2K

254. (JavaScript) [WebCam] navigator.mediaDevices.getUserMedia 사용해 웹 카메라 사용 권한 요청 및 video 스트림 영상 출력 본문

JavaScript

254. (JavaScript) [WebCam] navigator.mediaDevices.getUserMedia 사용해 웹 카메라 사용 권한 요청 및 video 스트림 영상 출력

투케이2K 2023. 2. 26. 16:20

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : JavaScript

 

[소스 코드]

​

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>javaScriptTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;    
        }

        #container {            
            width: 95%;
            height: 300px;
            margin: 0 auto;
            border: 10px #333 solid;
        }
        #videoElement {
            width: 100%;
            height: 300px;
            margin: 0 auto;
            background-color: #666;
        }

    </style>





    <!-- [내부 자바스크립트 J쿼리 이벤트 지정] -->
    <script>
        

        /*
        -----------------------------------------
        [요약 설명]
        -----------------------------------------
        1. window.onload : 웹페이지 로드 완료 상태를 확인합니다
        -----------------------------------------
        2. navigator.mediaDevices.getUserMedia : 요청된 미디어 유형을 사용할 수 있는 권한을 사용자에게 요청합니다
        -----------------------------------------
        */






        // [html 최초 로드 및 이벤트 상시 대기 실시] 
        window.onload = function() {
            console.log("");
            console.log("=========================================");
            console.log("[window onload] : [start]");
            console.log("=========================================");
            console.log(""); 


            // [video 객체 지정]
            var video = document.querySelector("#videoElement");


            // [카메라 퍼미션 체크 및 스트림 재생 지정]
            if (navigator.mediaDevices.getUserMedia) {
                console.log("");
                console.log("=========================================");
                console.log("[window onload] : [webcam permission check]");
                console.log("=========================================");
                console.log("");

                navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {
                    console.log("");
                    console.log("=========================================");
                    console.log("[window onload] : [webcam play]");
                    console.log("=========================================");
                    console.log("");

                    video.srcObject = stream;
                })
                .catch(function (err0r) {
                    console.log("");
                    console.log("=========================================");
                    console.log("[window onload] : [webcam error]");
                    console.log("=========================================");
                    console.log(""); 
                });
            }
        };

    </script>


</head>


<body>


    <!-- [컨테이너 생성] -->
    <div id="container">
        <video autoplay="true" id="videoElement"></video>
    </div>


</body>

</html>
 

​[결과 출력]

​

반응형
저작자표시

'JavaScript' 카테고리의 다른 글

256. (JavaScript) [day js 라이브러리] - day js 사용해 현재 날짜 및 시간 밀리 세컨드 까지 출력 (YYYY-MM-DD HH:mm:ss:SSS)  (0) 2023.03.12
255. (JavaScript) [fullpage 라이브러리] - fullpage 사용해 웹 페이지 화면 step 단계적 스크롤링 이동 수행 실시  (0) 2023.03.02
253. (JavaScript) [SheetJS 라이브러리] - SheetJS 라이브러리 사용해 html table 테이블을 excel 엑셀 파일로 저장 실시  (0) 2023.02.18
252. (JavaScript) [SheetJS 라이브러리] - SheetJS 라이브러리 사용해 excel 엑셀 파일 생성 수행 실시  (0) 2023.02.18
251. (JavaScript) [SheetJS 라이브러리] - SheetJS 라이브러리 사용해 input file 에 선택 된 excel 엑셀 파일 읽기 수행  (0) 2023.02.18
'JavaScript' Related Articles more
Comments