The MediaStream API

Introduction

The MediaStream API provides access to audio and video streams from webcams and microphones. It allows capturing, recording, and manipulating these streams in real time.

This API can be useful in the following ways:

• Capturing pictures
• Scanning QR codes
• Video chatting
• Real-time video effects
• Audio-video recording

Capturing media streams

We capture a media stream by calling the navigator.mediaDevices.getUserMedia() or navigator.mediaDevices.getDisplayMedia() method.

This will prompt the user for permission to access their webcam and/or microphone. Once granted, it returns a MediaStream object containing MediaStreamTrack objects for each audio/video source.

For example, to capture video from the webcam, we add the following code: