17

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?

Wilhelmina Lohan
  • 2,803
  • 2
  • 29
  • 58

2 Answers2

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().
Ali Soltani
  • 9,589
  • 5
  • 30
  • 55
  • The orentation of the screen not helpful because, say I rotate the video when the screen is portrait, some device/bowsers show the video correct already so I'd be rotating that was already correct. How do I know when to rotate without a human looking at the video. – Wilhelmina Lohan Mar 27 '18 at 15:10
  • @WilliamLohan I updated my answer. Please see it again. – Ali Soltani Mar 28 '18 at 03:27
  • The Windows Table is just what I experienced, is it documented somewhere that Google Chrome on Windows Tablets will rotate video in portrait mode, or how do I know that every Google Chrome on Windows Tablets will do this? I don't see any MediaTrackConstraints that set the rotation of a video. – Wilhelmina Lohan Mar 28 '18 at 18:40
  • Not "How we do detect device is Windows Tablet without a human looking at video??" but how do we tell that the video is sideways without a human looking at it? – Wilhelmina Lohan Mar 28 '18 at 18:42
  • @WilliamLohan As I mentioned before we can't _detect device is Windows Tablet without a human looking at video_ because detecting device depends on looking. At first, video stream is passive by itself and doesn't know about OS. When a human looking at it, it becomes active and we can detect OS with some things like screen. – Ali Soltani Mar 29 '18 at 02:51
  • I don't care about Windows Tablet. – Wilhelmina Lohan Mar 29 '18 at 16:49
-1

You can get the orientation info via javascript with screen.orientation. See on the MDN Docs

Alexander BC
  • 130
  • 2
  • 10
  • This tells me the orientation of the device but does not tell me if the video accounts for that, so if I used that logic I'd be rotating video stream that were already correct on other devices or other browsers. – Wilhelmina Lohan Mar 26 '18 at 16:07