Power of Media Capture APIs in the Browser
In the modern web world, the user screens are no longer limited to read-only platform. The evolution of media capture APIs allow various functionalities within the screens that are all controlled by the user browser. Lets discuss them in detail here.
What are Media Capture APIs?
Media capture and Streams API are used to access the web apps such as microphones, Webcameras and Screens. These apis allow us to perform various functionalities such as video conferencing, screen recording, etc.
Common Media Capture APIs
The commonly used APIs in this Media Stream platform are:
navigator.mediaDevices.getUserMedia()is used to get the input from user’s media devices such as microphone and webcam.
const stream = await navigator.mediaDevices.getUserMedia({
audio:true, //get microphone input,
video: true //get webcam input
})
This code will return the media object with values from audio & video devices.
2. navigator.mediaDevices.getDisplayMedia() is used to record the user screen similar to Google Meet that prompts user to select between entire screen, specific application window or a specific browser tab for sharing.
Screenshots can be taken from the captured Media Stream by drawing to a canvas. The canvas can be converted to an image by using canvas.toBlob() or canvas.toDataURL(). This implementation can be referred in the below screenshot.
Browsers will always prompt the user before recording or capturing the screen and it will not be auto-triggered since user consent is crucial to implement this media capture functionality.
