일반 navigator.mediaDevices

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

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문이 실행된다.

번호 제목 글쓴이 날짜 조회 수
246 [Gemini] ajax 와 fetch 의 차이 황제낙엽 2025.01.04 205
245 [검토 완료] 디바이스 카메라로 촬영한 사진을 서버에 업로드하기 샘플 황제낙엽 2024.11.21 310
244 브라우저에서 이미지를 편집(crop 등) 할 수 있는 오픈소스 Cropper.js 황제낙엽 2024.11.16 341
243 [ChatGPT] json data 의 정렬 [1] 황제낙엽 2024.07.23 204
242 DOMContentLoaded 이벤트와 window.onload 이벤트 황제낙엽 2024.07.15 231
241 fetch() 사용 예제들 황제낙엽 2024.07.09 263
240 [Copilot] Vanilla JavaScript에서 외부 스크립트 파일에 정의된 함수들을 로드 황제낙엽 2024.06.21 275
239 [Copilot] ES6 모듈(module) 문법 황제낙엽 2024.06.21 219
238 [Copilot] JSON 객체 내부 데이터를 순회하면서 조회하는 코드 황제낙엽 2024.06.02 213
237 [Copilot] JavaScript로 서버에 특정 값을 POST 방식으로 전달하고 응답을 기다리지 않고 바로 종료 황제낙엽 2024.05.31 394
236 json 데이터 내의 변수명에 prefix 로 type 표현하기 황제낙엽 2024.04.15 211
235 fetch() 함수 사용 예제 file 황제낙엽 2023.11.23 436
234 현재 document 의 host 와 port 를 얻는 방법 황제낙엽 2023.10.03 670
233 (Bard) FileReader 로 여러개의 파일을 read 하는 법 file 황제낙엽 2023.08.23 469
232 How to build a file upload service with vanilla JavaScript file 황제낙엽 2023.08.22 287
231 (Bard) JavaScript로 JSON 배열을 작성하는 방법 황제낙엽 2023.08.21 235
230 모바일 브라우저에서 file input element 를 이용하여 여러장의 이미지를 서버에 전송하려 할때 [1] 황제낙엽 2023.08.21 318
» navigator.mediaDevices 황제낙엽 2023.08.21 294
228 Barcode Detection API 황제낙엽 2023.08.06 513
227 정규식을 이용한 이메일 검증 스크립트 file 황제낙엽 2023.06.25 199