Блог

Я пытаюсь разместить наложение на веб-камеру в браузере с круглым прозрачным отверстием внутри него. Что-то вроде этого:- https://i.stack.imgur.com/HnDLY.png

Я попробовал следующие решения:-

• Создал значок svg с использованием маски svg, однако я не могу добиться отзывчивости с помощью этого решения для разных размеров браузера. Связанная ссылка на codepen.

 **JS**
    const svgIcon = () => (
    <svg className="svg" viewbox="0 0 100 100" width="100%" height="100%">
        <defs>
           <mask id="mask" x="0" y="0" width="3000" height="3000">
              <rect x="0" y="0" width="3000" height="3000" fill="#fff"/>
              <circle cx="250" cy="200" r="110" />
           </mask>
        </defs>
        <rect x="0" y="0" width="3000" height="3000" mask="url(#mask)" fill-opacity="0.9"/>  
        </svg>
    );
        
    const App = () => (
    <div className="app">
       <Webcam id="webcam" audio={false}/>
       {svgIcon()}
    </div>
    );
        
   ReactDOM.render(
       <App />,
       document.getElementById('root')
   );

**CSS**

.app {
  position: relative;
  float: left;
}

.svg {
  position: absolute;
  left: 0px
}

#webcam {
  width:500px;
  height:400px;
}

#mask {
  position: absolute;
}

**HTML**

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

  

• Пробовал использовать как теневой, так и радиально-градиентный подход, но, похоже, он плохо работает с веб-камерой. Связанная ссылка на codepen

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

  

Может кто-нибудь, пожалуйста, помочь мне найти решение?

Спасибо

Я, наконец, смог решить эту проблему, используя значок svg, который я поместил внутри div, чтобы контролировать отзывчивость значка svg.

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

JS

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

CSS

 .webcam-container {
    position: relative;
}

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

HTML

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