如何用react-webcam实现类似expo-camera的移动端全屏相机视图？

我使用Expo-Camera搭配Tailwind可以实现移动端全屏相机视图，代码如下：

// 创建相机组件，Web端会调用getUserMedia/Stream API
<Camera type={CameraType.back}>
  {/* 相机容器，设置为屏幕高度 */}
  <div className='flex-1 bg-transparent min-h-screen'></div>
</Camera>

参考Expo相机的参数配置，我用react-webcam编写了参数一致的代码，期望同样实现移动端全屏相机视图：

const videoConstraints = {
  facingMode: { exact: "environment" },
  autoFocus: 'continuous',
  flashMode: 'off',
  whiteBalance: 'continuous',
  zoom: 0,
  focusDepth: 0,
  ratio: '4:3',
};

<div className='flex-1 bg-transparent min-h-screen'>
  <Webcam className="flex-1 bg-transparent" videoConstraints={videoConstraints} />
</div>

但实际效果并未达到全屏，相机视图仅填充了约3/4的屏幕：

React Webcam视图

Expo Camera视图

解决建议 #

1. 调整Webcam元素的样式 #

react-webcam渲染的<video>元素默认会保持视频原始比例，不会自动拉伸填充容器。可以修改className，添加强制宽高和覆盖适配：

<Webcam className="flex-1 bg-transparent w-full h-full object-cover" videoConstraints={videoConstraints} />

object-cover会让视频保持比例并覆盖整个容器，裁剪超出部分；w-full h-full确保元素填满父容器。

2. 清除全局默认边距 #

检查页面最外层的body或父容器是否存在默认margin或padding，这会导致容器无法占满整个屏幕。可以全局添加样式：

body {
  margin: 0;
  padding: 0;
}

3. 调整视频比例约束 #

当前设置的ratio: '4:3'可能和移动端屏幕的16:9比例不匹配，导致视频无法填满屏幕。可以尝试将比例改为16:9，或者移除ratio约束，让浏览器自动适配屏幕比例：

const videoConstraints = {
  facingMode: { exact: "environment" },
  autoFocus: 'continuous',
  flashMode: 'off',
  whiteBalance: 'continuous',
  zoom: 0,
  focusDepth: 0,
  // 移除ratio或改为16:9
  // ratio: '16:9',
};

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