react-webcam移动端竖屏时宽高配置反转的原因是什么

使用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设置的尺寸均正常生效
• 安卓/iOS移动端：相机处于竖屏状态时，cameraSize.width和cameraSize.height的配置值会发生反转，横屏状态下配置正常生效
• 复现示例：配置cameraSize.width=768px、cameraSize.height=1920px时，竖屏下实际生效宽度为1920px、高度为768px

该现象和react-webcam组件本身无关，是移动端WebRTC标准实现的固有逻辑导致：

• 绝大多数移动设备的后置摄像头传感器为物理横向安装，原生采集输出的画面坐标系始终以设备横置状态为基准，宽高定义绑定传感器物理边长，不会跟随设备重力旋转自动切换。
• 传入videoConstraints的宽高参数会直接透传给系统摄像头采集接口，匹配的是传感器原始输出流的尺寸，浏览器不会根据当前屏幕方向自动交换宽高值。
• 竖屏状态下浏览器仅在渲染层对原始横向采集画面做90度旋转，适配竖屏显示效果，不会修改原始媒体流的宽高属性，最终就会出现配置的宽高值和实际渲染尺寸反转的问题。
• 桌面端Chrome无该问题，是因为桌面摄像头无旋转使用场景，传感器物理方向和屏幕显示方向始终对齐，配置的宽高参数可直接匹配最终显示尺寸。

补充：多数移动端摄像头的原生支持分辨率列表仅提供横屏比例规格，当传入的竖屏比例宽高找不到完全匹配的原始采集规格时，浏览器会自动选择最接近的原生分辨率做适配，会进一步导致实际生效尺寸和预期存在偏差。

内容的提问来源于stack exchange，提问作者Inclu Cat