투케이2K

338. (javaScript) 자바스크립트 mediaDevices.getUserMedia 오디오 및 비디오 권한 요청 후 Promise 응답 결과 확인 본문

JavaScript

338. (javaScript) 자바스크립트 mediaDevices.getUserMedia 오디오 및 비디오 권한 요청 후 Promise 응답 결과 확인

투케이2K 2023. 11. 6. 19:15

[개발 환경 설정]

개발 툴 : Edit++

개발 언어 : JavaScript

 

[소스 코드]

 

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


        /*
        -----------------------------------------
        [요약 설명]
        -----------------------------------------
        1. MediaDevices: getUserMedia :  미디어 유형이 포함된 트랙을 생성하는 권한을 사용자에게 요청합니다
        -----------------------------------------
        2. constraints : 요청할 미디어 유형을 지정하는 개체입니다
        -----------------------------------------
        3. 참고 사이트 : 

        https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
        -----------------------------------------
        */



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

            // [퍼미션 권한 요청 constraints 지정]
            var constraints = {
                video: {width: {ideal:1280}, height: {ideal:720}},
                audio: true
            }


            // [퍼미션 권한 요청 수행]
            const localStream = await navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
                console.log("");
                console.log("=========================================");
                console.log("[getUserMedia] : [Success] : [퍼미션 권한 부여 확인]");
                console.log("=========================================");
                console.log(""); 

            }).catch(function(err) {

                if (err.name == "NotFoundError" || err.name == "DevicesNotFoundError") {

                    console.error("[getUserMedia] : [DevicesNotFoundError] : 비디오 및 오디오 캡처 장치 확인 실패");   

                } else if (err.name == "NotReadableError" || err.name == "TrackStartError") {

                    console.error("[getUserMedia] : [TrackStartError] : 비디오 소스 할당 실패");

                } else if (err.name == "OverconstrainedError" || err.name == "ConstraintNotSatisfiedError") {

                    console.error("[getUserMedia] : [ConstraintNotSatisfiedError] : 제약 조건 충족 실패 (기기 고장 상태 점검 필요)");

                } else if (err.name == "NotAllowedError" || err.name == "PermissionDeniedError") {

                    console.error("[getUserMedia] : [PermissionDeniedError] : 웹캠 및 마이크에 대한 액세스 거부 상태");

                } else if (err.name == "TypeError" || err.name == "TypeError") {

                    console.error("[getUserMedia] : [TypeError] : 오디오, 비디오 false 설정 Type 에러 발생");
                    
                } 
                else if (err.name == "SecurityError") {

                    console.error("[getUserMedia] : [SecurityError] : 웹캠 및 마이크 미디어 자원 비활성 상태");

                } else {

                    console.error("[getUserMedia] : [Else] : " + err);

                }
            });

        }; 

        
    </script>

 

반응형
Comments