1×
Become a member
to unlock all features
Autoplay

    Access the Camera in a PWA built with React

    reactReact
    16.6.3-16.8.6

    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.