Previously featured in our article detailing hardware capabilities of PWA, camera access is one of the more prominent features that we’re seeing more and more of. But to properly integrate this capability into your PWA isn’t an easy task either, which is why in our article today, we’ll guide in through this whole process:
Contents
- Prerequisites
- How to Access the Camera in a PWA
- The basics
- Introducing the getUserMedia() — an API of webRTC
- Examples
- The complicated part
- Creating the [Get access to camera] button
- Stream video in real-time by clicking on the button
- Creating a canvas
- Capture a snapshot of the canvas using takePhoto() and grabFrame()
- Conclusion
Prerequisites
- A basic PWA which can be easily created using ReactJS and our written guide
- A solid understanding of HTML and JavaScript
How to Access the Camera in a PWA
The basics
Introducing the **getUserMedia()** — an API of webRTC
To get direct access to a camera and/or a microphone, the Web uses an API called getUserMedia() which is widely supported in almost all modern browsers. This API, along with RTCPeerConnection and RTCDataChannel, are parts of the WebRTC — a framework built into browsers that enables real-time communication.
Basically, what the API (navigator.mediaDevices.getUserMedia(constraints)) does is it prompts the user for permission to access audio and video input of the phone (e.g., microphone, webcam, camera, etc). Using which permission, the API generates a MediaStream JavaScript object called local that can be further manipulated.
#progressive web apps #progressive web app
