Switch Speaker

When you have multiple sound devices, you can choose to use one of them.

Note: The SDK only manages the initial device list. If you need to handle dynamic device changes (e.g., when a user plugs in a new speaker), you must implement the device change detection and UI update logic in your application layer.

Get Available Speaker Devices

Get the list of available speaker devices and populate the select menu:

// Create a function to update the speaker device list
const updateSpeakerList = async () => {
  const speakerSelect = await arctosSdkInstance.$meetingRoom.getSpeakerDevices();
  const selectElement = document.querySelector('#switch-speaker-select');
  
  // Clear existing options
  selectElement.innerHTML = '';
  
  // Rebuild the options
  speakerSelect.forEach(element => {
    var option = document.createElement("option");
    option.text = element.label;
    option.value = element.deviceId;
    selectElement.appendChild(option);
  });
};

// Initialize speaker list
await updateSpeakerList();

Detect Device Changes (Application Layer Implementation)

To automatically update the device list when speakers are added or removed, implement device change detection:

// Listen for device changes
navigator.mediaDevices.ondevicechange = async () => {
  console.log('Device changed, updating speaker list');
  await updateSpeakerList();
};

This ensures that when users plug in or unplug speaker devices, the select menu automatically reflects the current available devices.

Switch Speaker Device

Click the select menu to switch between available speaker devices:

// Select speaker to use
SwitchSpeaker = async function (e) {
  let val = document.querySelector('#switch-speaker-select').value;
  arctosSdkInstance.$meetingRoom.setSpeakerDevice(val);
};

Toggle Speaker On/Off

Toggle the user's speakers in the room on or off:

// Toggle the speaker on or off
toggleSpeakerClick = async function () {
  arctosSdkInstance.$meetingRoom.toggleSpeaker();
};

Complete Sample Code

The following sample demonstrates:

Getting initial speaker devices
Implementing device change detection
Automatically updating the device list when speakers are added/removed
Switching between speakers

Sample Code