0

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' );
mmm
  • 69
  • 8

4 Answers4

2

You can use border-radius: 100%; to make the div circle.

.camera
{
  width: 450px;
  height: 450px;
  border-radius: 100%;
  overflow: hidden;
  transform: rotateY(180deg);
}

Updated :

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body
{
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.camera
{
  width: 450px;
  height: 450px;
  border-radius: 100%;
  overflow: hidden;
  background:red;
}

</style>
</head>
<body>
<div id="camera" class="camera" ></div>

</body>
</html>

Output :

enter image description here

Ruhul Amin
  • 821
  • 11
  • 14
  • Hi, I did change to `border-radius: 100%` but it is still not fully circled. – mmm Apr 12 '21 at 08:04
  • I have checked the HTML and CSS. it's working fine. maybe there was some on other files or js. I have updated my above answer with a screenshot. Please check it. – Ruhul Amin Apr 12 '21 at 08:12
1

If you set border-radius to 100%, you should get a circle (provided height and width are the same values. As for the programming etiquette in a situation like this, I don't know…

Codeneutrino
  • 11
  • 2
  • Hi, I tried to set it as 100%, but only the sides will be round. – mmm Apr 12 '21 at 07:56
  • Could you post the relevant code, please. I've tried, and it works for me… – Codeneutrino Apr 12 '21 at 07:57
  • I changed the code to this `.camera { width: 450px; height: 450px; border-radius: 100%; overflow: hidden; transform: rotateY(180deg); }` – mmm Apr 12 '21 at 08:00
  • Hm. Well, when I try this code, I don't get any border until I add `border: black solid 2px` (or some border property), but this obviously isn't what you're getting because you actually have a border. Could you post a screenshot or the border, please? Sorry for the lack of help… – Codeneutrino Apr 12 '21 at 08:07
  • Hi, this is the image link: https://imgur.com/4a8K6FU – mmm Apr 12 '21 at 08:15
  • Is that not a full circle? I think it just doesn't look fully circular because of the shape of the image… – Codeneutrino Apr 12 '21 at 08:24
  • Hi, is there a way to make the image a full circle? – mmm Apr 12 '21 at 08:27
  • Set the `border-radius` of the image `50%`, I think: – Codeneutrino Apr 12 '21 at 08:28
  • img { border-radius: 50%; } See this article: https://www.w3schools.com/howto/howto_css_rounded_images.aspc – Codeneutrino Apr 12 '21 at 08:29
  • Having said that, with the JS, I'm not entirely sure. One of the other posts might be more helpful. – Codeneutrino Apr 12 '21 at 08:32
0

I'm guessing your webcam code scales to fit it's parent element...

  1. Put #camera inside another div.
  2. Both should have equal height and width.
  3. Both should hide overflow.
  4. Only the outer div should be circular. Not the one passed Webcam.attach()
svin83
  • 239
  • 1
  • 4
  • 13
0

From the screenshot you posted, there seems to be no issue with the CSS but rather with the webcam feed aspect ratio, try adapting the values of webcamJS with relative values:

CSS - Change the border to 100%

body
{
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.camera
{
  width: 450px;
  height: 450px;
  border-radius: 100%;
  overflow: hidden;
  transform: rotateY(180deg);
}

JS - Set the height to a relative value

Webcam.set({

            dest_width: 600,

            dest_height: 600/1.33500,

            image_format: 'jpeg',

            jpeg_quality: 90

    });

Webcam.attach( '#camera' );

You can check it on codepen https://codepen.io/godpers/pen/ExZQpEQ

Joel
  • 54
  • 6
  • It works now, but I am just curious about setting the height as a relative value. Does setting that value means that the webcam stream will follow the div height? – mmm Apr 12 '21 at 08:36
  • Not really, if you set the values manually, the sizes will be overridden by what you set. If you want the stream to follow the DOM size you do not have to set any size value at all (see [webcamJS docs](https://github.com/jhuckaby/webcamjs/blob/master/DOCS.md#configuration)). – Joel Apr 12 '21 at 09:17
  • Also, I updated the codepen so now it just assigns the 4:3 aspect ratio to the stream. – Joel Apr 12 '21 at 09:28