navigator.mediaDevices in microsoft edge mobile ios 13.3.1

Question

has anyone tried to capture video from iphone camera on microsoft edge mobile browser? does it work? navigator.mediaDevices returns me undefined and I'm wondering if that browser doesn't support mediaDevices API at all, or it`s just a camera access issue.

Answer 1

Please check this article, if the current document isn't loaded securely or if using the new MediaDevices API in older browsers, the navigator.mediaDevices might be undefined. So, try to check the browser version and clear the browser data, and then retest the code.

Besides, before using navigator.mediaDevices, you could try to add the following polyfill:

// Older browsers might not implement mediaDevices at all, so we set an empty object first
if (navigator.mediaDevices === undefined) {
  navigator.mediaDevices = {};
}

// Some browsers partially implement mediaDevices. We can't just assign an object
// with getUserMedia as it would overwrite existing properties.
// Here, we will just add the getUserMedia property if it's missing.
if (navigator.mediaDevices.getUserMedia === undefined) {
  navigator.mediaDevices.getUserMedia = function(constraints) {

    // First get ahold of the legacy getUserMedia, if present
    var 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, video: true })
.then(function(stream) {
  var video = document.querySelector('video');
  // Older browsers may not have srcObject
  if ("srcObject" in video) {
    video.srcObject = stream;
  } else {
    // Avoid using this in new browsers, as it is going away.
    video.src = window.URL.createObjectURL(stream);
  }
  video.onloadedmetadata = function(e) {
    video.play();
  };
})
.catch(function(err) {
  console.log(err.name + ": " + err.message);
});

I have reproduced the problem on IOS 13.4 version and using Microsoft Edge 44.13.7 version, after using above polyfill, this error disappears.