Demo en direct:

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

Si l'utilisateur n'a pas autorisé la webcam et / ou le microphone, les périphériques multimédia auront une valeur "NULL" pour l'attribut "label" . La page ci-dessus affichera ce message: "Veuillez appeler getUserMedia une fois."

PS. Vous pouvez taper "DetectRTC.MediaDevices" dans l'outil de développement de la console Chrome.

Remarque: Il fonctionne uniquement en Chrome. Firefox ne supporte pas encore d'API similaire . ( Mise à jour: Firefox prend également en charge)

Mis à jour le 16 décembre 2015

Remarque: L'extrait de code suivant fonctionne à la fois dans Chrome et 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, '<br>'); document.write('hasMicrophone: ', hasMicrophone, '<br>'); document.write('isMicrophoneAlreadyCaptured: ', isMicrophoneAlreadyCaptured, '<br>'); document.write('isWebcamAlreadyCaptured: ', isWebcamAlreadyCaptured, '<br>'); }); 

Oui, il est tout à fait possible de détecter si un microphone et une caméra sont disponibles après avoir accordé la permission,

 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 } }); 

Vous pouvez utiliser MediaStreamTrack qui représente un flux multimédia, puis vous pouvez utiliser sa méthode getSources comme expliqué ici: html5rocks

Si vous n'obtenez aucune source média, votre client n'a pas de webcam. Ce n'est pas compatible avec Firefox.

Essayez mon code de navigateur simple.

Attention!!! Utilisez le protocole https pour la page Web ouverte avec mon code! Aller à la démonstration

 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h1>Web camera</h1> <video autoplay></video> <script> function errorMessage(message, e) { console.error(message, typeof e == 'undefined' ? '' : e); //alert(message); } if (location.protocol === 'https:') { navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; if (navigator.getUserMedia) { navigator.getUserMedia({ audio: true, video: true }, function (stream) { document.querySelector('video').src = window.URL.createObjectURL(stream); var mediaStreamTrack = stream.getVideoTracks()[0]; if (typeof mediaStreamTrack != "undefined") { mediaStreamTrack.onended = function () {//for Chrome. errorMessage('Your webcam is busy!') } } else errorMessage('Permission denied!'); }, function (e) { var message; switch (e.name) { case 'NotFoundError': case 'DevicesNotFoundError': message = 'Please setup your webcam first.'; break; case 'SourceUnavailableError': message = 'Your webcam is busy'; break; case 'PermissionDeniedError': case 'SecurityError': message = 'Permission denied!'; break; default: errorMessage('Reeeejected!', e); return; } errorMessage(message); }); } else errorMessage('Uncompatible browser!'); } else errorMessage('Use https protocol for open this page.') </script> </body> </html>