Odtnhj

I'm attempting to access the microphone on iOS Safari with the help of the getUserMedia. Below you can find a snippet of my code.

if (navigator.mediaDevices === undefined) 
 navigator.mediaDevices = ;


if (navigator.mediaDevices.getUserMedia === undefined) 
 navigator.mediaDevices.getUserMedia = function(constraints) 


navigator.mediaDevices.getUserMedia(
 audio: true
).then(function(stream) 
 successCallBack(.......);
).catch(function(error) 
 debug.log(error);
 ..........
);

Yet the promise always catches an error, to be more specific an OverConstraintError.

message: "Invalid constraint", constraint: ""

This behaviour is unique for iOS Safari, on all other browsers (Chrome, Firefox, Safari osX) it works without any problem. Actually my issue ressembles a lot like this one => How to resolve iOS 11 Safari getUserMedia "Invalid constraint" issue, yet I'm not trying to use the camera. The only thing that interests me is the microphone.

I'm testing with a real iPhone (a 5 and X, both updated to the latest version), so it is not linked to the iPhone Simulator.

The access to the microphone is granted and the popup requesting permissions is also showing, so it is not an permissions issue.

This issue may be related to this bug report titled getUserMedia fails with an OverConstrainedError when no devices are found:

https://bugs.webkit.org/show_bug.cgi?id=177126

Here is your code running in Codepen. As you stated, audio is enabled and works. Note the enumerateDevices() call returns an empty array. As the bug states, this causes the error in your question:

.catch(function(error) 
 navigator.mediaDevices.enumerateDevices().then(devices=>console.log(devices));
 console.log('error: ',error);
);

https://codepen.io/anon/pen/rQWRyZ?editors=0011

web rtc or getusermedia has some issues and it is not working on all platforms as u expect - have same problems with camera detection like in samsung s5 same code is working fine but under newer device it was failing.

My advice is to use webrtc adapter js.
Try simply include this script:

<script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/6.4.0/adapter.js" type="text/javascript"></script>

before u use getusermedia api. I think that 99% of issues just disappear.