7

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

AlesSvetina
  • 403
  • 3
  • 6
  • 19

1 Answers1

15

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>
jib
  • 40,579
  • 17
  • 100
  • 158
  • what do you mean by **since it works differently**? I figured the webrtc now returns a promise instead of accepting callbacks in its argument.. is there anything else im missing? – choz Apr 26 '17 at 13:06
  • 1
    @choz Right, it doesn't work in practice to substitute one for the other like the OP was doing, since you have to call them differently. – jib Apr 26 '17 at 13:26