nach anfänglicher Verweigerung erneute Eingabe von Berechtigungen mit getUserMedia()

Wie fordern wir den Kamera-/Mikrofonzugriff mit getUserMedia() an, nachdem er einmal verweigert wurde?

Ich arbeite mit getUserMedia, um auf die Kamera des Benutzers zuzugreifen und die Daten an eine Leinwand weiterzuleiten. Das bisschen alles funktioniert gut.

Beim Testen habe ich einmal deny gedrückt. An diesem Punkt in Chrome und Firefox werden alle nachfolgenden Anfragen mit getUserMedia() standardmäßig in den verweigerten Zustand versetzt.

Wir möchten unsere Benutzer natürlich nicht zu Tode ärgern, indem wir bei jedem Seitenaufruf Berechtigungen für Kamera/Mikrofon anfordern, nachdem diese verweigert wurden. Das ist bei der Geolocation-API schon nervig genug.

Es muss jedoch eine Möglichkeit geben, es erneut anzufordern. Nur weil ein Benutzer einmal auf „Verweigern“ geklickt hat, heißt das nicht, dass er den Webcam-Zugriff für immer verweigern möchte.

Ich habe eine Weile über die Spezifikation gelesen und gegoogelt, aber ich finde nichts explizit zu diesem Problem.

Bearbeiten: Nach weiteren Recherchen scheint es, dass das Drücken von Verweigern in Chrome die aktuelle Website zu einer Sperrliste hinzufügt. Dies kann manuell über chrome://settings/content aufgerufen werden. Scrollen Sie zu Medien. Ausnahmen verwalten, blockierte Seite(n) entfernen.

Die Verknüpfung mit chrome://settings/content funktioniert nicht (falls wir einen hilfreichen Link hinzufügen möchten, damit Benutzer Berechtigungen wieder aktivieren können).

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

Die Antwort von Jeffreyveon wird dazu beitragen, die Wahrscheinlichkeit zu verringern, dass Ihr Benutzer sich für Verweigern entscheidet, da er nur einmal wählen muss.

Falls sie auf „Ablehnen“ klickt, können Sie eine Nachricht bereitstellen, die erklärt, warum Sie die Erlaubnis 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
    }
   }
);

Chrome implementiert die Permissions API in navigator.permissionsund das gilt für beide camera und microphone Berechtigungen auch.

Also ab sofort, bevor Sie anrufen getUserMedia()könnten Sie 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.state würde zurückkehren denied, granted oder prompt.

Nützliche SF-Frage/Antwort hier

Für eine Cross-Browser-Lösung kann ein einfacher Ansatz darin bestehen, den Zeitunterschied zwischen dem Zeitpunkt der getUserMedia() Promise wird aufgerufen, und wenn es abgelehnt oder gelöst wird, wie folgt:

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

Dies Mittlerer Artikel gibt mehr Details.

Hoffe das hilft!

Verwenden Sie HTTPS. Wenn der Benutzer einmal die Erlaubnis erteilt, wird dies gespeichert und Chrome fragt nicht erneut nach der Erlaubnis für diese Seite und Sie erhalten sofort Zugriff auf die Medien. Dies bietet Ihnen keine Möglichkeit, die Berechtigungsleiste erneut für den Benutzer zu erzwingen, stellt aber zumindest 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, ist diese Berechtigung dauerhaft. Das heißt, Benutzer müssen den Zugriff nicht jedes Mal gewähren/verweigern.

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

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 kontinuierlich zum Kamerazugriff auffordert, wenn die Anfrage über HTTP erfolgt.

Firefox hingegen schon.

Idealerweise sollten Sie in der Lage sein, die zu verwenden Berechtigungs-API vor dem Anruf getUserMedia() um herauszufinden, ob der Benutzer bereits Zugriff auf Kamera und Mikrofon gewährt oder verweigert hat, sondern dies ist noch nicht auf Safari verfügbar was einen erheblichen Teil der Benutzer ausmacht. Berufung getUserMedia() tritt in einem der folgenden Fälle ein Fehler auf:

• Der Benutzer klickt auf „Blockieren“ und lässt den Kamera-/Mikrofonzugriff nicht zu
• Der Browser selbst hat keine Systemberechtigung für den Zugriff auf die Kamera oder das Mikrofon (häufig bei macOS).
• eine andere App wie Zoom verwendet bereits den Videostream (häufig unter Windows)
• …und mehr

Sie sollten in jedem dieser Fälle erneut nach Berechtigungen fragen, nachdem der Benutzer das Problem behoben hat.

Philippe Sultans Antwort für die Verwendung getUserMedia() ist eine großartige Lösung, um Kamera- und Mikrofonberechtigungen in allen Browsern abzufragen. Leider gehen die Fehler aus getUserMedia() sind wild inkonsistent über Browser und Betriebssysteme hinweg. Chrome zeigt „NotReadableError“ und „NotAllowedError“ an, während Firefox „NotFoundError“ oder „NotAllowedError“ anzeigt. Und Firefox ist der einzige Browser mit irgendeiner Art von Fehlerdokumentation.

Du kannst den … benutzen mic-check Paket, um Berechtigungen für die Kamera und das Mikrofon anzufordern. Es überprüft den Browser/das Betriebssystem, um alle Fehler in Fehlerkategorien zu gruppieren, die vom Benutzer besser bearbeitet werden können, z. B. UserPermissionDenied, SystemPermissionDenied und CouldNotStartVideoSource.

Installieren Sie es mit npm i mic-check oder yarn add mic-check.

Verwenden Sie es mit dem folgenden Code:

import {
  MediaPermissionsError
  MediaPermissionsErrorType,
  requestMediaPermissions
} from 'mic-check';

requestMediaPermissions()
    .then(() => {
        // can successfully access camera and microphone streams
        // DO SOMETHING HERE
    })
    .catch((err: MediaPermissionsError) => {
        const { type, name, message } = err;
        if (type === MediaPermissionsErrorType.SystemPermissionDenied) {
            // browser does not have permission to access camera or microphone
        } else if (type === MediaPermissionsErrorType.UserPermissionDenied) {
            // user didn't allow app to access camera or microphone
        } else if (type === MediaPermissionsErrorType.CouldNotStartVideoSource) {
            // camera is in use by another application (Zoom, Skype) or browser tab (Google Meet, Messenger Video)
            // (mostly Windows specific problem)
        } else {
            // not all error types are handled by this library
        }
    });

Hoffe das hilft! Sie können auch mehr über das Problem erfahren hier.