getUserMedia() alert if not supported on mobile browser

Question

I have a web page that requests use of the microphone. I understand that getUserMedia() has little or no support for mobile browsers but i'm trying to figure out a way of letting the viewer know that they need to visit the site on a supported browser. I'm trying not to use screensize media queries as support my slowly come in.

var onSuccess = function (stream) {
    alert('success');
};


navigator.getUserMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);
var constraints = { 
    video: false,
    audio: true
};
if (navigator.getUserMedia) {
    navigator.getUserMedia (
    constraints,
    onSuccess,
    function (error) {
        alert("Error: you need to allow access to use the microphone.",error)
    });
};

It's strange because the page loads fine as if getUserMedia() is available but no "allow access" message pops up?

Answer 1

You should need to alert if there's no getUserMedia also:

var onSuccess = function(stream) {
    alert('Success!');
}

var onError = function(error) {
    alert('Error :(');
}

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
navigator.msGetUserMedia;

if (navigator.getUserMedia) {
    navigator.getUserMedia({ video: false, audio: true }, onSuccess, onError);
} else {
    onError();
}

Also take a look to MediaDevices.getUserMedia