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

Question

我正在使用 npm 包 react 网络摄像头 在我的 react 应用程序中，
<Webcam />组件被包裹在一个具有 {width: 100vw, height 100vh} 的 div 中

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



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

我试过的东西:

设置 <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/prop-types@15.6.1/prop-types.js"></script>
<script src="https://unpkg.com/react-webcam/dist/react-webcam.min.js"></script>
<div id="root"></div>

官方 react 网络摄像头 npm 页面

https://www.npmjs.com/package/react-webcam

Answer 1

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

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

风格

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