すべてのデバイスでgetUserMediaと16：9の比率を強制する方法はありますか？

Question

ビデオはのの16：9の記録に設定されていますが、getUserMediaを使用する必要があります。

私のコードは、ほとんどのデスクトップ上やAndroidの7上で動作し、上記

：あまりにもアンドロイド6上や下に、そしていくつかのデスクトップ上

navigator.getUserMedia({ 
    audio: true, 
    video: { 
     mandatory: { 
      minWidth: 380, 
      minHeight: 214, 
      maxWidth: 380, 
      maxHeight: 214 
     } 
    } 
}) 

をしかし、（正確にどの把握することはできません）、getUserMedia休憩、とカメラから画像を使用することはできません。

これはすべてのデバイスとデスクトップが、4のデフォルトの解像度比とに取り組んでいます：9：：私は16を必要としながら、3

navigator.getUserMedia({ 
    audio: true, 
    video: true 
}) 

私は、mandatoryを省略運を試していません。

、私の混乱へのiOSデバイス（11ベータ版）を追加すると、AndroidはfacingMode引数渡しが必要です。だから、

video: { facingMode: 'user' } 

を、widthとheight引数を渡すことのようないくつかのデスクトップやデバイス上でgetUserMediaを破るようですAndroid 5,6。

すべてのデバイスで16：9の比率を強制する方法はありますか？特定のディメンションのビデオをキャプチャする正しい、従来の方法は何ですか？

Answer 1

すべてのカメラが16：9をサポートしていると仮定しているか、すべてのブラウザが動画をトリミングしているとします。そうではありません。古いAPIも使用しています。 the latest API（fiddle、samples）を試してみてください。その中心に

var constraints = {video: {width: 320, height: 180, facingMode: "user"}}; 

navigator.mediaDevices.getUserMedia(constraints) 
.then(stream => video.srcObject = stream) 
.then(() => new Promise(resolve => video.onloadedmetadata = resolve)) 
.then(() => log(video.videoWidth +"x"+ video.videoHeight)) 
.catch(e => console.log(e)); 

getUserMediaは、カメラ/マイク発見 APIである：すべてのmin、max、exact、idealキーワードがのためのあなたの許容範囲、すなわち、あなたの制約を記述するために存在しますなしあなたがしたいものを得る。

私はaspectRatioという制約を提案しますが、誰もそれをまだ実装していません。許容範囲を減らすためのもう一つの制約です。

現時点では、Chromeだけがダウンスケールされ、カメラの出力を必要なサイズに正確に切り抜くことができます。これはほとんどの人が望むものだが、ユーザーのカメラはほとんど見つかっていない。他に多くの需要があるわけではないので、他のブラウザが続くかもしれませんが、現在はダウンスケールされていません。

でも、Chromeでもアップスケールされないため、AndroidでChromeを使用している場合は、Android 6デバイスが出力できる解像度よりも高い解像度を求められる可能性があります。この場合はOverconstrainedErrorを確認し、低い値で再試行してください。

要するに、最終的にユーザーのカメラとそのブラウザに依存するので、あなたが望む正確なサイズを取得するとは限りません。

しかし、HTMLVideoElementは再生時にダウンスケールされ、use CSSをトリミングすることができます。