Search code examples
javascripthtmlcssprogressive-web-appswebcam

How do I make webcam view fullscreen on mobile webapp

I am trying to stretch my webcam view to fullscreen but I can't seem to get it right without losing quality or the image being stretched.

What styling should I use to achieve this or do I need to write some javascript to help?

so far all I have is the following:

#CSS FILE
/* Camera */
#videoElement {
    /*width: 500px;*/
    /*height: 100%;*/
    min-height:100%;

    background-color: #666;
}

#HTML FILE
    <video autoplay="true" id="videoElement"></video>
Solution

  • try using view height to 100%, this gets me around a lot of these issues.

    https://www.w3schools.com/CSSref/css_units.asp

    /*CSS*/
{
  width: 100vh;
}