Video stream sideways on some browser/device combinations

Question

I'm calling getUserMedia() to get a video stream and simply setting the stream as the srcObject of a video element.

Specifically on Chrome on 2 different Windows Tablets, in Portrait mode the video is side ways.

I can't find any orientation info in the stream or video track objects and the width and height track info match the video element and are accurate to the aspect ratio track info.

You can duplicate with https://camera.stackblitz.io

How do I get the orientation info from the stream or logically rotate the video?

Edit:

I do not want the orientation of the device or screen, but of the video stream. Maybe "rotation" is the right verbiage. In other words how do I know when to rotate the video without a human looking at it?

Edit 2:

"Chrome on Windows Tablet in Portrait mode" is just what I experienced I don't know if the issue is isolated to that or the issue is with every Windows tablet but the main question is how do I tell if the video is sideways or rotated?

Answer 1

As far as I know,

Orientation is in the field of screen not stream.

The Screen Orientation API provides the ability to read the screen orientation type and angle, to be informed when the screen orientation state changes, and be able to lock the screen orientation to a specific state.

In my view, one great method for managing orientation is using media query like below:

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {

  //CSS

}

For using other methods like JavaScript or manifest please see this article.

Edit

You mentioned in title of question to Windows Tablet and also you mentioned you are looking for a way for setting orientation options without a human looking at it.The your second condition contradicts the former.

How we do detect device is Windows Tablet without a human looking at video??

It's not possible to answer this question. I think your view about stream is wrong.

You can choose one of them at a time:

1. If you need to detect some devices like Windows Tablet, you can use some thing like media query or JavaScript method to detect device.
2. If you need to set option without a human looking at it, you can use some method like MediaStreamTrack.applyConstraints().