navigator.getusermedia - html

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.

Answer 1

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

Answer 2

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

Answer 3

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.