So I am currently running a tensorflowjs model on an incoming video stream defined using the getUserMedia() function, but while trying to create a video stream in landscape mode I get an incorrectly sized stream.
Here's how I am defining the stream:
VIDEO_WIDTH = 340
VIDEO_HEIGHT = 600
if(navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({'video': {
width: VIDEO_WIDTH,
height: VIDEO_HEIGHT,
facingMode: "user"
}}).then(stream => {
video.srcObject = stream;
})
.catch(e => {
console.log("Error occurred while getting the video stream");
});
}
console.log(video.videoWidth, video.videoHeight)
Since I'm optimizing for mobile, I started with portrait mode, and the above code returns the correct video width and height in portrait mode, which is 340 600. However, I want to make this responsive even in landscape mode, so on an orientation change, I just flip the values of width and height and recreate the video stream above. However, this time I get the values 340 360, which seems strange to me. What could possibly be going wrong? For reference, I'm testing this using Devtools and a Chrome Browser on an Android Phone.