Untitled

import React, { useState, useEffect } from 'react';

const MicrophoneList = () => {
  const [microphones, setMicrophones] = useState([]);

  useEffect(() => {
    // Request media device permissions
    navigator.mediaDevices.getUserMedia({ audio: true })
      .then(stream => {
        // Once permission is granted, enumerate the devices
        navigator.mediaDevices.enumerateDevices()
          .then(devices => {
            const audioInputDevices = devices.filter(device => device.kind === 'audioinput');
            setMicrophones(audioInputDevices);
          })
          .catch(err => console.error('Error enumerating devices:', err));
        
        // Stop the stream after getting the permission
        stream.getTracks().forEach(track => track.stop());
      })
      .catch(err => console.error('Error getting user media:', err));
  }, []);

  return (
    <div>
      <h2>Available Microphones</h2>
      <ul>
        {microphones.map(mic => (
          <li key={mic.deviceId}>{mic.label || `Microphone ${mic.deviceId}`}</li>
        ))}
      </ul>
    </div>
  );
};

export default MicrophoneList;