How can I change the audio input from one device to another in web application using MVC?

Question

We are building a web application in which a user can have video chat with other users. We would like to give them an option to switch audio input between PC's internal microphone to other input device. I tried searching on the internet about the same but didn't find any lead.

Answer 1

Assuming you're using opentok (because you used the opentok tag).

You can use the OT.getDevices API to list the available audio input devices. Then you can pass the device when you publish. Something like:

let publisher;
function publish(audioDeviceId) {
  if (publisher) {
    publisher.destroy();
  }
  publisher = OT.initPublisher(null, {
    audioSource: audioDeviceId
  });
}

publish();

OT.getDevices((err, devices) => {
  if (!err) {
    let select = document.querySelector('select');
    devices.filter(device => device.kind === 'audioInput').forEach(device => {
      let option = document.createElement('option');
      option.value = device.deviceId;
      option.innerHTML = device.label;
      select.appendChild(option);
    });
    select.addEventListener('change', () => {
      publish(event.target.value);
    });
  }
});

You can see a working demo at https://jsbin.com/qibaba