투케이2K

316. (javaScript) async await 사용해 navigator.mediaDevices.getUserMedia 미디어 비디오 및 오디오 권한 요청 본문

JavaScript

316. (javaScript) async await 사용해 navigator.mediaDevices.getUserMedia 미디어 비디오 및 오디오 권한 요청

투케이2K 2023. 7. 25. 20:26

[개발 환경 설정]

​

개발 툴 : 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: 20%;
            margin: 0 auto;
            position: relative;
            top: 10%;
            border: 10px #333 solid;
        }
        #videoView {
            width: 100%;
            height: 100%;
            margin: 0 auto;
            background-color: #666;
        }

    </style>






    <!-- ===================================================================================================== -->
    <!-- [자바스크립트 코드 지정] -->
    <!-- ===================================================================================================== -->
    <script>

        // --------------------------------------------------------------------------------------------------------------

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

            // [비디오 뷰 객체 선언] / <video autoplay="true" id="videoView"></video>
            var videoView = document.querySelector("#videoView");


            // [미디어 권한 요청 및 스트림 지정]
            const localStream = await navigator.mediaDevices.getUserMedia({
                video: { width: { ideal: 1280 }, height: { ideal: 720 } },
                audio: true,
            }); // [웹 카메라 권한 요청]


            // [비디오 뷰에 스트림 지정]
            videoView.srcObject = localStream;

        };
        // */

        // --------------------------------------------------------------------------------------------------------------

        
    </script>


</head>

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

<body>

</body>

</html>

 

반응형
저작자표시

'JavaScript' 카테고리의 다른 글

318. (javaScript) [Video.js 라이브러리] 자바스크립트 Video.js 사용해 비디오 동영상 재생 수행 - video play  (0) 2023.08.06
317. (javaScript) 자바스크립트 AWS WebRTC 실시간 동영상 재생 수행 - KVS Stream Video  (0) 2023.07.31
315. (javaScript) [CryptoJS 라이브러리] - CryptoJS.SHA1 사용해 단방향 암호화 인코딩 수행  (0) 2023.07.25
314. (javaScript) [CryptoJS 라이브러리] - CryptoJS.SHA256 사용해 단방향 암호화 인코딩 수행  (0) 2023.07.24
313. (javaScript) [CryptoJS 라이브러리] - CryptoJS.MD5 사용해 단방향 암호화 인코딩 수행  (0) 2023.07.24
'JavaScript' Related Articles more
Comments