0

I need help with displaying the information from the console log to the user.

So in order to get a list of audio and video devices connected to the user's computer, I have this code. I can only see the list of devices in the console log (or via Developer Tools in Chrome)

But how do I add the deviceIDs that show up in the console log, into one of these drop down menu options using the working code I have?

anonymousowl
  • 1
  • 5

1 Answers1

0

I'm gonna assume that you want to display details about each of the device in a formatted manner in a dropdown. If that's the case, then the following code can be taken as a reference.

  • Create a state called devices to which you can store the devices array.
  • Iterate through each device and append to dropdown as a new option.
  • Each option will take your custom console message as text and it will be displayed
  • For the time being i have set dropdown option selected value as deviceId. You can update it based on your logic.
 // previous code
 const [devices, setDevices] = useState([]);

 // previous code
 navigator.mediaDevices.enumerateDevices().then( (devices) => {
   setDevices(devices);
   // rest of your code
 };

 <Select native defaultValue="" id="select">
  {devices.map(device => (
     <option
      key={device.deviceId}
      value={device.deviceId}
     >
       {`${device.kind}: ${device.label} id = ${device.deviceId}`}
     </option>
  ))};
 </Select>
Yedhin
  • 2,931
  • 13
  • 19
  • Thank you, but unfortunately, I am getting a syntax error for the code inside – anonymousowl Mar 30 '21 at 11:12
  • I missed out an ending brace. Have updated the code. Please check and see if it solves your problem and also answers your question ultimately. Happy coding! – Yedhin Mar 30 '21 at 14:11
  • Hello, thank you, but unfortunately, even though the syntax error has been removed. I am having trouble with it working with my other code. It executes, but it messes up other buttons and the getUserMedia function. I'm not sure why, and i'm not sure how to explain it without going to much into depth. But thank you so much for trying to help – anonymousowl Mar 31 '21 at 02:38