【问题标题】:Video stream sideways on some browser/device combinations某些浏览器/设备组合上的横向视频流
【发布时间】:2018-03-29 02:58:41
【问题描述】:

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

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

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

你可以用https://camera.stackblitz.io复制

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

编辑:

我不想要设备或屏幕的方向,而是视频流的方向。也许“轮换”是正确的措辞。 换句话说,我怎么知道什么时候在没有人看的情况下旋转视频?

编辑 2:

“纵向模式下 Windows 平板电脑上的 Chrome”是我所经历的,我不知道问题是否与此无关,或者每个 Windows 平板电脑都有问题,但主要问题是我如何判断视频是否是侧身还是旋转?

【问题讨论】:

  • 你能解决这个问题吗?我现在也遇到了同样的问题。
  • 对我来说,“解决方案”是只给用户一个旋转控件,这样如果它是横向的,他们可以自己修复它,然后将它存储在 localstore 中
  • 嗯,有点问题。我们有成千上万的平板电脑。会看看我能得到什么,如果我得到解决方案,请告诉你。谢谢

标签: javascript windows html mediastream


【解决方案1】:

据我所知

方向在屏幕领域,而不是流媒体。

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

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

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

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

  //CSS

}

如需使用 JavaScript 或 manifest 等其他方法,请参阅article

编辑

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

我们如何检测设备是无需人工查看的 Windows 平板电脑 视频??

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

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

  1. 如果您需要检测某些设备,例如 Windows Tablet,您可以 使用诸如 媒体查询 或 JavaScript 方法之类的东西来检测 设备。
  2. 如果您需要设置选项无需人工查看,您可以 使用MediaStreamTrack.applyConstraints()之类的方法。

【讨论】:

  • 屏幕方向没有帮助,因为假设我在屏幕为纵向时旋转视频,一些设备/bowers 已经正确显示视频,所以我会旋转已经正确。在没有人看视频的情况下,我如何知道何时旋转。
  • @WilliamLohan 我更新了我的答案。请再看一遍。
  • Windows Table 正是我所经历的,是否在某处记录了 Windows 平板电脑上的 Google Chrome 将以纵向模式旋转视频,或者我怎么知道 Windows 平板电脑上的每个 Google Chrome 都会这样做?我没有看到任何设置视频旋转的 MediaTrackConstraints。
  • 不是“我们如何检测设备是没有人类观看视频的 Windows 平板电脑??”但是我们如何判断视频是横向的而没有人看呢?
  • @WilliamLohan 正如我之前提到的,我们无法在没有人观看视频的情况下检测设备是 Windows 平板电脑,因为检测设备取决于观看。起初,视频流本身是被动的,不了解操作系统。当一个人看着它时,它会变得活跃,我们可以通过屏幕之类的东西来检测操作系统。
【解决方案2】:

您可以使用screen.orientation 通过javascript 获取方向信息。 见MDN Docs

【讨论】:

  • 这告诉我设备的方向,但不告诉我视频是否说明了这一点,所以如果我使用该逻辑,我将旋转在其他设备或其他设备上已经正确的视频流浏览器。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-08-20
  • 2015-07-17
  • 1970-01-01
  • 2011-08-08
  • 2018-11-05
  • 1970-01-01
相关资源
最近更新 更多