Accessing microphone with the help of getUsermedia on iOS Safari

Question

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) {
    // First get ahold of the legacy getUserMedia, if present
    let getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

    // Some browsers just don't implement it - return a rejected promise with an error
    // to keep a consistent interface
    if (!getUserMedia) {
      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
    }

    // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
    return new Promise(function(resolve, reject) {
      getUserMedia.call(navigator, constraints, resolve, reject);
    });
  }
}

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.

Are you using private browsing? Some features, like local storage, are restricted in private browsing. Other features are not available if using `UIWebView` instead of `WKWebView`. — Jesper, Nov 05 '18 at 08:27
I should have mentioned it in my post but I am not testing with private browsing. Indeed I already noticed that some things are not available in private browsing. — Joey Reinders, Nov 05 '18 at 08:36

score 0 · Answer 1 · answered Nov 13 '18 at 01:26

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

indeed the issues looks like the one stated in the webkit issue. The only problem I have is that the issue is not consistent, it comes and goes. — Joey Reinders, Nov 15 '18 at 08:11

score -1 · Answer 2 · answered Nov 13 '18 at 22:02

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.

Accessing microphone with the help of getUsermedia on iOS Safari

2 Answers2