demander à nouveau les permissions avec getUserMedia() après un refus initial

Question

Comment faire pour demander l'accès à la caméra/microphone avec getUserMedia() après avoir essuyé un premier refus ?

Je travaille avec getUserMedia pour accéder à la caméra de l'utilisateur et transmettre les données à un canevas. Tout cela fonctionne bien.

Lors du test, j'ai appuyé une fois sur "refuser". À ce moment-là, dans Chrome et Firefox, toutes les requêtes suivantes avec getUserMedia() passent par défaut à l'état refusé.

Nous ne voulons évidemment pas ennuyer nos utilisateurs en demandant des autorisations pour la caméra/microphone à chaque chargement de page après avoir été refusées. C'est déjà assez ennuyeux avec l'api de géolocalisation.

Cependant, il doit y avoir un moyen de le demander à nouveau. Ce n'est pas parce qu'un utilisateur a appuyé une fois sur "refuser" qu'il veut refuser l'accès à la webcam pour toujours.

J'ai lu les spécifications et fait des recherches sur Internet depuis un moment, mais je ne trouve rien d'explicite sur ce problème.

Edit : Après une recherche plus approfondie, il semble que le fait de cliquer sur Refuser dans Chrome ajoute le site actuel à une liste de blocage. On peut y accéder manuellement via chrome://settings/content. Faites défiler jusqu'à Media. Gérer les exceptions, supprimer le(s) site(s) bloqué(s).

La création d'un lien vers chrome://settings/content ne fonctionne pas (dans le cas où nous voulons ajouter un lien utile pour permettre aux gens de réactiver les autorisations).

L'ensemble de l'interface utilisateur pour le traitement des permissions autour de getUserMedia pue. =(

Answer 1

La réponse de jeffreyveon permettra de réduire les chances que votre utilisateur choisisse le refus, puisqu'il n'aura à choisir qu'une seule fois.

Au cas où elle cliquerait sur "refuser", vous pouvez lui fournir un message expliquant pourquoi vous avez besoin de cette autorisation et comment mettre à jour son choix. Par exemple :

navigator.getUserMedia (
   // constraints
   {
      video: true,
      audio: true
   },

   // successCallback
   function(localMediaStream) {
      var video = document.querySelector('video');
      video.src = window.URL.createObjectURL(localMediaStream);
      video.onloadedmetadata = function(e) {
         // Do something with the video here.
      };
   },

   // errorCallback
   function(err) {
    if(err === PERMISSION_DENIED) {
      // Explain why you need permission and how to update the permission setting
    }
   }
);

Answer 2

Chrome met en œuvre le Permissions API sur navigator.permissions et cela s'applique à la fois camera y microphone les permissions aussi.

Donc à partir de maintenant, avant d'appeler getUserMedia() vous pouvez utiliser cette API pour demander l'état des autorisations pour votre caméra et votre microphone :

 navigator.permissions.query({name: 'microphone'})
 .then((permissionObj) => {
  console.log(permissionObj.state);
 })
 .catch((error) => {
  console.log('Got error :', error);
 })

 navigator.permissions.query({name: 'camera'})
 .then((permissionObj) => {
  console.log(permissionObj.state);
 })
 .catch((error) => {
  console.log('Got error :', error);
 })

Sur le succès, permissionObj.state rendrait denied , granted o prompt .

Question/réponse SF utile ici

Pour une solution multi-navigateur, une approche simple peut consister à surveiller la différence de temps entre le moment où l'icône de l getUserMedia() Promise est appelée, et lorsqu'elle est rejetée ou résolue, comme suit :

// In the Promise handlers, if Date.now() - now < 500 then we can assume this is a persisted user setting
var now = Date.now();
navigator.mediaDevices.getUserMedia({audio: true, video: false})
.then(function(stream) {
  console.log('Got stream, time diff :', Date.now() - now);
})
.catch(function(err) {
  console.log('GUM failed with error, time diff: ', Date.now() - now);
});

Este Article moyen donne plus de détails.

J'espère que cela vous aidera !

Answer 3

Utiliser HTTPS. Lorsque l'utilisateur donne son autorisation une fois, celle-ci est mémorisée et Chrome ne demande pas à nouveau l'autorisation pour cette page. Cela ne vous permet pas de forcer la barre d'autorisation à l'utilisateur, mais au moins de vous assurer que vous n'aurez pas à la demander une fois que l'utilisateur aura accordé l'autorisation.

Si votre application est exécutée à partir de SSL (https://), cette autorisation sera permanente. En d'autres termes, les utilisateurs n'auront pas à accorder/refuser l'accès à chaque fois.

Ver: http://www.html5rocks.com/en/tutorials/getusermedia/intro/

Answer 4

Veuillez prendre connaissance des points suivants.

1. Localhost: In Localhost Chrome Browser asking permission only one time and Firefox every pageload.

2. HTTPS: Both Browsers Chrome and Firefox asking permission only one time.

Answer 5

La réponse actualisée à cette question est que Chrome (actuellement en test sur la version 73) ne demande plus en permanence l'accès à la caméra lorsque la demande est effectuée via HTTP.

Firefox, par contre, le fait.