javascript - 在某些浏览器/设备组合上横向播放视频流

Question

我正在调用 getUserMedia() 来获取视频流，并简单地将 stream 设置为视频元素的 srcObject。

特别是在 2 台不同 Windows 平板电脑上的 Chrome 上，在纵向模式下，视频是横向的。

我在流或视频轨道对象中找不到任何方向信息，并且宽度和高度轨道信息与视频元素匹配并且与宽高比轨道信息准确。

您可以使用 https://camera.stackblitz.io 进行复制

如何从流中获取方向信息或逻辑旋转视频？

编辑:

我不想要设备或屏幕的方向，而是视频流的方向。也许“旋转”是正确的措辞。 换句话说，我如何知道何时在没有人看的情况下旋转视频？

编辑 2:

“纵向模式下的 Windows 平板电脑上的 Chrome”正是我所遇到的问题横向还是旋转？

Answer 1

据我所知，

Orientation is in the field of screen not stream.

Screen Orientation API提供读取屏幕方向类型和 Angular 能力，在屏幕方向状态发生变化时收到通知，并能够将屏幕方向锁定到特定状态。

在我看来，一种管理方向的好方法是使用 media query如下所示:

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

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

  //CSS

}

要使用其他方法，如 JavaScript 或 list ，请参阅此 article .

编辑

您在Windows 平板电脑的问题标题中提到，您还提到 您正在寻找一种设置方向选项的方法无需人工查看。您的第二个条件与前者相矛盾。

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

这个问题无法回答。我认为你对流的看法是错误的。

您一次可以选择其中之一:

1. 如果您需要检测某些设备，例如 Windows 平板电脑，您可以 使用诸如媒体查询 或 JavaScript 方法之类的东西来检测 设备。
2. 如果你需要设置选项没有人看，你可以 使用一些方法，如 MediaStreamTrack.applyConstraints() .