CODEWITHSUNDEEP
javascripthtmlgoogle-chromeinternet-explorermicrosoft-edge
csoueidi
csoueidi

Reputation: 418

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 (navigator.getUserMedia) {
    navigator.getUserMedia(
        // constraints
        {
            video: true,
            audio: true
        },
        // successCallback
        function (localMediaStream) {
            var video = document.querySelector('video');
            video.src = window.URL.createObjectURL(localMediaStream);
            // Do something with the video
            video.play();
        },
        // errorCallback
        function (err) {
            console.log("The following error occured: " + err);
        }
    );
} else {
    alert("getUserMedia not supported by your web browser or Operating system version");
}

Upvotes: 2

Views: 10338

Answers (4)

jdnichollsc
jdnichollsc

Reputation: 1569

What about this little validation?

async getMediaStream(constraints): Promise<MediaStream> {
  return new Promise(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 :)

Upvotes: 0

Rami Sarieddine
Rami Sarieddine

Reputation: 5432

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
        },
        // successCallback
        function (localMediaStream) {
            var video = document.querySelector('video');
            video.src = window.URL.createObjectURL(localMediaStream);
            // Do something with the video
            video.play();
        },
        // errorCallback
        function (err) {
            console.log("The following error occured: " + err);
        }
    );
} else {
    alert("getUserMedia not supported by your web browser or Operating system version");
}

Upvotes: 4

jib
jib

Reputation: 42480

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));

Upvotes: 3

guest271314
guest271314

Reputation: 1

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
}

Upvotes: 1

Related Questions