vergence
22
2019-09-06 10:27:58 작성 2019-09-06 10:29:34 수정됨
2
413

웹 브라우저에서, 카메라/마이크 이름(레이블) 확인할 때


코드 작성하고 여러번 테스트 하는데, 입력장치 이름이 보였다가 안 보였다가 해서 오류인가 하고 삽질 좀 했네요. 흙흙흙 시간이 아깝...

JavaScript로 enumerateDevices() 함수를 이용하면 입력장치의 ID를 확인할 수 있습니다.
추가로 입력장치의 이름(레이블)도 확인할 수 있습니다.
단, 이름(레이블)을 확인하려면 조건이 있네요.

아래 문서에 설명된 내용입니다.
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices

하나 이상의 MediaStream 이 활성화되어있거나, persistent permissions 가 부여되었을 때 라고 하네요.


참고하세요~


여기에도 글 올렸습니다.
https://community.remotemonster.com/t/topic/452

0
0
  • 댓글 2

  • vergence
    22
    2019-10-21 14:47:11 작성 2019-10-21 14:48:31 수정됨

    글을 너무 급히 썼는지, 다시 보니 무슨 소리를 쓴 건지 모르겠네요. ^^;
    아래 웹 페이지 방문해서 소스코드 보시면 이해되실 것 같아요.

    https://sample.remotemonster.com/videoConfig.html


                    async function getDevices () {
                        var devices = await navigator.mediaDevices.enumerateDevices();
                        for (let i = 0; i < devices.length; i++) {
                            let device = devices[i];
                            if (device.kind === 'videoinput') {
                                cameraList.push({ text: device.label, id: device.deviceId })
                            } else if (device.kind === 'audioinput') {
                                micList.push({ text: device.label, id: device.deviceId })
                            }
                            // else if (device.kind === 'audiooutput') {
                            //     speakerList.push({ text: device.label, id: device.deviceId })
                            // }
                        }
                        for (let i=0; i< cameraList.length; i++){
                            const videoInputOption = document.createElement('option');
                            videoInputOption.value= cameraList[i].id;
                            videoInputOption.text = cameraList[i].text ? cameraList[i].text : ("Device " + cameraList[i].id);
                            videoInputSelect.appendChild(videoInputOption);
                        }
                        for (let i=0; i< micList.length; i++){
                            const audioInputOption = document.createElement('option');
                            audioInputOption.value= micList[i].id;
                            audioInputOption.text = micList[i].text ? micList[i].text : ("Device " + micList[i].id);
                            audioInputSelect.appendChild(audioInputOption);
                        }
                    }


    0
  • vergence
    22
    2019-11-11 17:55:17
    0
  • 로그인을 하시면 댓글을 등록할 수 있습니다.