Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get hardware information of (in-build) microphone?

Is it possible to read the hardware information (at least the name) of the (in-build) microphone while a user is recording an audio file on my website?

Is that possible with JavaScript or is there another way to solve this problem? I searched the web but could only find scripts for recording with JavaScript.

like image 717
Kami Avatar asked Jan 08 '23 20:01

Kami


2 Answers

Newer version: Available in Firefox, MS Edge, and Chrome 45 with experimental flag.

Using the standard navigator.mediaDevices.enumerateDevices(), you can get a list of available sources. Each source has a kind property, as well as a label.

var stream;
navigator.mediaDevices.getUserMedia({ audio:true })
.then(s => (stream = s), e => console.log(e.message))
.then(() => navigator.mediaDevices.enumerateDevices())
.then(devices => {
  stream && stream.stop();
  console.log(devices.length + " devices.");
  devices.forEach(d => console.log(d.kind + ": " + d.label));
})
.catch(e => console.log(e));

var console = { log: msg => div.innerHTML += msg + "<br>" };
<div id="div"></div>

Documentation & Related

  • navigator.mediaDevices on MDN - https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices
  • The "Media Capture and Streams" specification - http://w3c.github.io/mediacapture-main/getusermedia.html#mediadevices
  • Demo of selecting input source by Sam Dutton - https://webrtc.github.io/samples/src/content/devices/input-output/

The last demo works in regular Chrome thanks to the adapter.js polyfill.

like image 109
jib Avatar answered Jan 18 '23 13:01

jib


Outdated API

This answer uses an API that is non-standard, with limited browser support. It works in current Chrome as of writing, but will not be adopted in future versions of other browsers, and may be going away in Chrome. For a solution with more widespread support, see: https://stackoverflow.com/a/31758598/610573


Using MediaStreamTrack.getSources(), you can get a list of available sources. Each source has a kind property, as well as a label.

MediaStreamTrack.getSources(function(sourceInfos) {
    for (var i = 0; i != sourceInfos.length; ++i) {
        var thisSource = sourceInfos[i];
        console.log('stream type: '+thisSource.kind+', label: '+thisSource.label); 
        // example: stream type: audio, label: internal microphone
    }
});

Documentation & Related

  • MediaStreamTrack on MDN - https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack
  • "Capturing Audio & Video in HTML5" on HTML5Rocks.com - http://www.html5rocks.com/en/tutorials/getusermedia/intro/
  • Demo of selecting input source by Sam Dutton - https://simpl.info/getusermedia/sources/
like image 37
Chris Baker Avatar answered Jan 18 '23 13:01

Chris Baker