javascript - getUserMedia not working on new browsers - Stack Overflow

admin管理员组

文章数量:1290232

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

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

• javascript
• html
• google-chrome
• internet-explorer
• microsoft-edge

Share Improve this question Follow edited Nov 9, 2016 at 3:56 octavn 3,2853535 silver badges5151 bronze badges asked Nov 29, 2015 at 17:36 csoueidicsoueidi 41822 gold badges55 silver badges1717 bronze badges 2

• For the correct HTML Media Capture syntax (there were several revisions) see addpipe./blog/correct-syntax-html-media-capture – octavn Commented May 25, 2017 at 11:28
• Use the latest version... navigator.getUserMedia() is now replaced by navigator.mediaDevices.getUserMedia webrtc.github.io/samples – BLoB Commented Feb 27, 2019 at 15:23

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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/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");
}

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/srn9db4h/

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

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

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
}

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

本文标签： javascriptgetUserMedia not working on new browsersStack Overflow