为什么 react-webcam 中的高度和宽度设置会颠倒？答案

【问题标题】：Why do the height and width settings in react-webcam become reversed?为什么 react-webcam 中的高度和宽度设置会颠倒？
【发布时间】：2022-10-02 01:43:56
【问题描述】：

我正在使用配置如下的 react-webcam。

<Webcam
          audio={false}
          screenshotFormat=\"image/jpeg\"
          videoConstraints={{
            facingMode: \"environment\",
            width: cameraSize.width,
            height: cameraSize.height,
          }}
          width={props.width + \"px\"}
          height={props.height + \"px\"}
  />

在桌面版 chrome 中（无论屏幕纵横比如何），尺寸设置为 videoConstraints，但在 Android 和 iOS 中，cameraSize.width 和 cameraSize.height 值在相机处于肖像方向。（如果是横向的也可以。）

例子： cameraSize.width=768px，cameraSize.height=1920px，但实际上width=1920px，height=768px。

这是什么原因？

标签： javascript reactjs webcam

【解决方案1】：

您的笔记本电脑屏幕是横向的，而手机是纵向的，因此在设置视频限制时，请确保同时为笔记本电脑和移动设备设置。尝试使用此代码：常量视频约束 = { 纵横比：/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)？ 0.563：1.778，身高：240， };

【讨论】：