What PWA Can Do Today

Media Capability Elements

The declarative <camera> and <microphone> HTML elements are user-activated controls to access the user's camera and microphone. When access was previously blocked, users can simply click the buttons again to regain access as opposed to having to go through the browser's permission settings, which is the case when using getUserMedia().

Media capability elements are not (yet) supported on this device.

Camera

Microphone

Code

const camera = document.querySelector('#camera-control'); const microphone = document.querySelector('#microphone-control'); const preview = document.querySelector('video'); camera.addEventListener('track', () => { preview.srcObject = new MediaStream([camera.track]); }); microphone.addEventListener('track', () => { const microphoneStream = new MediaStream([microphone.track]); // Connect microphoneStream to a Web Audio analyser to draw a level meter. showMicrophoneLevel(microphoneStream); });

Documentation

Capability elements explainer on GitHub

Browser support

Capability elements are supported in Chrome 153 and later.