webentwicklung-frage-antwort-db.com.de

Navigator.mediaDevices.getUserMedia funktioniert nicht unter iOS 12 Safari

Ab iOS 12 gibt navigator.mediaDevices.getUserMedia() einen Fehler in Safari zurück.

Um dies neu zu erstellen, öffnen Sie iPhone Web Inspector und führen Sie dann dieses Snippet in der Konsole aus:

var constraints = { audio: true, video: { width: 1280, height: 720 } }; 

navigator.mediaDevices.getUserMedia(constraints)
  .then(function() {
    console.log('getUserMedia completed successfully.');
  })
  .catch(function(error) {
    console.log(error.name + ": " + error.message);
  });

Sie werden feststellen, dass dies in Desktop-Browsern und in iOS 11 Safari erfolgreich ausgeführt wird, in iOS 12 Safari jedoch fehlschlägt.

NotAllowedError: Die Anforderung ist vom Benutzeragenten oder der Plattform im aktuellen Kontext nicht zulässig, möglicherweise weil der Benutzer die Berechtigung verweigert hat.

Irgendeine Idee warum?

note: Dies geschieht, bevor der Benutzer gefragt wird, ob auf seine Kamera zugegriffen werden kann. Dies schließt die Möglichkeit aus, dass der Benutzer die Berechtigung verweigert.

iosiphonewebrtcgetusermediaios12
4
Severisth

Es gibt zwei mögliche Gründe für die sofortige NotAllowedError im Moment:

1. getUserMedia benötigt https

Safari scheint https für den Zugriff auf Kamera und Mikrofon zu benötigen, sowohl unter iOS als auch unter OSX.

Mit einem https-Link funktioniert iOS Safari 12 für mich; Gleicher Link in http erhält NotAllowedError.

Chrome hat die gleiche Anforderung. Dies stimmt mit der direction der Spezifikation überein, die kürzlichgetUserMedia beschränkt hat, um Kontexte zu sichern. Browser, die noch nicht aktualisiert wurden, machen navigator.mediaDevices in http weiterhin verfügbar, getUserMedia lehnt jedoch immer mit NotAllowedError ab. 

Erwarten Sie in der Zukunft, dass Browser mediaDevices vollständig in http entfernen, um die Spezifikation einzuhalten. 

2. getUserMedia erfordert eine Feature-Richtlinie in Cross-Origin-iframes.

Dies wird in Safari 12 als neu angezeigt. In iframes ist die Feature-Richtlinie von getUserMedia für Cross-Origin-Inhalte standardmäßig deaktiviert.

Das funktioniert für mich:

<iframe
  allow="camera;microphone"
  src="https://webrtc.github.io/samples/src/content/getusermedia/gum/">
</iframe>

Das funktioniert nicht :

<iframe src="https://webrtc.github.io/samples/src/content/getusermedia/gum/">
</iframe>

... und zusätzlich zum Versagen mit NotAllowedError warnt Safari in der Webkonsole:

The top-level frame has prevented a document with a different security Origin to
call getUserMedia.

Dies ist auch ein aktuelles Update von der Spezifikation .

3
jib

Das Festlegen dieser drei Attribute vor dem Aufruf von getUserMedia hat das Problem für mich gelöst:

    video.setAttribute('autoplay', '');
    video.setAttribute('muted', '');
    video.setAttribute('playsinline', '');

Aus irgendeinem Grund funktioniert video.setAttribute(), aber der Versuch, den Wert direkt dem Videoobjekt zuzuweisen, video.muted = '' nicht.

Es scheint auch, dass es nicht notwendig ist, video.play() aufzurufen. 

Das Setzen von video.srcObject auf den von getUserMedia zurückgegebenen Stream hat für mich funktioniert.

Dieses Medium Post hat einen Link zu einem funktionierenden Demo & Quellcode.

0
braitsch

Es stellte sich heraus, dass mein spezielles Problem ein Fehler im 12.01 war. Jedes Gerät mit dieser Version hatte das Problem, und sobald ich sie auf eine neuere Version aktualisierte, verschwand es.

0
Severisth