web-dev-qa-db-fra.com

navigator.getUserMedia ne fonctionne pas sur Android / Chrome

avez-vous une idée de pourquoi le code suivant ne fonctionne pas sur Android/Chrome?

Cela fonctionne bien sur Desktop/Chrome.

function console_log(data) {
        console.log(data)
        var data_str = String(data);
        var $div = $('<div></div>');
        $div.append(data_str);
        $('.console').append($div);
}
$(function(){
        var constraints = { audio: true, video:false }
        //---
        console_log('navigator.mediaDevices...');
        console_log(navigator.mediaDevices);
        //---
        // # TEST 01 #
        var userMedia = navigator.getUserMedia(constraints, function(){
                console_log('---');
                console_log('# TEST 01 # Inside Success Callback');
        }, function(err){
                console_log('---');
                console_log('# TEST 01 # Inside Error Callback');
                console_log(err);
        });
        //---
        navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
                console_log('---');
                console_log('# TEST 02 # Inside Success Callback');
        }).catch(function(err) {
                console_log('---');
                console_log('# TEST 02 # Inside Error Callback');
                console_log(err);
        });
});
body {
        font-family: arial;
        font-size: 14px;
}
.console {
        font-family: monospace;
        white-space: pre;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="console"></div>

Juste au cas où, vous avez ici les liens JSFiddle:

https://jsfiddle.net/2yum1a0w

Pour réussir, ouvrez avec Desktop/Chrome et allez à la section: Result...

https://jsfiddle.net/2yum1a0w/embedded

Sur Desktop/Chrome Je reçois:

navigator.mediaDevices...
[object MediaDevices]
---
# TEST 01 # Inside Success Callback
---
# TEST 02 # Inside Success Callback

Sur Android/Chrome Je reçois:

navigator.mediaDevices...
[object MediaDevices]
---
# TEST 01 # Inside Error Callback
NotAllowedError: Permission denied
---
# TEST 02 # Inside Error Callback
NotAllowedError: Permission denied

Et au fait, le Desktop/Firefox Je reçois:

navigator.mediaDevices...
[object MediaDevices]

avec l'erreur de console suivante:

TypeError: navigator.getUserMedia is not a function

Avez-vous une idée de comment faire fonctionner cela sur Android/Chrome?

EDIT 1

Sur la base de la réponse de Joseph Gordy ci-dessous, j'ai essayé:

https://jsfiddle.net/wrmvn8k4/

https://jsfiddle.net/wrmvn8k4/embedded

qui fonctionne désormais correctement sur Desktop/Firefox obtention:

navigator.mediaDevices...
[object MediaDevices]
---
# TEST # Inside Success Callback

mais le Android/Chrome Je reçois:

navigator.mediaDevices...
[object MediaDevices]
---
# TEST # Inside Error Callback
NotAllowedError: Permission denied

Merci!

javascriptandroidhtmlmedia
10
David Smith

J'ai eu le même problème. Le navigateur mobile n'a même pas demandé les autorisations. Et la raison en était SSL! Vous devez utiliser une connexion sécurisée

Vérifiez la section "Contexte sécurisé requis" ici

11
zvadym

Selon MDN, navigator.getUserMedia() est obsolète et n'est pas pris en charge sur Android/Chrome et certaines versions de navigateur plus récentes. Utilisez plutôt navigator.mediaDevices.getUserMedia() . Vous pouvez vérifier la compatibilité du navigateur ci-dessous.

vérification du navigateur MDN Navigator.getUserMedia

Voici un exemple partiel que j'ai utilisé pour accéder à la caméra pour le streaming vidéo dans un projet précédent. Le navigateur doit demander à l'utilisateur d'accéder à l'appareil.

if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ audio: false, video:  cameraOrientation })
    .then(function(stream) {
      if ("srcObject" in video) {
          video.srcObject = stream;
        } else {
          video.src = window.URL.createObjectURL(stream);
        }
        video.onloadedmetadata = function(e) {
          video.play();
        };
    });
};
1
Joseph Gordy