web-dev-qa-db-ja.com

iOS 11 Safari getUserMediaの「無効な制約」問題を解決する方法

IOS 11のSafariで次のコードを実行しようとしています。デバイスのカメラへのアクセス権をユーザーに求め、_<video autoplay id="video"></video>_要素に表示する必要があります。ただし、iOS 11で実行すると、OverconstrainedErrorがスローされます。

_{message: "Invalid constraint", constraint: ""}
_
  • コードはAndroidで正常に実行され、カメラが正常に開きます。
  • 幸運にも複数の有効な構成を試みました。

IOS 11がリリースされたばかりなので、バグかもしれませんが、何か考えはありますか？他の誰かがこれに遭遇しましたか？

コード：

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

編集1

navigator.mediaDevices.getSupportedConstraints()を実行しましたが、次の結果が返されます。

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

videoプロパティを省略して構成を試みましたが、運がありませんでした。

javascriptcameramediaios11
13
mb-ca

修正したバグのようです。もう一度試したところ、エラーメッセージが表示されなくなったためです。

エラーメッセージは消えましたが、thenコールバックにvideo.srcObject = stream;を追加して、動作させるためにもう1つ変更を行う必要がありました。

3
mb-ca

サファリの無効な制約エラーは、ブラウザが正しい幅を渡すことを期待しているためです：

  • 320
  • 640
  • 1280

高さは、320または640のアスペクト比4：3、1280の16：9で自動計算され、幅320を渡すと、ビデオストリームが次のように設定されます。

  • 320x240

幅を640に設定すると、ビデオストリームは次の場所に設定されます。

  • 640x480

また、幅を1280に設定すると、ビデオストリームは次のように設定されます。

  • 1280x720

それ以外の場合、幅の値に対してエラー「InvalidConstrain」が発生しました。

また、幅に最小、最大、正確、または理想的な制約を使用できます。 MDNドキュメント を確認してください

ここにこの例があります 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：chrome高さの幅を設定でき、ビデオストリームはこれらのサイズに設定できます。Firefoxは 適合距離 を実行し、Safariは完全に一致することを期待します。

13
kintaro

Xcodeに付属のiOSシミュレーターはWebカメラまたはマイクをサポートしていないことに注意してください。そのため、OverconstrainedErrorが発生する可能性があります（ https://developer.mozilla.org/en-US/に従って） docs/Web/API/MediaDevices/getUserMedia docs、つまり、あなたが特定のものを入れていなくても、渡されたオプションに適合するデバイスがないことを意味します

2
Tom Roggero