web-dev-qa-db-fra.com

demander à nouveau les autorisations avec getUserMedia () après le refus initial

Comment procéder pour demander l'accès à la caméra/au microphone avec getUserMedia () après avoir été refusé une fois?

Je travaille avec getUserMedia pour accéder à la caméra de l'utilisateur et diriger les données vers un canevas. Ce bit fonctionne très bien.

Lors des tests, j'ai frappé deny une fois. À ce stade de Chrome et Firefox, toutes les demandes ultérieures avec getUserMedia () reviennent par défaut à l'état refusé.

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

Cependant, il doit y avoir un moyen de le demander à nouveau. Tout simplement parce qu'un utilisateur a cliqué sur refuser une fois ne signifie pas qu'il veut refuser l'accès à la webcam pour toujours.

J'ai lu sur la spécification et googlé pendant un certain temps, mais je ne trouve rien de explicite sur ce problème.

Modifier: des recherches plus approfondies, il semble que le fait de cliquer sur Refuser dans Chrome ajoute le site actuel à une liste de blocage. Il est possible d'y accéder manuellement via chrome: // settings/content. Faites défiler jusqu'à Média. Gérer les exceptions , supprimez le ou les sites bloqués.

La liaison avec 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'expérience utilisateur pour gérer les autorisations autour de getUserMedia pue. = (

javascriptwebrtcgetusermedia
54
Geuis

Utilisez HTTPS. Lorsque l'utilisateur accorde une autorisation une fois, il est mémorisé et Chrome ne demande pas à nouveau l'autorisation pour cette page et vous accédez immédiatement aux médias. Cela ne vous permet pas de forcer la barre d'autorisation sur l'utilisateur à nouveau, mais au moins s'assure que vous ne devez pas continuer à le demander une fois que l'utilisateur accorde l'autorisation une fois.

Si votre application s'exécute à partir de SSL (https: //), cette autorisation sera persistante. Autrement dit, les utilisateurs n'auront pas à accorder/refuser l'accès à chaque fois.

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

16
jeffreyveon

la réponse de jeffreyveon aidera à réduire les chances que votre utilisateur choisisse de refuser, car il n'aura à choisir qu'une seule fois.

Dans le cas où elle clique sur refuser, vous pouvez fournir un message qui explique pourquoi vous avez besoin de l'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
    }
   }
);
14
jrullmann

Chrome implémente les Permissions API dans navigator.permissions, Et cela s'applique également aux autorisations camera et microphone.

Donc, pour l'instant, avant d'appeler getUserMedia(), vous pouvez utiliser cette API pour interroger l'état d'autorisation de votre caméra et de 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);
 })

En cas de succès, permissionObj.state Renverrait denied, granted ou Prompt.

Question/réponse SF utile ici

Pour une solution multi-navigateur, une approche simple peut être de surveiller la différence de temps entre le moment où la promesse getUserMedia() est appelée et quand elle est rejetée ou résolue, comme ceci:

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

Cette article moyen donne plus de détails.

J'espère que cela t'aides!

4
Philippe Sultan

Veuillez être conscient des points ci-dessous.

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.

2
user6254696

La réponse mise à jour à cela est que Chrome (actuellement en test sur 73) ne demande plus en continu l'accès à la caméra lorsque la demande est via HTTP.

Firefox le fait cependant.

1
Adrian Lynch