IOS 11のSafariで次のコードを実行しようとしています。デバイスのカメラへのアクセス権をユーザーに求め、_<video autoplay id="video"></video>
_要素に表示する必要があります。ただし、iOS 11で実行すると、OverconstrainedError
がスローされます。
_{message: "Invalid constraint", constraint: ""}
_
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);
});
}
_
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
プロパティを省略して構成を試みましたが、運がありませんでした。
修正したバグのようです。もう一度試したところ、エラーメッセージが表示されなくなったためです。
エラーメッセージは消えましたが、then
コールバックにvideo.srcObject = stream;
を追加して、動作させるためにもう1つ変更を行う必要がありました。
サファリの無効な制約エラーは、ブラウザが正しい幅を渡すことを期待しているためです:
高さは、320または640のアスペクト比4:3、1280の16:9で自動計算され、幅320を渡すと、ビデオストリームが次のように設定されます。
幅を640に設定すると、ビデオストリームは次の場所に設定されます。
また、幅を1280に設定すると、ビデオストリームは次のように設定されます。
それ以外の場合、幅の値に対してエラー「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は完全に一致することを期待します。
Xcodeに付属のiOSシミュレーターはWebカメラまたはマイクをサポートしていないことに注意してください。そのため、OverconstrainedErrorが発生する可能性があります( https://developer.mozilla.org/en-US/に従って) docs/Web/API/MediaDevices/getUserMedia docs、つまり、あなたが特定のものを入れていなくても、渡されたオプションに適合するデバイスがないことを意味します