当移动设备旋转时，在获取用户媒体 Api JavaScript 中交换宽度和高度答案

【问题标题】：When mobile is rotated, width and height are swapped in get User Media Api JavaScript当移动设备旋转时，在获取用户媒体 Api JavaScript 中交换宽度和高度
【发布时间】：2020-04-20 21:16:38
【问题描述】：

我正在使用相机 git getUserMedia()，但我有一个大问题，因为我只是将视频和高度设置为 1280 和 720：

  videoConstraints.width = { min: 1280, ideal: 1280, max: 1280};
  videoConstraints.height = { min: 720, ideal: 720, max: 720};

它在电脑和手机上都可以完美运行，但是在手机上宽度和高度是交换的，我必须在横向模式下使用手机，在纵向模式下，高度是 1280，宽度是 720，什么时候是在横向是高度 720 和宽度 1280（如我所愿），所以我一直在寻找这方面的信息，但我真的没有找到真正的解决方案。

获取用户媒体 API 的参考： https://developer.mozilla.org/es/docs/Web/API/MediaDevices/getUserMedia

参考视频限制：https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints/video

【问题讨论】：

标签： javascript html video mobile landscape

【解决方案1】：

不要通过图像标签中的 HTML 属性分配绝对宽度值，而是将针对图像的 CSS 规则 max-width 分配为百分比相对宽度值，如下所示：img {max-width:100% }

试试看会发生什么。

【讨论】：

嗯，我认为这行不通，因为标签中画布的大小存在差异，这是它将具有的像素数，而在 css 中大小是它将占据的区域，无论如何我要尝试

【解决方案2】：

所以，面对这个问题，我没有发现问题，我所做的是使用媒体查询为样式移动制作自定义样式。

【讨论】：

【解决方案3】：

也没有找到答案。讨论过here: 和here

【讨论】：