I've got a project that is built on the serverless Twilio Voice JavaScript quickstart. Here's a link to the quickstart.
https://www.twilio.com/docs/voice/sdks/javascript/get-started#information
Below is the chunk of code where it allows the user to select an audio output device. Is it possible to select more than one audio output device, so my users can hear their phones ring through their speakers AND their headsets at the same time?
function updateDevices(selectEl, selectedDevices) {
selectEl.innerHTML = '';
device.audio.availableOutputDevices.forEach(function (device, id) {
let isActive = selectedDevices.size === 0 && id === 'default';
selectedDevices.forEach(function (device) {
if (device.deviceId === id) {
isActive = true;
}
});
const option = document.createElement('option');
option.label = device.label;
option.setAttribute('data-id', id);
if (isActive) {
option.setAttribute('selected', 'selected');
}
selectEl.appendChild(option);
});
}
function updateAllAudioDevices() {
if (device) {
updateDevices(speakerDevices, device.audio.speakerDevices.get());
updateDevices(ringtoneDevices, device.audio.ringtoneDevices.get());
}
}
async function getAudioDevices() {
await navigator.mediaDevices.getUserMedia({ audio: true });
updateAllAudioDevices.bind(device);
}
function updateOutputDevice() {
const selectedDevices = Array.from(speakerDevices.children)
.filter((node) => node.selected)
.map((node) => node.getAttribute('data-id'));
device.audio.speakerDevices.set(selectedDevices);
}
function updateRingtoneDevice() {
const selectedDevices = Array.from(ringtoneDevices.children)
.filter((node) => node.selected)
.map((node) => node.getAttribute('data-id'));
device.audio.ringtoneDevices.set(selectedDevices);
}
function bindVolumeIndicators(call) {
call.on('volume', function (inputVolume, outputVolume) {
let inputColor = 'red';
if (inputVolume < 0.5) {
inputColor = 'green';
} else if (inputVolume < 0.75) {
inputColor = 'yellow';
}
inputVolumeBar.style.width = `${Math.floor(inputVolume * 300)}px`;
inputVolumeBar.style.background = inputColor;
let outputColor = 'red';
if (outputVolume < 0.5) {
outputColor = 'green';
} else if (outputVolume < 0.75) {
outputColor = 'yellow';
}
outputVolumeBar.style.width = `${Math.floor(outputVolume * 300)}px`;
outputVolumeBar.style.background = outputColor;
});
}