How do I make webcam view fullscreen on mobile webapp

Question

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>

You cannot force a video to be full screen, the user can make it fullscreen — Juan Mendes, Sep 20 '19 at 12:04

score 1 · Answer 1 · answered Sep 20 '19 at 11:15

1

Try setting only the width of #videoElement to width: 100%.

So the CSS would go like:

 #videoElement 
 {
   width: 100%;
 }

answered Sep 20 '19 at 11:15

Haris

11
2

I tried this but it doesn't display the whole thing how a phone camera app would in fullscreen mode – Marco Fernandes Sep 20 '19 at 12:16

score 1 · Accepted Answer · answered Sep 20 '19 at 11:48

1

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;
}

answered Sep 20 '19 at 11:48

sao

1,469
6
14
30

1

This seems to work this best so far I'm gonna keep this open just for another day to see if someone else has other solutions so they can post her. But definitely did what I wanted. Now to center it and remove the scroll option – Marco Fernandes Sep 20 '19 at 12:16
vh works good. like i said, i get a lot of these types of issues and it is a good tool to use. – sao Sep 20 '19 at 12:17

score 1 · Answer 3 · answered Sep 20 '19 at 11:54

1

Add this attribute to video tag

 webkit-playsinline="true" playsinline="true"

answered Sep 20 '19 at 11:54

Roman Panevnyk

165
1
6

Full screen doesn't mean the entire browser, it means the entire window, without the browser chrome – Juan Mendes Sep 20 '19 at 11:55
@JuanMendes you understood explained what I wanted better than I did – Marco Fernandes Sep 20 '19 at 12:17
@MarcoFernandes I almost understood what this comment means Are you saying you were just asking for the video to take up the entire browser? If you did, that has nothing to do with video specifically. Any tag would have the same solution. Either way, both questions already have answers here at stack overflow. – Juan Mendes Sep 20 '19 at 12:20
@JuanMendes I basically just want a user to open the website on the phone and the camera takes up the whole screen. Not allowing the user to scroll the browser or anything. Basically trying to replicate what a normal phone camera app would do but thru a website. I know the best approach would probably be to build a flutter app but this app is so basic that I want to build I want to do it all as a progressive web app. – Marco Fernandes Sep 20 '19 at 12:36

How do I make webcam view fullscreen on mobile webapp

3 Answers3