[JS] getUserMedia() 호환성(iOS 지원안함)문제해결

navigator.getUserMedia()

아래 코드는 사용자에게 오디오 접근 권한을 허용 받는 코드인데,

if(!navigator.getUserMedia) navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

if(navigator.getUserMedia){
  navigator.getUserMedia({audio:{echoCancellation: false, noiseSuppression: false, autoGainControl: false, mozNoiseSuppression: false, mozAutoGainControl: false}, video: false}, sendAuthMessage, function(e){
      alert('No live audio input !');
 });
} 
else {
  alert('Web Audio API is not supported in this browser\nTry Chrome, Safari or MS Edge !');
}

 

iOS에서 동작하지 않는 문제가 있었다. 확인해보니 브라우저 호환성이 iOS 사파리에서는 지원이 되지 않았다.

navigator.getUserMedia()

 

Media Capture and Streams API의 초기 버전 메서드인 navigator.getUserMedia()는

현재 권장하지 않는 메서드이며, 오래된 브라우저에서만 작동한다고 한다.

 

 navigator.mediaDevices.getUserMedia()

이후 navigator.mediaDevices.getUserMedia로 업데이트되어 더 향상된 기능과 호환성을 지원하므로

navigator.getUserMedia이 아닌 navigator.mediaDevices.getUserMedia을 사용하는 것이 좋다.

• avigator.mediaDevices.getUserMedia : 프로미스 기반 
• navigator.getUserMedia : 콜백 기반

navigator.mediaDevices.getUserMedia()

 

아래는 navigator.mediaDevices.getUserMedia 를 사용하여 수정한 코드이다. (iOS 가능)

let constraints = {
	audio: {echoCancellation: false, noiseSuppression: false, autoGainControl: false}, video: false
}
navigator.mediaDevices.getUserMedia(constraints)
    .then(sendAuthMessage)
    .catch(function (e) {
    	alert('No live audio input !');
})
.catch(function () {
	alert('Browser compatibility\n' +
    'PC: Chrome, Edge, Firefox, Opera, Safari\n' +
    'Mobile:\n' + '- Chrome Android\n' + '- Firefox for Android\n' + '- Opera for Android\n' + '- Safari on iOS\n' + '- Samsung Internet\n' + '- WebView Android');
});

 

---

참고링크 : 

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

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

https://gist.github.com/Regentag/0673add38a37c6ce77c197579fcef4e7