391. (javaScript) 자바스크립트 navigator mediaDevices getUserMedia 사용 시 constraint 속성 지정 방법

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : JavaScript

 

---

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web

- 개발 기술 : JavaScript (자바스크립트) / getUserMedia / constraint

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<script>

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

        // -----------------------------------------
        // [동작 수행]
        // -----------------------------------------
        setSystem(); 

    };


    async function setSystem(){
        console.log("-");
        console.log("=========================================");
        console.log("[setSystem] : Start");
        console.log("=========================================");
        console.log("-");

        try {

            // -----------------------------------------
            // [비디오 플레이 컴포넌트 지정 및 이벤트 지정]
            // -----------------------------------------
            // <video autoplay="true" id="remoteView" style="width: 1280px; height: 720px; margin: auto;"></video>
            // -----------------------------------------
            const remoteView = document.getElementById("remoteView");
            
            remoteView.onerror = (event) => {
                console.error("-");
                console.error("=========================================");
                console.error("[setSystem] : [remoteView] : 원격 비디오 뷰 컴포넌트 : onerror");
                console.error("=========================================");
                console.error("-");
            };
            remoteView.onwaiting = (event) => {
                console.log("-");
                console.log("=========================================");
                console.log("[setSystem] : [remoteView] : 원격 비디오 뷰 컴포넌트 : onwaiting");
                console.log("=========================================");
                console.log("-");
            };
            remoteView.onpause = (event) => {
                console.error("-");
                console.error("=========================================");
                console.error("[setSystem] : [remoteView] : 원격 비디오 뷰 컴포넌트 : onpause");
                console.error("=========================================");
                console.error("-");
            };
            remoteView.onplaying = (event) => {
                console.warn("-");
                console.warn("=========================================");
                console.warn("[setSystem] : [remoteView] : 원격 비디오 뷰 컴포넌트 : onplaying");
                console.warn("=========================================");
                console.warn("-");
            };


            // -----------------------------------------
            // [카메라 사용 권한 요청]
            // -----------------------------------------
            const constraints = {
                audio: true,
                video: {
                    facingMode: "user", // [user 전방 카메라 | environment 후방 카메라]
                    frameRate: 30, // [프레임 속도]
                    width: 1280, // [너비]
                    height: 720, // [높이]
                    
                    //frameRate: { min: 10, ideal: 15, max: 30 }, // [프레임 속도]
                    //width: { min: 740, ideal: 1024, max: 1280 }, // [너비]
                    //height: { min: 360, ideal: 576, max: 720 }, // [높이]
                },
            };

            await navigator.mediaDevices.getUserMedia({ 
                video: true,
                audio: false,
            }).then(function (stream) {
                console.log("-");
                console.log("=========================================");
                console.log("[setSystem] : [webcam play]");
                console.log("=========================================");
                console.log("-");

                remoteView.srcObject = stream; // [비디오 뷰에 카메라 및 오디오 스트림 지정]
            })
            .catch(function (error) {
                console.error("-");
                console.error("=========================================");
                console.error("[setSystem] : [webcam error] : " + error.message);
                console.error("=========================================");
                console.error("-"); 
            });

        }
        catch (exception) {
            console.error("-");
            console.error("=========================================");
            console.error("[setSystem] : [Exception] : " + exception.message);
            console.error("=========================================");
            console.error("-");			
        }

    };

</script>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

[자바스크립트 AWS Kvs WebRTC 디바이스 역할 (master) sdp answer 응답 및 실시간 비디오 스트림 전송 수행]

https://blog.naver.com/kkh0977/223863377974


[자바스크립트 AWS WebRTC 실시간 동영상 재생 수행]

https://blog.naver.com/kkh0977/223170500993?trackingCode=blog_bloghome_searchlist


[Aws KVS 비디오 스트림 , 신호 전송 채널 차이점 설명 정리]

https://blog.naver.com/kkh0977/223854439046


[Aws Kvs WebRTC 실시간 영상 재생 관련 구성 요소 및 용어 정리]

https://blog.naver.com/kkh0977/223858189791

-----------------------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://blog.naver.com/kkh0977/223863377974

387. (javaScript) 자바스크립트 AWS Kvs WebRTC 디바이스 역할 (master) sdp answer 응답 및 실시간 비디오 스

---