アスペクト比が1：1で使用可能な解像度が最大のウェブカメラストリームを取得する方法

Question

基本的に質問はタイトルにあります。これはWebRTCとgetUserMedia関数です。同様の質問がここにあった：How to keep 1:1 aspect ratio video all the time in WebRTC。しかし私の場合、私はMediaRecorderを使ってストリームを記録する必要があります。ちょうどcssでビデオ要素を切り抜くだけでは不十分です。 私はgetUserMediaの制約について少し混乱しています。 aspectRatioパラメータがありますが、必要な結果を得る方法を管理しませんでした。

const constraints = { 
    audio: true, 
    video: { 
    width: { exact: 720 }, 
    } 
}; 

しかし、それは自動的に最大解像度を定義するものではありません。どのようにスマートな方法でそれを行うためのアイデアはありますか？

Answer 1

すべてのカメラがすべてのアスペクト比をサポートするわけではありません。 1:1は確かに奇妙なアスペクト比です。

あなたがしなければならないことは、あなた自身のクロッピングを行い、自分のストリームを作ることです。これを行うには、ビデオのsrcObjectをgetUserMediaStreamに設定し、すべてのフレーム（requestAnimationFrame()を使用）を、キャンバスに描画します。そこから、CanvasCaptureMediaStreamを使用して、編集したビデオをWebRTCコールで使用できるストリームに戻します。