0

我想圈出一个包含使用 webcam.js 的网络摄像头实时预览的 div。我试图把它做成一个圆圈，但只有侧面变成了圆形。

这是网络摄像头 div 的 html：

<div id="camera" class="camera" ></div>

这是css代码：

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);
}

这是我的 js 代码：

Webcam.set({

            dest_width: 600,

            dest_height: 600,

            image_format: 'jpeg',

            jpeg_quality: 90

    });

Webcam.attach( '#camera' );
4

4 回答 4

2

您可以使用border-radius: 100%;div 来制作圆圈。

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

更新 ：

<!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>

输出 ：

在此处输入图像描述

于 2021-04-12T08:00:37.953 回答
1

如果你设置border-radius为100%，你应该得到一个圆圈（前提是height和width是相同的值。至于这种情况下的编程礼仪，我不知道……</p>

于 2021-04-12T07:49:14.423 回答
0

我猜你的网络摄像头代码会缩放以适应它的父元素......

  1. 将#camera 放在另一个div 中。
  2. 两者都应该具有相同的高度和宽度。
  3. 两者都应该隐藏溢出。
  4. 只有外部 div 应该是圆形的。不是通过 Webcam.attach()
于 2021-04-12T08:27:19.360 回答
0

从您发布的屏幕截图中，CSS 似乎没有问题，而是网络摄像头提要纵横比没有问题，尝试使用相对值调整 webcamJS 的值：

CSS - 将边框更改为 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 - 将高度设置为相对值

Webcam.set({

            dest_width: 600,

            dest_height: 600/1.33500,

            image_format: 'jpeg',

            jpeg_quality: 90

    });

Webcam.attach( '#camera' );

您可以在 codepen https://codepen.io/godpers/pen/ExZQpEQ上查看

于 2021-04-12T08:30:22.430 回答