Nach der ersten Verweigerung mit getUserMedia () erneut auf Berechtigungen prüfen

Wie können wir mit getUserMedia () den Zugriff auf Kamera / Mikrofon anfordern, nachdem dies einmal verweigert wurde?

Ich arbeite mit getUserMedia zusammen, um auf die Kamera des Benutzers zuzugreifen und die Daten auf eine Leinwand zu leiten. Das Bit funktioniert alles gut.

Beim Testen habe ich einmal auf Verweigern geklickt. Zu diesem Zeitpunkt in Chrome und Firefox wird für alle nachfolgenden Anforderungen mit getUserMedia () standardmäßig der Status "Verweigert" verwendet.

Wir möchten unsere Benutzer natürlich nicht ärgern, indem wir bei jedem Seitenladevorgang nach Verweigerung Berechtigungen für Kamera / Mikrofon anfordern. Das ist schon nervig genug mit der Geolocation API.

Es muss jedoch eine Möglichkeit geben, es erneut anzufordern. Nur weil ein Benutzer einmal auf "Verweigern" klickt, bedeutet dies nicht, dass er den Webcam-Zugriff für alle Zeiten verweigern möchte.

Ich habe eine Weile über die Spezifikation gelesen und gegoogelt, aber ich finde nichts explizites über dieses Problem.

Bearbeiten: Weitere Untersuchungen haben ergeben, dass durch Klicken auf Verweigern in Chrome die aktuelle Site zu einer Sperrliste hinzugefügt wird. Dies kann manuell über chrome: // settings / content erreicht werden. Scrollen Sie zu Medien. Ausnahmen verwalten, blockierte Site (s) entfernen.

Das Verknüpfen mit chrome: // settings / content funktioniert nicht (in dem Fall, in dem wir einen hilfreichen Link hinzufügen möchten, damit Benutzer die Berechtigungen wieder aktivieren können).

Die gesamte UX für den Umgang mit Berechtigungen rund um getUserMedia stinkt. = ((

Die Antwort von Jeffreyveon verringert die Wahrscheinlichkeit, dass Ihr Benutzer die Option "Verweigern" wählt, da er nur einmal auswählen muss.

Falls sie auf Verweigern klickt, können Sie eine Nachricht bereitstellen, in der erläutert wird, warum Sie die Berechtigung benötigen und wie Sie ihre Auswahl aktualisieren können. Zum Beispiel:

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

Verwenden Sie HTTPS. Wenn der Benutzer einmal eine Erlaubnis erteilt, wird diese gespeichert und Chrome fordert nicht erneut um Erlaubnis für diese Seite an, und Sie erhalten sofort Zugriff auf die Medien. Dies bietet Ihnen keine Möglichkeit, dem Benutzer die Berechtigungsleiste erneut aufzuzwingen, aber zumindest stellen Sie sicher, dass Sie nicht ständig danach fragen müssen, sobald der Benutzer die Berechtigung einmal erteilt hat.

Wenn Ihre App über SSL (https: //) ausgeführt wird, bleibt diese Berechtigung bestehen. Das heißt, Benutzer müssen nicht jedes Mal Zugriff gewähren / verweigern.

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

Chrome implementiert das Permissions APIIn navigator.permissions, und das gilt sowohl für cameraals auch für microphoneBerechtigungen.

Ab sofort können Sie vor dem Aufruf getUserMedia()diese API verwenden, um den Berechtigungsstatus für Ihre Kamera und Ihr Mikrofon abzufragen:

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

Bei Erfolg permissionObj.statewürde zurückkehren denied, grantedoder prompt.

Nützliche SF Frage / Antwort hier

Bei einer browserübergreifenden Lösung kann ein einfacher Ansatz darin bestehen, den Zeitunterschied zwischen dem getUserMedia()Aufruf des Versprechens und dem Ablehnen oder Auflösen des Versprechens zu überwachen.

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

Dieser mittlere Artikel enthält weitere Details.

Hoffe das hilft!

Bitte beachten Sie die folgenden Punkte.

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.

Die aktualisierte Antwort darauf lautet, dass Chrome (derzeit auf 73 getestet) nicht mehr ständig zum Kamerazugriff auffordert, wenn die Anforderung über HTTP erfolgt.

Firefox tut dies jedoch.