Javascript 在浏览器中的网络摄像头预览上覆盖透明圆圈

我试图在浏览器中的网络摄像头上放置一个覆盖层，覆盖层内有一个圆形透明孔。类似这样的：

我尝试了以下解决方案：-

• 使用svg掩码创建了一个svg图标，但是对于不同的浏览器大小，我无法使用此解决方案实现响应。相关的

**JS**
常量svgIcon=（）=>(
);
常量应用=（）=>(
{svgIcon（）}
);
ReactDOM.render(



**JS**
常数覆盖=（）=>(
);
常量应用=（）=>(
);
ReactDOM.render(
,
document.getElementById（'root'））
);
**CSS**
*{框大小：边框框；}
身体{
最小高度：100vh；
填充：10px；
保证金：0；
}
.弹出窗口{
证明内容：中心；
对齐项目：居中；
位置：相对位置；
溢出：隐藏；
显示器：flex；
}
.圆圈{
位置：绝对位置；
背景：径向梯度（圆心，透明25%，黑色25.5%）；
背景大小：100%100%；
背景位置：50%50%；
边界半径：100%；
高度：800px；
宽度：800px；
}
**HTML**

有人能帮我找到解决办法吗

感谢
我终于能够使用svg图标解决这个问题，我将它放在一个div中，以控制svg图标的响应

Related codepen link https://codepen.io/amanadi007/pen/QWEyNbb

JS

HTML

请在此处发布您的代码。您可以包含指向外部站点的链接，但StackOverflow的目的是显示完整的答案，其中不包括指向外部站点的链接，这些链接可能会被更改或消失。

**JS**
const Overlay = () => (
  <div className="circle"/>
);

const App = () => (
  <div className="popup">
    <Webcam audio={false}/>
    <Overlay />
  </div>
);

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

**CSS**

* {box-sizing: border-box;}

body {
  min-height: 100vh;
  padding: 10px;
  margin: 0;
}

.popup {
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  display: flex;
}

.circle {
  position: absolute;
  background: radial-gradient(circle at center, transparent 25%, black 25.5%);
  background-size: 100% 100%;
  background-position: 50% 50%;
  border-radius: 100%;
  height: 800px;
  width: 800px;
}

**HTML**

<div id="root"></div>


Related codepen link https://codepen.io/amanadi007/pen/QWEyNbb

const svgIcon = () => (
  <svg
        width="100%"
        height="100%"
        className="svg"
        viewBox="0 0 260 200"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlnsXlink="http://www.w3.org/1999/xlink">
        <defs>
            <mask id="overlay-mask" x="0" y="0" width="100%" height="100%">
                <rect x="0" y="0" width="100%" height="100%" fill="#fff"/>
                <circle cx="50%" cy="50%" r="70" />
            </mask>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" mask="url(#overlay-mask)" fillOpacity="0.7"/>
    </svg>
);

const App = () => (
  <div className="webcam-container">
    <Webcam id="webcam" audio={false}/>
    <div className="overlay-container">
      {svgIcon()}
      </div>
  </div>
);

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

.webcam-container {
    position: relative;
}

.overlay-container {
    position: absolute ;
  width: 34%;
    top: 0 ;
    right: 0 ;
    bottom: 0 ;
    left: 0;
}

<div id="root"></div>