navigator.getusermedia

Question

I was playing around with the html5 new specifications, precisely the webcam functionalities.

By following this tutorial. I was getting the following error:

Native web camera streaming (getUserMedia) is not supported in this browser.

which was taken by this if statement:

if (navigator.getUserMedia)

now, I am sure that navigator.getUserMedia is enabled in my browser, as these examples here work perfectly

so, I modified the code in the if, with the following:

if (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia)

but now, I am getting a javascript error:

Uncaught TypeError: Object #<Navigator> has no method 'getUserMedia'

at this line here:

navigator.getUserMedia('video', successCallback, errorCallback);

which doesn't really make sense! it IS working on the last link i posted!

Any ideas?

Thanks in advance.

Did you also modify the calls to `getUserMedia()` to fall back to browser specific versions? You'll get more help if you paste the exact code you are trying into your question. — robertc, Sep 13 '12 at 13:47
have a look a the edit, that's the line that is giving me the error — john smith, Sep 13 '12 at 14:13

robertc · Accepted Answer · 2013-03-12T11:16:14.573

18

If you're testing for navigator.getUserMedia, navigator.webkitGetUserMedia, navigator.mozGetUserMedia and navigator.msGetUserMedia then you have no guarantee that navigator.getUserMedia() is available. It could be that or any one of the other three. You could try something like this (from getUserMedia.js):

navigator.getUserMedia_ = (   navigator.getUserMedia
                           || navigator.webkitGetUserMedia 
                           || navigator.mozGetUserMedia 
                           || navigator.msGetUserMedia);

if ( !! navigator.getUserMedia_) {
    navigator.getUserMedia_('video', successCallback, errorCallback);
    //The rest of your code

edited Mar 12 '13 at 11:16

answered Sep 13 '12 at 15:26

robertc

74,533
18
193
177

wow! that's pretty impressive! although the code is not working, I guess I can use that library and have a flash fallback, too. thank you! – john smith Sep 14 '12 at 07:47
`navigator.msGetUserMedia` has never existed on any browser ever! Shout out to [this newer answer](https://stackoverflow.com/a/56939752/918910) instead. – jib Jul 23 '19 at 16:27
Also note that the getUSerMEdia works on https only – Bosco Nov 18 '20 at 11:50

score 7 · Answer 2 · answered Jul 08 '19 at 17:16

navigator.getUserMedia() is deprecated. See MDN.

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia

Use navigator.mediaDevices.getUserMedia(constraints); instead.

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

score 3 · Answer 3 · answered May 30 '13 at 18:22

This is a new technology. Yoy must have a Firefox/Chrome/Opera browser and it has to be updated. Then, try this:

function showCamera()  {   var streaming = false,
      video        = window.content.document.createElement("video"),
      cover        = window.content.document.createElement("div"),
      canvas       = window.content.document.createElement("canvas"),
      photo        = window.content.document.createElement("img"),
      startbutton  = window.content.document.createElement("button"),
      width = 320,
      height = 0;

  photo.src = "http://placekitten.com/g/320/261";   window.content.document.body.insertBefore(video, window.content.document.body.firstChild);

  var navigator = window.navigator;
    navigator.getMedia = ( navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia ||
                         navigator.msGetUserMedia);
    navigator.getMedia(
    {
      video: true,
      audio: false
    },
    function(stream) {
      if (navigator.mozGetUserMedia) {
        video.mozSrcObject = stream;
      } else {
        var vendorURL = window.URL || window.webkitURL;
        video.src = vendorURL.createObjectURL(stream);
      }
      video.play();
    },
    function(err) {
      console.log("An error occured! " + err);
    }   );
    video.addEventListener('canplay', function(ev){
    if (!streaming) {
      height = video.videoHeight / (video.videoWidth/width);
      video.setAttribute('width', width);
      video.setAttribute('height', height);
      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);
      streaming = true;
    }   }, false);
    function takepicture() {
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);   }
    startbutton.addEventListener('click', function(ev){
      takepicture();
    ev.preventDefault();   }, false);   }


showCamera();

If your browser is Firefox and still not working, go to about:config and set/add a boolean variable with a true value called media.navigator.enabled

Source: https://developer.mozilla.org/en-US/docs/WebRTC/Taking_webcam_photos

P/d: I used this code in a Greasemonkey script and it worked. I did some few changes on firsts lines of the original code.

navigator.getusermedia

3 Answers3

Linked