I want to circle a div that contains a live preview of the webcam using webcam.js. I have tried to make it into a circle, but only the sides became round.
This is the html for the webcam div:
<div id="camera" class="camera" ></div>
This is the css code:
body
{
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.camera
{
width: 450px;
height: 450px;
border-radius: 50%;
overflow: hidden;
transform: rotateY(180deg);
}
This is my js code:
Webcam.set({
dest_width: 600,
dest_height: 600,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#camera' );
If you set
border-radius
to100%
, you should get a circle (providedheight
andwidth
are the same values. As for the programming etiquette in a situation like this, I don't know…