일반 navigator.mediaDevices

황제낙엽 2023.08.21 05:08 조회 수 : 297

sitelink1 https://codereader37.tistory.com/208 
sitelink2 https://developer.mozilla.org/en-US/docs...diaDevices 
sitelink3  
sitelink4  
extra_vars4  
extra_vars5  
extra_vars6  

MediaDevices 인터페이스는 카메라, 마이크, 공유 화면 등 현재 연결된 미디어 입력 장치로의 접근 방법을 제공하는 인터페이스이다.
다르게 말하자면, 미디어 데이터를 제공하는 모든 하드웨어로 접근할 수 있는 방법이다.
MediaDevices 인터페이스를 구현하는 navigator.mediaDevices 객체를 통해 자바스크립트로 액세스할 수 있다. 

 

- navigator.mediaDevices 예제

const video = document.getElementById("myVideo");

async function getMedia() {
    try {
        const myStream = await navigator.mediaDevices.getUserMedia({
            audio:true,
            video:true
        });

        video.srcObject = myStream;
    } catch(e) {
        console.log(e);
    }
}

getMedia();

navigator.mediaDevices.getUserMedia()를 통해 PC에 연결되어 있는 media 장치를 가져오고 이를 video 컴포넌트에 할당한다.
media장치를 가져오는데 딜레이가 걸리거나 오류가 발생할 수도 있으므로 async(비동기) 함수안에 await를 붙여 호출해 함수가 반환될때까지 대기한다.
혹 에러가 발생하면 throw를 날려 catch문이 실행된다.

번호 제목 글쓴이 날짜 조회 수
114 [검토 완료] 디바이스 카메라로 촬영한 사진을 서버에 업로드하기 샘플 황제낙엽 2024.11.21 314
113 브라우저에서 이미지를 편집(crop 등) 할 수 있는 오픈소스 Cropper.js 황제낙엽 2024.11.16 353
112 DOMContentLoaded 이벤트와 window.onload 이벤트 황제낙엽 2024.07.15 239
111 [Copilot] Vanilla JavaScript에서 외부 스크립트 파일에 정의된 함수들을 로드 황제낙엽 2024.06.21 278
110 [Copilot] ES6 모듈(module) 문법 황제낙엽 2024.06.21 222
109 현재 document 의 host 와 port 를 얻는 방법 황제낙엽 2023.10.03 680
108 (Bard) FileReader 로 여러개의 파일을 read 하는 법 file 황제낙엽 2023.08.23 470
» navigator.mediaDevices 황제낙엽 2023.08.21 297
106 Barcode Detection API 황제낙엽 2023.08.06 520
105 체크박스에 체크된 항목 개수 구하기 황제낙엽 2023.06.10 507
104 배열에 대한 루프문 조회 (loop iterator) 황제낙엽 2023.03.01 567
103 (Copilot) 바닐라 스크립트가 뭐지? 황제낙엽 2023.02.24 267
102 문자열에서 역슬래시(backslash) 문자와 유니코드(Unicode)에 대한 고찰 file 황제낙엽 2021.06.03 501
101 자바스크립트(Javascript) escape, encodeURI, encodeURIComponent 인코딩 함수 황제낙엽 2021.04.27 455
100 자바스크립트 학습용 유튜브 강의 (드림코딩 by 엘리) 황제낙엽 2021.03.07 472
99 Early return, early exit - 스크립트 가독성 개선 팁 황제낙엽 2021.03.07 376
98 [GitHub] JavaScript Algorithms and Data Structures (알고리즘과 자료구조) file 황제낙엽 2021.03.01 323
97 비동기프로그래밍 - 콜백함수(Callback function) file 황제낙엽 2020.08.26 441
96 Strict 모드 황제낙엽 2020.08.23 344
95 경과 시간 구하기 황제낙엽 2019.10.04 1416