Skip to content
Advertisement

Adding capture button to bottom centre of the capture window

I’m using the react-webcam npm library and currently, the “capture image” button is located at the bottom of the screen as shown here. Capture button default position

What I want to do is to get that button to the bottom center of the capture window as I’ve shown here. Area the capture button needs to be added

This is my camera and button

<Webcam
  audio={false}
  ref={webcamRef}
  screenshotFormat="image/jpeg"
  style={{ height: 600, width: "100%" }}
/>
<button 
  onClick={capture} 
  style={{marginTop: "-200px"}}
 >
  Capture photo
</button>

I’ve tried giving marginTop and marginBottom but couldn’t get it done. Any idea how I can fix this?

Advertisement

Answer

You need a container that can wrap the button to give it a position absolute:

//style.css

 .video-container {
  position: relative;
 }

.button {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, 0%);
}

//your jsx

<div
    className="video-container"
    style={{ height: '600px', width: "100%" }}
  >
    <Webcam
      autoPlay
      style={{ height: '100%', width: "100%" }}
      audio={false}
      ref={webcamRef}
      screenshotFormat="image/jpeg"
    />
    <button className="button"   onClick={capture} >Capture photo</button>
  </div>

Demo: https://codesandbox.io/s/strange-ardinghelli-mss9c?file=/src/index.js:0-42

Advertisement