当移动设备旋转时，宽度和高度在 get User Media Api JavaScript 中交换

Question

我正在使用相机 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

Answer 1

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

Answer 2

这是因为横屏和竖屏模式的关系，如果视图是横屏并且高度比with大，你应该交换宽度和高度。

const isLandscape = screen.availHeight > screen.availWidth;

const videoConstraints = {      
        video: {
          width:{ exact: isLandscape ? containerRef?.current?.offsetHeight : containerRef?.current?.offsetWidth},
          height:{ exact: isLandscape ? containerRef?.current?.offsetWidth : containerRef?.current?.offsetHeight}
        }
      };

Answer 3

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

尝试看看会发生什么。