TypeError: 'getUserMedia' called on an object that does not implement interface MediaDevices

Question

I'm trying to implement a webcam into a website using a video tag. It works in Chrome, but FireFox and IE return errors in the console. Anyone have any ideas why? Thank you!

Code:

navigator.getMedia =    navigator.getUserMedia ||
                                navigator.webkitGetUserMedia ||
                                navigator.mediaDevices.getUserMedia ||
                                navigator.msGetUserMedia ||
                                OTPlugin.getUserMedia;

Firefox error:TypeError: 'getUserMedia' called on an object that does not implement interface MediaDevices.

IE error: Unable to get property 'getUserMedia' of undefined or null reference

Answer 1

You forgot navigator.mozGetUserMedia for Firefox. IE doesn't have it (though MS Edge does).

Also, remove navigator.mediaDevices.getUserMedia from that list since it works differently.

My advice: Skip the prefix mess and try adapter.js, the official WebRTC polyfill. Then use navigator.mediaDevices.getUserMedia exclusively, as everything else has been deprecated.

Example (use https fiddle in Chrome):

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => video.srcObject = stream)
  .catch(e => console.log(e.name + ": "+ e.message));

<video id="video" width="160" height="120" autoplay></video><br>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>