📱 Introduction to the Media Devices API

The Media Devices API allows web applications to access connected media input devices like cameras, microphones, and screens. This API is essential for building apps with video calls, audio recording, or live streaming features. 🎤🎬

📌 What is the Media Devices API?

It’s a part of the WebRTC specification that enables access to media hardware via JavaScript, mainly through navigator.mediaDevices. It handles permissions, device enumeration, and streaming.

⚙️ Accessing User Camera and Microphone

Request permission and get a media stream like this:

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    const videoElement = document.querySelector('video');
    videoElement.srcObject = stream;
    videoElement.play();
  })
  .catch(error => {
    console.error('Error accessing media devices:', error);
  });

📋 Listing Available Media Devices

You can list all connected media devices (cameras, microphones, speakers):

navigator.mediaDevices.enumerateDevices()
  .then(devices => {
    devices.forEach(device => {
      console.log(device.kind + ": " + device.label + " id = " + device.deviceId);
    });
  })
  .catch(error => {
    console.error('Error listing devices:', error);
  });

🧠 Handling Permissions

Browsers ask users for permission before granting access to media devices. Always handle permission denial gracefully in your app.

🎞️ Example: Displaying Video Stream

HTML:

<video autoplay playsinline></video>

JavaScript to stream camera feed into video element:

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    const video = document.querySelector('video');
    video.srcObject = stream;
  })
  .catch(console.error);

🧩 Tips & Best Practices

🔗 Useful Resources