-
WebRTC 모바일 기기 카메라 전면/후면 전환( feat. facingMode )Development/WebRTC 2020. 1. 18. 22:56
웹캠이 있는 노트북 또는 모바일 기기로 다음 사이트에 접속하면 카메라를 선택할 수 있는 콤보박스가 뜬다.
https://webrtc.github.io/samples/src/content/devices/input-output/
Select audio and video sources
WebRTC samplesSelect sources & outputs Get available audio, video sources and audio output devices from mediaDevices.enumerateDevices() then set the source for getUserMedia() using a deviceId constraint. Audio input source: Audio output destination: Video
webrtc.github.io
이는 WebRTC 라이브러리에서 제공하는 navigator.mediaDevices.enumerateDevices() 함수로 오디오 및 비디오 관련 장치정보를 얻어와서 생성된다.
navigator.mediaDevices.enumerateDevices() 함수를 통하여 장치정보들을 얻는 것은 좋으나 모바일 기기에서 약간의 문제가 있다.
다름이 아니고 S9과 Note9의 경우 전면 카메라 2개 후면 카메라 1개로 총 3개의 카메라가 인식된다.
카메라 전면/후면 전환 기능을 구현해야 하는데 전면 카메라가 2개여서 index로 전환하면 2번 눌러야 후면 카메라로 전환된다.
콤보박스로 제공하게 되면 이미 카메라 전면/후면 전환 기능이 아니라 비디오 장치 전환 기능이 되어버린다.
이러한 문제를 해결하고자 검색하던 도중 facingMode라는 것을 발견하였다.
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints/facingMode
MediaTrackConstraints.facingMode
The MediaTrackConstraints dictionary's facingMode property is a ConstrainDOMString describing the requested or mandatory constraints placed upon the value of the facingMode constrainable property.
developer.mozilla.org
mediaConstraints를 구성할때 audioConstrains와 videoConstraints로 구성하게 되는데 이때 videoConstraints의 하위 속성으로 facingMode를 추가하여 카메라 전면/후면 전환 기능을 구현할 수 있었다.
위의 MDN 자료를 보면 facingMode는 아래의4가지 값을 갖는다.
- user
- environment
- left
- right
여기서 user는 사용자를 비추는 카메라 즉, 전면 카메라를 뜻한다.
environment는 환경을 비추는 카메라 즉, 후면 카메라를 뜻한다.
이 두가지 속성을 이용하여 mediaConstraints를 구성하면 장치 정보들을 얻고 분류하는 작업 없이 전면/후면 카메라 전환 기능을 구현할 수 있다.
댓글