JavaScript
398. (javaScript) 자바스크립트 navigator.mediaDevices.enumerateDevices 사용해 사용 가능한 미디어 장치 목록 확인
투케이2K
2025. 6. 17. 19:13
728x90
[개발 환경 설정]
개발 툴 : Edit++
개발 언어 : JavaScript
[소스 코드]
-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------
- 개발 환경 : Web
- 개발 기술 : JavaScript (자바스크립트) / navigator / mediaDevices / enumerateDevices / 디바이스 장치 목록
-----------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------
<!DOCTYPE HTML>
<html lang="ko">
<head>
<title>javaScriptTest</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 반응형 구조 만들기 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<!-- 내부 CSS 스타일 지정 -->
<style>
html, body {
width: 100%;
height: 100%;
margin : 0 auto;
padding : 0;
border : none;
background-color: #666;
}
</style>
<!-- [CDN 주소 설정] -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<!-- [자바스크립트 코드 지정] -->
<script>
// --------------------------------------------------------------------------------------------------------------
// [html 최초 로드 및 이벤트 상시 대기 실시]
window.onload = function() {
console.log("");
console.log("=========================================");
console.log("[window onload] : [start]");
console.log("=========================================");
console.log("");
// -----------------------------------------
// [navigator.mediaDevices.enumerateDevices 사용해 사용 가능한 미디어 장치 목록 확인]
// -----------------------------------------
// 참고 : navigator.mediaDevices.enumerateDevices 는 여러 개의 카메라나 마이크가 있을 경우 목록 확인을 위해 사용할 수 있습니다
// -----------------------------------------
// 출력 예시 : [enumerateDevices] : {"deviceId":"","kind":"audioinput","label":"","groupId":""}
// -----------------------------------------
navigator.mediaDevices.enumerateDevices()
.then(devices => {
devices.forEach(device => {
console.log("");
console.log("=========================================");
console.log("[enumerateDevices] : " + JSON.stringify(device));
console.log("=========================================");
console.log("");
});
})
.catch(error => {
console.error("");
console.error("=========================================");
console.error("[enumerateDevices Exception] : ", error);
console.error("=========================================");
console.error("");
});
};
// --------------------------------------------------------------------------------------------------------------
</script>
</head>
<body>
</body>
</html>
-----------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------
[Web Document 문서]
https://developer.mozilla.org/ko/docs/Web/API/Navigator/mediaDevices
-----------------------------------------------------------------------------------------728x90
반응형