it-swarm.com.de

So beheben Sie das "Ungültige Einschränkung" -Problem von iOS 11 Safari getUserMedia

Ich versuche, den folgenden Code in Safari unter iOS 11 auszuführen. Er sollte den Benutzer auffordern, Zugriff auf die Kamera seines Geräts zu gewähren, und ihn dann in meinem <video autoplay id="video"></video> - Element anzeigen. Unter iOS 11 wird jedoch ein OverconstrainedError ausgelöst:

{message: "Invalid constraint", constraint: ""}
  • Der Code läuft einwandfrei in Android und öffnet die Kamera erfolgreich.
  • Ich habe mehrere gültige Konfigurationen ohne Glück versucht.

Ich weiß, dass iOS 11 gerade herausgekommen ist, also kann es ein Fehler sein, aber irgendwelche Gedanken? Ist noch jemand darauf gestoßen?

Code:

var video = document.getElementById('video');
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
     navigator.mediaDevices.getUserMedia({video: true})
         .then(function(stream) {
             video.src = window.URL.createObjectURL(stream);
             video.play();
         })
         .catch(function(err) {
             console.log(err);
         });
}

Bearbeiten 1

Ich habe navigator.mediaDevices.getSupportedConstraints() ausgeführt und es gibt Folgendes zurück:

{
    aspectRatio: true,
    deviceid: true,
    echoCancellation: false,
    facingMode: true,
    frameRate: true,
    groupId: true,
    height: true,
    sampleRate: false,
    sampleSize: false,
    volume: true,
    width: true
}

Ich habe versucht, Konfigurationen ohne die Eigenschaft video auszuführen, hatte aber kein Glück.

13
mb-ca

Es scheint ein Bug gewesen zu sein, der behoben wurde, weil ich es gerade noch einmal versucht habe und die Fehlermeldung nicht mehr erscheint.

Beachten Sie, dass ich, während die Fehlermeldung verschwand, noch eine Änderung vornehmen musste, damit sie funktioniert. Dabei wurde video.srcObject = stream; In den Rückruf von then eingefügt.

3
mb-ca

Der ungültige Einschränkungsfehler in Safari besteht darin, dass der Browser erwartet, dass Sie eine korrekte Breite übergeben.

  • 320
  • 640
  • 1280

die Höhe wird automatisch in einem Seitenverhältnis von 4: 3 für 320 oder 640 und 16: 9 für 1280 berechnet. Wenn Sie eine Breite von 320 überschreiten, wird der Videostream wie folgt eingestellt:

  • 320 x 240

wenn Sie eine Breite von 640 festlegen, wird der Videostream wie folgt festgelegt:

  • 640 x 480

Und wenn Sie eine Breite von 1280 einstellen, wird Ihr Videostream wie folgt eingestellt:

  • 1280 x 720

In allen anderen Fällen erhalten Sie die Fehlermeldung "InvalidConstrain" für den Breitenwert.

Sie können auch eine minimale, maximale, exakte oder ideale Beschränkung für die Breite verwenden. Lesen Sie hierzu bitte MDN-Dokumentation

Hier ein Beispiel in diesem Codepen

var config = { video: { width: 320/*320-640-1280*/ } };
var start = () => navigator.mediaDevices.getUserMedia(config)
  .then(stream => v.srcObject = stream)
  .then(() => new Promise(resolve => v.onloadedmetadata = resolve))
  .then(() => log("Success: " + v.videoWidth + "x" + v.videoHeight))
  .catch(log);

var log = msg => div.innerHTML += "<p>" + msg + "</p>";

PD: In chrome) können Sie eine Höhe einstellen und der Videostream wird in diesen Größen eingestellt, Firefox führt eine Fitnessdistanz aus und Safari erwartet eine genaue Übereinstimmung.

13
kintaro

Denken Sie daran, dass der mit Xcode gelieferte iOS-Simulator keine Webcam oder kein Mikrofon unterstützt. Aus diesem Grund erhalten Sie möglicherweise den OverconstrainedError (gemäß https://developer.mozilla.org/en-US/docs/Web/API)/MediaDevices/getUserMedia docs, das heißt, kein Gerät passt zu den übergebenen Optionen, auch wenn Sie keine Details angeben.)

2
Tom Roggero