Getusermedia Not Working On New Browsers

I am playing around with HTML Media Capture and the getUserMedia method. It is not working with Chrome and I get the alert included on failure. Here is the sample code I used: if (

Solution 1:

The standard navigator.getUserMedia is not recognized on Chrome. it works with Microsoft Edge. You will need to add vendor prefixes. for Chrome: navigator.webkitGetUserMedia

Here is a working code on JSFiddle https://jsfiddle.net/RamiSarieddine/t9d3hpyr/

//browser support check "ms" vendor function is for IE8
navigator.getUserMedia = ( navigator.getUserMedia       ||
                           navigator.webkitGetUserMedia ||
                           navigator.mozGetUserMedia    ||
                           navigator.msGetUserMedia );

if (navigator.getUserMedia) {
    navigator.getUserMedia(
        // constraints
        {
            video: true,
            audio: true
        },
        // successCallbackfunction (localMediaStream) {
            var video = document.querySelector('video');
            video.src = window.URL.createObjectURL(localMediaStream);
            // Do something with the video
            video.play();
        },
        // errorCallbackfunction (err) {
            console.log("The following error occured: " + err);
        }
    );
} else {
    alert("getUserMedia not supported by your web browser or Operating system version");
}

Solution 2:

navigator.getUserMedia has been superseded by navigator.mediaDevices.getUserMedia.

The latter uses modern promises and is available natively in Edge, Firefox, and Chrome. There is also adapter.js, the official WebRTC polyfill that helps them catch up to the standard (e.g. srcObject).

Here is a fiddle that works in all three: https://jsfiddle.net/srn9db4h/

var constraints = { video: true, audio: true };

navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => video.srcObject = stream)
  .catch(e =>console.error(e));

Solution 3:

It is not working with Chrome

Try using webkit , moz prefixes , see Navigator.getUserMedia()

navigator.getUserMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia; 
if (navigator.getUserMedia) {
    //do stuff
}

Solution 4:

What about this little validation?

asyncgetMediaStream(constraints): Promise<MediaStream> {
  returnnewPromise(function (resolve, reject) {
    if (navigator.mediaDevices
      && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia(constraints)
        .then((stream) =>resolve(stream))
        .catch(err =>reject(err));
    } else {
      const getUserMedia = navigator.getUserMedia
      || navigator['webkitGetUserMedia']
      || navigator['mozGetUserMedia']
      || navigator['msGetUserMedia'];
      getUserMedia(
        constraints,
        (stream) =>resolve(stream),
        (err) =>reject(err)
      );
    }
  });
}

const isEdge = navigator.userAgent.indexOf('Edge') !== -1
  && (!!navigator.msSaveOrOpenBlob || !!navigator.msSaveBlob);

getMediaStream({
  audio: isEdge ? true : {
    echoCancellation: false
  }
})
.then(stream =>console.log(stream))
.catch(err =>console.error(err))

Regards, Nicholls :)