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문이 실행된다.
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
17 | Barcode Detection API | 황제낙엽 | 2023.08.06 | 7 |
16 | (Copilot) 바닐라 스크립트가 뭐지? | 황제낙엽 | 2023.02.24 | 7 |
15 | 배열에 대한 루프문 조회 (loop iterator) | 황제낙엽 | 2023.03.01 | 3 |
14 | (Copilot) JSON 객체의 내부 데이터 리스트 길이를 구하는 방법 | 황제낙엽 | 2023.03.30 | 2 |
13 | fetch() 함수 사용 예제 | 황제낙엽 | 2023.11.23 | 1 |
12 | 현재 document 의 host 와 port 를 얻는 방법 | 황제낙엽 | 2023.10.03 | 1 |
11 | 모바일 브라우저에서 file input element 를 이용하여 여러장의 이미지를 서버에 전송하려 할때 | 황제낙엽 | 2023.08.21 | 1 |
» | navigator.mediaDevices | 황제낙엽 | 2023.08.21 | 1 |
9 | 체크박스에 체크된 항목 개수 구하기 | 황제낙엽 | 2023.06.10 | 1 |
8 | JSON 클래스가 지원하는 function | 황제낙엽 | 2023.03.31 | 1 |
7 | CryptoJS 를 이용한 암호화 | 황제낙엽 | 2023.02.15 | 1 |
6 | json 데이터 내의 변수명에 prefix 로 type 표현하기 | 황제낙엽 | 2024.04.15 | 0 |
5 | (Bard) FileReader 로 여러개의 파일을 read 하는 법 | 황제낙엽 | 2023.08.23 | 0 |
4 | How to build a file upload service with vanilla JavaScript | 황제낙엽 | 2023.08.22 | 0 |
3 | (Bard) JavaScript로 JSON 배열을 작성하는 방법 | 황제낙엽 | 2023.08.21 | 0 |
2 | [URLSearchParams] URL 파라미터(매개변수) 값 가져오기 | 황제낙엽 | 2023.02.02 | 0 |
1 | 정규식을 이용한 이메일 검증 스크립트 | 황제낙엽 | 2023.06.25 | 0 |