csoueidi csoueidi - 27 days ago 29
HTML Question

getUserMedia not working on new browsers

I am playing around with HTML Media Capture and the

getUserMedia
method. It is not working with Chrome and I get the alert included on failure.

Here is the sample code I used:

if (navigator.getUserMedia) {
navigator.getUserMedia(
// constraints
{
video: true,
audio: true
},
// successCallback
function (localMediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
// Do something with the video
video.play();
},
// errorCallback
function (err) {
console.log("The following error occured: " + err);
}
);
} else {
alert("getUserMedia not supported by your web browser or Operating system version");
}

Answer

The standard navigator.getUserMedia is not recognized on Chrome. it works with Microsoft Edge. You will need to add vendor prefixes. for Chrome: navigator.webkitGetUserMedia

Here is a working code on JSFiddle http://jsfiddle.net/RamiSarieddine/t9d3hpyr/

//browser support check "ms" vendor function is for IE8
navigator.getUserMedia = ( navigator.getUserMedia       ||
                           navigator.webkitGetUserMedia ||
                           navigator.mozGetUserMedia    ||
                           navigator.msGetUserMedia );

if (navigator.getUserMedia) {
    navigator.getUserMedia(
        // constraints
        {
            video: true,
            audio: true
        },
        // successCallback
        function (localMediaStream) {
            var video = document.querySelector('video');
            video.src = window.URL.createObjectURL(localMediaStream);
            // Do something with the video
            video.play();
        },
        // errorCallback
        function (err) {
            console.log("The following error occured: " + err);
        }
    );
} else {
    alert("getUserMedia not supported by your web browser or Operating system version");
}
Comments