Media capture

Media capture allows apps to use the camera and microphone of a device. After recording a video you can play it, download it or record another one.

On iOS, you may need to enable MediaRecorder in:
Settings > Safari > Advanced > Experimental Features > MediaRecorder

Demo

Click the "+" button to start your web cam. You can then record a video, play it and download it.

You can check the "Automatic Picture-in-Picture" box to enable automatic Picture-in-Picture when you focus another browser tab.

// request the user's camera and microphone as a MediaStream const stream = await navigator.mediaDevices.getUserMedia({video: true, audio: true}); // attach the stream to the video element const video = document.querySelector('video'); video.srcObject = stream; // set a handler for the media session's picture-in-picture action navigator.mediaSession.setActionHandler("enterpictureinpicture", () => { // display the video in Picture-in-Picture mode video.requestPictureInPicture(); });

Documentation

getUserMedia on MDN

Automatic picture-in-picture on Chrome Developers

Browser support

getUserMedia on caniuse.com

Automatic Picture-in-Picture is supported in Chromium-based browsers.