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

76

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. = ((

Geuis
quelle
1
Danke dafür. Ich konnte den Medienbereich nicht sehen, wenn ich direkt über Einstellungen> Erweiterte Einstellungen
anzeigen
Das Verweigern nachfolgender Anforderungen nach einmaligem Verweigern ist das Verhalten von Chrome und nicht von Firefox. Nur wenn Sie in der Dropdown-Liste auf einer https-Site "Immer ablehnen" auswählen, geschieht dies in Firefox.
Fock
1
In Chrome können Benutzer auf das Kamerasymbol in der URL-Leiste klicken, um einen vorherigen Block rückgängig zu machen oder die Blockliste zu verwalten. Keine Notwendigkeit, sich mit Chrome zu beschäftigen: // links
Fock

Antworten:

25

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
    }
   }
);
jrullmann
quelle
Kann ich vermeiden, beim Laden der Seite auf Kamerazugriff zulassen zu klicken? Kann es mit JavaScript gesteuert werden
Vivek Ranjan
5
Nein, kannst du nicht und zum Glück !!! Es würde Websites, Apps und was auch immer erlauben, ohne ihre Zustimmung auf Mediengeräte von Menschen zuzugreifen, was eine Vergewaltigung der Privatsphäre wäre ...
Flo Schild
20

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/

Jeffreyveon
quelle
2
HTTPs in Firefox behalten diese Berechtigung nicht bei.
Rui Marques
1
Dies funktioniert jetzt in Firefox, aber die Option "Immer teilen" ist unter dem Dropdown-Pfeil etwas versteckt.
Xdumaine
"Immer teilen" ist in Firefox etwas versteckt, genauso wie "Immer leugnen". Das Problem von OP tritt in Firefox nicht auf.
Fock
2
damit es in Firefox funktioniert: about:config-> media.navigator.permission.disabledFlag als wahr setzen, ursprüngliche Antwort
Mitte
Vielen Dank mido: das war verdammt nervig - funktioniert jetzt (Zugriff auf lokale USB-Webcam in der localhost-Datei: /// Webseite, die in Firefox 50 bereitgestellt wird, nachdem diese Webcam zunächst abgelehnt wurde). Cripes. : - /
Victoria Stuart
16

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!

Philippe Sultan
quelle
Laut developer.mozilla.org/en-US/docs/Web/API/Navigator/permissions werden Berechtigungen in der Internetansicht von Internet Explorer, Safari, Safari IOS und Android nicht unterstützt. Kennen Sie eine andere Methode, die hier verwendet werden kann? Ich habe auch eine Frage zu diesem stackoverflow.com/questions/64679982/… gestellt
anup
4

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.

user6254696
quelle
1

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.

Adrian Lynch
quelle
Wie erzwinge ich das Auftauchen? Es verhält sich so, als hätte ich keine Berechtigungen über HTTP für mein lokales Gerät.
Jonathan