Audio Output Device Array is of length 0 on safari

I am working on a video conferencing app that leverages Amazon Chime. I have followed the npm page of Amazon Chime SDK JS and managed to get the server response and initialized the meetingSession. However, the problem is when I try to get an array of audio output devices, it is an array of length zero on Safari whereas in browsers like Chrome and Firefox, it works just fine, and I get an array of non zero length. How do I solve this?

Here is what I have coded so far:

import {
  ConsoleLogger,
  DefaultDeviceController,
  DefaultMeetingSession,
  LogLevel,
  MeetingSessionConfiguration
} from 'amazon-chime-sdk-js';
 
const logger = new ConsoleLogger('MyLogger', LogLevel.INFO);
const deviceController = new DefaultDeviceController(logger);
 
// You need responses from server-side Chime API. See below for details.
const meetingResponse = /* Server response */;
const attendeeResponse = /* Server response */;
const configuration = new MeetingSessionConfiguration(meetingResponse, attendeeResponse);

const meetingSession = new DefaultMeetingSession(
  configuration,
  logger,
  deviceController
);

const audioInputDevices = await meetingSession.audioVideo.listAudioInputDevices();
const audioOutputDevices = await meetingSession.audioVideo.listAudioOutputDevices();
const videoInputDevices = await meetingSession.audioVideo.listVideoInputDevices();

/* Rest of the code... */

When I log the lengths of the above arrays in the console, the length of audioOutputDevices array is zero in Safari whereas it is non zero in other browsers.

Answer

The output/speaker device selection is not enabled by default in Firefox and Safari. So you have to change the default settings:

The below steps are tested on macOS Catalina (v: 10.15.7)

a) Firefox: This issue is discussed here: https://github.com/bigbluebutton/bigbluebutton/issues/12471

1. In the url bar type about:config
2. Search in the searchbar for the property media.setsinkid.enabled and set it to true
3. Relaunch the browser and test (open the following link in the browser https://webrtc.github.io/samples/src/content/devices/input-output/). You should now see values in the drop down of Audio Output Destination

b) Safari (Tested on version: 14.1.2):

1. Make sure you see the Develop tab in the top right (if not then enable it “Safari > Preferences > Advanced” and then check “Show Develop menu in menu bar” at the bottom)
2. Navigate to “Develop > Experimental Features > Allow Speaker Device Selection” and make sure “Allow Speaker Device Selection” is checked
3. Relaunch the browser and test here https://webrtc.github.io/samples/src/content/devices/input-output/

If you want to inform the user then you can have something like below(pseudo code):

ioDevices = await navigator.mediaDevices.enumerateDevices();
let outputDeviceSelectable = false;
for (let device: ioDevices) {
    if (device.kind == "audiooutput") {
        outputDeviceSelectable = true;
        break;
    }
}
if (outputDeviceSelectable == false) {
    show a pop up to the user to change the default settings
}