arctos Web-SDK For developsarctos Web-SDK For develops
  • English
  • 繁體中文
  • English
  • 繁體中文
  • Guide

    • get-started
  • overview
  • Spec
  • installization
  • features

    • initial_setting
    • camera
    • microphone
      • Get Available Microphone Devices
      • Detect Device Changes (Application Layer Implementation)
      • Switch Microphone Device
      • Toggle Microphone On/Off
      • Complete Sample Code
    • speaker
    • share_screen
    • paint_board
    • share_message
    • switch_template
    • video_filters

Switch Microphone

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 microphone), you must implement the device change detection and UI update logic in your application layer.

Get Available Microphone Devices

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

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

// Initialize microphone list
await updateAudioList();

Detect Device Changes (Application Layer Implementation)

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

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

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

Switch Microphone Device

Click the select menu to switch between available microphone devices:

// Select microphone to use
SwitchAudio = async function (e) {
  let val = document.querySelector('#switch-audio-select').value;
  arctosSdkInstance.$meetingRoom.setAudioDevice(val);
};

Toggle Microphone On/Off

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

// Toggle the microphone on or off
toggleAudioClick = async function () {
  arctosSdkInstance.$meetingRoom.toggleAudio();
};

Complete Sample Code

The following sample demonstrates:

  • Getting initial microphone devices
  • Implementing device change detection
  • Automatically updating the device list when microphones are added/removed
  • Switching between microphones

Sample Code

Prev
camera
Next
speaker