title: Overlay transparent circle on webcam preview in a browser
body: <p>I am trying to place a overlay on webcam in a browser with a circular transparent hole inside it. Something like this:- <a href="https://i.stack.imgur.com/HnDLY.png" rel="nofollow noreferrer">https://i.stack.imgur.com/HnDLY.png</a></p>
  <p>I tried following solutions:-</p>
  <ul>
  <li>Created a svg icon using svg mask, however i am not able to achieve responsiveness with this solution for different browser size. Related <a href="https://codepen.io/amanadi007/pen/QWEyNbb" rel="nofollow noreferrer">codepen link</a>.</li>
  </ul>
  <pre><code>**JS**
      const svgIcon = () =&gt; (
      &lt;svg className=&quot;svg&quot; viewbox=&quot;0 0 100 100&quot; width=&quot;100%&quot; height=&quot;100%&quot;&gt;
          &lt;defs&gt;
             &lt;mask id=&quot;mask&quot; x=&quot;0&quot; y=&quot;0&quot; width=&quot;3000&quot; height=&quot;3000&quot;&gt;
                &lt;rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;3000&quot; height=&quot;3000&quot; fill=&quot;#fff&quot;/&gt;
                &lt;circle cx=&quot;250&quot; cy=&quot;200&quot; r=&quot;110&quot; /&gt;
             &lt;/mask&gt;
          &lt;/defs&gt;
          &lt;rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;3000&quot; height=&quot;3000&quot; mask=&quot;url(#mask)&quot; fill-opacity=&quot;0.9&quot;/&gt;  
          &lt;/svg&gt;
      );
          
      const App = () =&gt; (
      &lt;div className=&quot;app&quot;&gt;
         &lt;Webcam id=&quot;webcam&quot; audio={false}/&gt;
         {svgIcon()}
      &lt;/div&gt;
      );
          
     ReactDOM.render(
         &lt;App /&gt;,
         document.getElementById('root')
     );
  
  **CSS**
  
  .app {
    position: relative;
    float: left;
  }
  
  .svg {
    position: absolute;
    left: 0px
  }
  
  #webcam {
    width:500px;
    height:400px;
  }
  
  #mask {
    position: absolute;
  }
  
  **HTML**
  
  &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
  
  </code></pre>
  <ul>
  <li>Tried both box-shadow &amp; radial-gradient approach but it doesn't seem to work well with webcam. Related <a href="https://codepen.io/amanadi007/pen/VwjeaZd" rel="nofollow noreferrer">codepen link</a></li>
  </ul>
  <pre><code>
  **JS**
  const Overlay = () =&gt; (
    &lt;div className=&quot;circle&quot;/&gt;
  );
  
  const App = () =&gt; (
    &lt;div className=&quot;popup&quot;&gt;
      &lt;Webcam audio={false}/&gt;
      &lt;Overlay /&gt;
    &lt;/div&gt;
  );
  
  ReactDOM.render(
    &lt;App /&gt;,
    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**
  
  &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
  
  </code></pre>
  <p>Can someone please help me to find the solution?</p>
  <p>Thanks</p>