How do I add a frame for a webcam in the hangar?

Question

How do I add a frame for a webcam in the hangar?

In my project, I use ngx-webcam to allow the user to take a photo of themselves.

How can I add a container with markers so that the user can understand how the photo will be taken (see the center and edges)?

Is it possible to do this with css?

1

css3 angular angular2 web-camera

Author: Alexander Chernin, 2020-12-02

Source

1 answers

score 0 · Accepted Answer

The image from the webcam will be located (that is, inscribed) in the center of the frame (viewport), set by the properties of the webcam itself, that is, [width] and [height], respectively, the user will see the edges of the image.

Thus, I recommend that you set the same size values in both css and in the webcam properties, then the cross will be in the center and css-рамка around the viewport.

CSS looks like this:

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; /* Выравнивание по-горизонтали */
}