html5 getUserMedia（）ポートレートモード

Question

私のブラウザアプリケーション（AngularJS）には、HTML5 getUserMedia API経由でウェブカメラに接続しています。しかし何らかの理由により、出力ストリームは常にlandscape modeにあり、portrait modeにはありません。だから私はいくつかのことを試みましたが、私はそれをポートレートモードにする方法を理解できません。何か案は？

仕様：

AngularJS：1.6.5

IMAC：27" - MacOSのハイシエラ

クロム：61.0.3163.100（64ビット）

---

マイコード

private static readonly videoOptions = { 
    mandatory: { 
     minWidth: 1080, 
     minHeight: 1920 
    } 
}; 

private startCamera(): void { 
    navigator.mediaDevices.getUserMedia({video: MWWebcamController.videoOptions, audio: false}) 
     .then((stream: MediaStream) => { 
      this.webcam = new WebcamStream(window.URL.createObjectURL(stream), stream); 
     }) 
     .catch((exception) => { 
      console.error("Could not load the stream. due to: ", exception); 
     }); 
} 

---

私はCSSを介してビデオを回転

• を試してみました。この種の作品は、ストリームはそれと一緒に回転されません。
• videoOptionsのmendatoryプロパティを{ height:1920, width: 1080 }に設定しますが、これはAPIのエラーであるConstraintNotSatisfiedError { constraintName: "height" }となります。

---

私はAPIの説明やポートレートモードでウェブカメラを使用する方法を説明したウェブ上の任意のオプションを見つけることができません。

Answer 1

iMac（およびすべてのデスクトップデバイス）は横長のウェブカメライメージセンサーを搭載しているため、センサーの最大解像度（横長モード、たとえば1920x1080）でしかキャプチャできません。

ウェブカメラのビデオを収縮させて拘束するために、高さがセンサーの最大高さを超えない解像度を使用すると、ポートレート画像を取得する必要があります（例：270x480、 1080x1980）

var constraints = { 
    audio: false, 
    video: { 
    width: { min: 270, max: 270 }, 
    height: { min: 480, max: 480}, 
    }, 
}; 

あなたは、あなたのウェブカメラ&ブラウザのコンボでサポートされている（ランドスケープ）の解像度を見つけるためにgetUserMedia camera resolution finderを使用することができます。