2017-10-20 139 views
1

在我的瀏覽器應用程序(使用AngularJS)我通過HTML5 getUserMedia API連接到攝像頭。但由於某種原因,輸出流總是在landscape mode而不是在portrait mode。所以我嘗試了一些東西,但我無法弄清楚如何將它變成肖像模式。有任何想法嗎?html5 getUserMedia()肖像模式

規格:

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描述或介紹如何使用在縱向模式下的網絡攝像頭在網絡上的任何選項。

回答

0

iMac(和所有桌面設備)具有橫向定位的網絡攝像頭圖像傳感器,因此您只能以橫向模式(例如1920x1080)下的傳感器最大分辨率進行捕捉。

Chrome作物和縮放來自網絡攝像頭的視頻以滿足您的約束條件,因此如果您使用的分辨率高度不超過傳感器的最大高度(例如,比傳感器的最大高度小16倍的270x480) 1080x1980)

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

可以使用getUserMedia camera resolution finder來查找您的網絡瀏覽器&組合支持的(橫向)分辨率。