Javascript - navigator 객체로 미디어 제어하기

1. enumerateDevices()

enumerateDevices()는 연결된 장치 목록을 배열 형식으로 반환한다.

navigator.mediaDevices.enumerateDevices().then((devices) => {
    console.log('devices: ', devices)
})

배열 요소에는 deviceId, groupId, kind, label이 포함된다.

• deviceId: 장치 하나를 고유하게 식별하는 id다. deviceId를 통해 특정 장치를 선택하여 getUserMedia() 메서드를 사용할 수 있다.
• groupId: 카메라와 마이크가 함께 내장되어 있는 모니터와 같은 물리적 장치를 그룹으로 묶는 id다. 단순히 같은 그룹에 속해있다는 것을 알려주는 값이다.
• kind: 해당 장치가 어떤 장치인지 알려준다. audioinput(마이크), videoinput(카메라), audiooutput(스피커)로 구분된다.
• label: 장치의 이름을 나타낸다. MacBook Pro 스피커 (Built-in), MacBook Pro 마이크 (Built-in)처럼 해당 장치의 이름으로 표시된다.

1-1. getUserMedia()

getUserMedia()는 사용자의 audio나 video 장치에 권한을 요청하여 해당 장치에 접근한 후 미디어 스트림 객체를 반환받아 사용할 때 사용하는 메서드다. 반환된 스트림을 녹화, 분석, 전송 등을 할 때 사용한다.

navigator.mediaDevices.getUserMedia({
    video: {
        deviceId: 'e62af3b11b6f3249ae286f271b4e2e5536c771d75bd145b0ae4c540d049508a2',
        width: 640,
        height: 480,
        frameRate: 30,
    },
    audio: {
        deviceId: '539d4ee3bc49ae530097e0f7e02406f4243c01be93b9082e0c986c17a82d9672',
        sampleRate: 44100,
        sampleSize: 16,
    }
})

 

1-2. video

video 객체 안에 사용할 video장치의 제약 조건을 지정한다.

• deviceId: 권한을 요청할 deviceId를 지정한다.
• width: width와 height는 영상 해상도를 지정한다. video의 가로 길이를 지정한다.
• height: video의 세로 길이를 지정한다.
• frameRate: 영상에서 1초에 몇 개의 프레임을 보여줄 지 지정한다.

1-3. audio

audio 객체 안에 사용할 audio장치의 제약 조건을 지정한다.

• deviceId: 권한을 요청할 deviceId를 지정한다.
• sampleRate: 1초에 몇 번 샘플링하는지 비율을 나타낸다. Hz단위로 보통 44100으로 지정한다.
• sampleSize: 각 샘플을 몇 비트로 표현할지 지정한다. bit단위로 보통 16으로 지정한다.

2. 기본값으로 설정

navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
})

true로 설정하면 기본값으로 지정된 장치를 바탕으로 MediaStream을 생성한다. 특정 장치로 설정하려면 위의 예시처럼 deviceId로 제약 조건을 지정해야 한다.

---

참고 사이트:

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

MediaDevices: getUserMedia() method - Web APIs | MDN