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

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>