Access the Camera in a PWA built with React

It's possible to access some, but not all, of the native device features from a PWA. One that we can access, is the camera and camera roll. We'll use two different methods to allow users to upload images to our application.

First, we'll add a file input that accepts images. We can specify a capture param, which will tell PWAs on mobile devices to prompt the user to take a picture with their camera.

Next, we'll access the camera feed directly by rendering a video tag, and accessing navigator.mediaDevices.getUserMedia directly - which will allow us to show a live video feed from the camera. Then, we can use a canvas tag to grab a frame from that video, and render the image.