无法设置 React 网络摄像头高度

Question

我尝试使用“%”如下设置网络摄像头高度（尝试从 js 页面和 css 设置）。

              <div>
                {!imgSrc && <div>                      
                <>
                    {/* className="video-stream" */}
                    <Webcam width={100 + '%'}    // height={50 + '%'} does not work
                            audio={false}
                            ref={webcamRef}
                        screenshotFormat="image/jpeg"
                       // forceScreenshotSourceSize="true"
                            videoConstraints={{
                                ...videoConstraints,
                                facingMode
                            }}
                        />
                    </>
                   
                    <Grid container={true} justifyContent='center' alignItems='center' spacing={1}>                       
                        <button onClick={capture}> Capture </button>
                </Grid>
              </div>}

Css:

在css这里，当我在像素中设置时，它适用于桌面但不适用于移动设备。如有任何意见，我们将不胜感激。

对于移动和桌面：

 @media only screen and (min-width: 360px) and (max-width: 750px) {
    .video-stream {
        height: 210px;
        /* width: 290px; */
    }
 }
@media only screen and (min-width: 751px) {
    .video-stream {
        height: 400px;
       /* width: 530px; */
   }
}

Answer 1

您可以在网络摄像头组件中添加一个className 并在css 文件中使用%，然后根据您的需要将像素大小添加到父元素中。例如，如果我将网络摄像头组件包装在 div 元素中，它可以是这样的：

<div  className="video-stream">
          <Webcam
            className="webcam"
            audio={false}
            ref={webcamRef}
            screenshotFormat="image/jpeg"
          />
      </div>

在 css 文件中：

.webcam{
  width: 100%;
  height: 100%;
}

无法设置 React 网络摄像头高度

React webcam height could not be set

css

reactjs

height

webcam