Как добавить рамку для веб-камеры в ангуляре?
В своем проекте я использую ngx-webcam для того, чтобы позволить пользователю делать фото себя.
Каким образом можно добавить какой-нибудь контейнер с маркерами, чтобы пользователь мог понимать как будет сделано фото (видеть центр и края)?
Возможно ли сделать это с css?
Ответы (1 шт):
Автор решения: Alexander Chernin
→ Ссылка
Изображение из веб-камеры будет находиться (то есть, вписано) в центре рамки (viewport), заданной свойствами самого webcam, то есть [width] и [height], соответственно пользователь будет видеть края изображения.
Таким образом, рекомендую и в css, и в свойства webcam задавать одни и те же значения размеров, тогда и крестик будет в центре и css-рамка вокруг viewport.
CSS выглядит вот таким образом:
webcam {
position: absolute;
width: 640px; /* Ширина рамки. Это не свойство [width] компонента */
height: 480px; /* Высота рамки */
border-width: 4px; /* Ширина борта */
border-color: red; /* Цвет */
border-style: solid; /* Тип */
border-radius: 5px; /* Радиус закругления углов */
background: lightcyan; /* Цвет фона */
}
/* Крестик (знак +) в середине рамки */
webcam:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "+"; /*Можно использовать HEX-code любого символа*/
font-size: 30px; /* размер символа */
color: red; /*его цвет*/
line-height: 480px; /* Межстрочный интервал. Выравнивание крестика по-вертикали */
text-align: center; /* Выравнивание по-горизонтали */
}