¿Es posible comprobar si el usuario tiene cámara y micrófono y si los permisos se han concedido con Javascript?

Tenemos la mejor solución que encontramos por todo internet. Nosotros esperamos que te sea útil y si puedes comentarnos algún detalle que nos pueda ayudar a perfeccionar nuestra información hazlo con total libertad.

Solución:

Demo en vivo:

• https://www.webrtc-experiment.com/DetectRTC/

Si el usuario no permitió la cámara web y / o el micrófono, los dispositivos multimedia tendrán “NULO” valor para el “etiqueta” attribute. La página anterior mostrará este mensaje: “Por favor, invoca getUserMedia una vez”.

PD. Puedes escribir “DetectRTC.MediaDevices” en la herramienta para desarrolladores de Chrome Console.

Nota: solo funciona en Chrome. Firefox aún no admite una API similar. (Actualizado: Firefox también es compatible)

Actualizado el 16 de diciembre de 2015

Nota: El siguiente fragmento de código funciona tanto en Chrome como en Firefox.

if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) 
    // Firefox 38+ seems having support of enumerateDevicesx
    navigator.enumerateDevices = function(callback) 
        navigator.mediaDevices.enumerateDevices().then(callback);
    ;


var MediaDevices = [];
var isHTTPs = location.protocol === 'https:';
var canEnumerate = false;

if (typeof MediaStreamTrack !== 'undefined' && 'getSources' in MediaStreamTrack) 
    canEnumerate = true;
 else if (navigator.mediaDevices && !!navigator.mediaDevices.enumerateDevices) 
    canEnumerate = true;


var hasMicrophone = false;
var hasSpeakers = false;
var hasWebcam = false;

var isMicrophoneAlreadyCaptured = false;
var isWebcamAlreadyCaptured = false;

function checkDeviceSupport(callback) 
    if (!canEnumerate) 
        return;
    

    if (!navigator.enumerateDevices && window.MediaStreamTrack && window.MediaStreamTrack.getSources) 
        navigator.enumerateDevices = window.MediaStreamTrack.getSources.bind(window.MediaStreamTrack);
    

    if (!navigator.enumerateDevices && navigator.enumerateDevices) 
        navigator.enumerateDevices = navigator.enumerateDevices.bind(navigator);
    

    if (!navigator.enumerateDevices) 
        if (callback) 
            callback();
        
        return;
    

    MediaDevices = [];
    navigator.enumerateDevices(function(devices) 
        devices.forEach(function(_device) 
            var device = ;
            for (var d in _device) 
                device[d] = _device[d];
            

            if (device.kind === 'audio') 
                device.kind = 'audioinput';
            

            if (device.kind === 'video') 
                device.kind = 'videoinput';
            

            var skip;
            MediaDevices.forEach(function(d) 
                if (d.id === device.id && d.kind === device.kind) 
                    skip = true;
                
            );

            if (skip) 
                return;
            

            if (!device.deviceId) 
                device.deviceId = device.id;
            

            if (!device.id) 
                device.id = device.deviceId;
            

            if (!device.label) 
                device.label = 'Please invoke getUserMedia once.';
                if (!isHTTPs) 
                    device.label = 'HTTPs is required to get label of this ' + device.kind + ' device.';
                
             else 
                if (device.kind === 'videoinput' && !isWebcamAlreadyCaptured) 
                    isWebcamAlreadyCaptured = true;
                

                if (device.kind === 'audioinput' && !isMicrophoneAlreadyCaptured) 
                    isMicrophoneAlreadyCaptured = true;
                
            

            if (device.kind === 'audioinput') 
                hasMicrophone = true;
            

            if (device.kind === 'audiooutput') 
                hasSpeakers = true;
            

            if (device.kind === 'videoinput') 
                hasWebcam = true;
            

            // there is no 'videoouput' in the spec.

            MediaDevices.push(device);
        );

        if (callback) 
            callback();
        
    );


// check for microphone/camera support!
checkDeviceSupport(function() 
    document.write('hasWebCam: ', hasWebcam, '
');
    document.write('hasMicrophone: ', hasMicrophone, '
');
    document.write('isMicrophoneAlreadyCaptured: ', isMicrophoneAlreadyCaptured, '
');
    document.write('isWebcamAlreadyCaptured: ', isWebcamAlreadyCaptured, '
');
);

Sí, es bastante posible detectar si un micrófono y una cámara están disponibles después de otorgar el permiso,

navigator.getUserMedia( audio: true, video: true,function (stream) 
     if(stream.getVideoTracks().length > 0 && stream.getAudioTracks().length > 0)
         //code for when none of the devices are available                       
     else
        // code for when both devices are available
     
);

1) Debería utilizar Media Recorder y comprender la promesa

2) Compruebe si el navegador es compatible con la API enumerateDevices

if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) 
  console.log("This browser does not support the API yet");

3) Compruebe si el usuario ha conectado el audio y la cámara, los únicos valores son “entrada de video”, “entrada de audio” o “salida de audio” DeviceInfo.kind

let checking=["audioinput","videoinput"];
let onlyHas=[];
navigator.mediaDevices.enumerateDevices()
.then((devices)=> 
  let haveAllDevices=true;
  devices.forEach((device)=> device.kind==checking[1]))
    haveAllDevices=false;
    
   );
   //do something about ...
  
  
  
)
.catch(function(err) 
  console.log(err.name + ": " + err.message);
);

4) Los permisos se reutilizan, significa que si el usuario ya ha denegado el permiso, cuando llame a getUserMedia, el bowser no solicitará nada y rechazará la promesa de promesa arrojando un error de tipo DOMException; de lo contrario, resolverá la promesa. Cuando la promesa se rechaza, se pueden leer muchas razones, una de ellas es cuando el usuario ha denegado el acceso, cuando esto sucede, arrojará una DOMException de tipo NotAllowedError, por lo que por ahora solo nos interesa este error.

Si lee DOMException, puede ver que puede acceder DOMException.name, este es el que debes comparar, así que:

let constraints=audio:true,video:true;
navigator.mediaDevices.getUserMedia(constraints)
  .then((stream)=>.....)
  .catch((err)=>
    if(err.name=="NotAllowedError")console.log("User has denied accessed")
    );

PD: Acerca de la compatibilidad entre navegadores MediaRecorder a partir de hoy 09/06/2018 solo es compatible con Chrome y Firefox, y los hermanos IE e IOS no https://caniuse.com/#search=MediaRecorder

Comentarios y valoraciones de la guía

Si tienes alguna perplejidad y forma de enriquecer nuestro noticia te recordamos realizar un comentario y con gusto lo interpretaremos.

---

---

Utiliza Nuestro Buscador