javascript - react-webcam(npm软件包)视频大小

我在我的React应用中使用了npm软件包 react-webcam ，
<Webcam />组件包装在具有{width: 100vw, height 100vh}的div中

我希望video元素遵循父div的尺寸，并始终占据屏幕 View 的100％，包括调整浏览器大小时，但似乎存在一定的比例限制。



^中间的视频元素应占据黑色的整个空间。

我尝试过的事情:

将<Webcam />的高度和宽度设置为100％

将<Webcam />的高度和宽度设置为100vh和100vw

将videoConstraint的高度和宽度设置为自动(不执行任何操作)

将videoConstraint的高度和宽度设置为100％(这只会给我带来错误)

完全删除videoConstraint的高度和宽度规范

我猜测videoConstraint必须具有一些默认规范，但是我不确定如何覆盖它。

代码:

const videoConstraints = {
   width: 1280,
   height: 720,
   facingMode: "user"
}


ReactDOM.render(
 <div className = 'webcam' >
  <Webcam
  audio = {false}
  height = {100 + '%'}
  width = {100 + '%'}
  screenshotFormat = 'image/jpeg'
  videoConstraints = {videoConstraints}
  />
 </div>,
  document.getElementById('root')
);

.webcam {
  padding: 2.5rem 3.5rem;
}

video {
  background-color: #000000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<script src="https://unpkg.com/react-webcam/dist/react-webcam.min.js"></script>
<div id="root"></div>

官方 react-webcam npm页面

最佳答案

尝试像这样将样式添加到react-webcam内的video元素中。我已经尝试过并且工作正常

 <div id="video-stream">
        <Webcam
          audio={false}
          screenshotFormat="image/jpeg"
          forceScreenshotSourceSize="true"
        />
</div>

风格

#video-stream {
  video {
    width: 100%;
  }
}