search

basst314 / ngx-webcam

A simple Angular webcam component / pure & minimal, no flash-fallback
https://basst314.github.io/ngx-webcam/?
MIT License
228 stars 104 forks source link

Frame over the webcam - Problem with layout #97

Open lipedeveloper opened 3 years ago

lipedeveloper commented 3 years ago

i am trying to add a frame but i would like to use pluing is there any way this can be done?

Example: image

in this example I'm using webcam pluing plus a floating div above with a photo with an opacity of 0.5

my real problem is when I use it on cell phones and mobile devices it breaks the entire layout. has something similar been implemented?

in this example I took a picture of this Webcam, Frame, button swtiched done separately and on the phone each one of these guys goes to one side and breaks the whole layout.

tried to use this solution in css webcam video{ background: url("../../../assets/img/mascara-documento.png"); } but I was not successful either.

basst314 commented 3 years ago

Hi @lipedeveloper,

I have not tried anything like this before. This sounds like something that could be solved with the right CSS snippet.

If you think it's an issue with the HTML rendered by the library, please elaborate what exactly is breaking and why do you think it's an issue with the library itself.

Thank you!

sowmyaatmpdash commented 3 years ago

I have a similar requirement to add frame around the webcam and crop the image to get the frame i used below css webcam video {

outline: 5px solid green; outline-offset: -45px;

overflow: hidden; // border:2px solid blue; margin:15px; //background-color: red; -webkit-transform: scaleX(-1); transform: scaleX(-1); object-fit: cover; } it shows the frame on the desktop chrome browser but does not work for safari iphone.Please help me with any other leads .