Using camera in the browser for dummies

For a recent project I had to access the camera and take a picture on users’ request. This made me stumble upon the weird restrictions, shortcomings and defaults of this functionality.
I created a simplified Codepen, but using the camera will only work on codepen itself:

Only available over https or localhost

A lot of articles about getting access to the media devices were written before most browsers added constraints to using a user's camera. I found out, for example, that it's necessary to be on a https connection.

I developed this website in Vue/Nuxt which tells you to visit the website through your IP address in stead of localhost. I didn't immediately remember that most browsers do allow you to use those functionalities while on localhost and spent some time searching alternatives (google flags was the answer btw). So after I switched to localhost things were much easier😅.

The camera isn't a mirror like we're used to

The camera doesn't work like a mirror when you access it from the browser, this was a bit of a mind fuck until I just flipped the screen with transform: scaleX(-1).

The camera on mobile is portrait

While I was very happy that on mobile the browser automatically accessed the front camera the orientation was portrait in stead of landscape. This makes a lot of sense of course, but it made it very hard to test the positioning of the video for mobile. Since this functionality doesn't work on IP address I kept having to deploy to test it.

IOS doesn't allow Chrome to access the camera

I haven't been able to get it to work at least, I think it has something to do with the Apple policy to force other browsers to use their version of webkit. If anyone knows what I'm doing wrong I'd love to hear it!

You can't actually take a picture

I had to kind of fake taking a picture by first pausing the video stream and asking the user if they wanted to take the picture again (in which case I would just hit play, haha) or if they wanted to use this picture.
If they liked their picture it got a bit more complicated, the only way to capture the image made in the browser is to kind of print it on a canvas element. Printing it on the canvas is possible with drawImage(), see the codepen above.