Reliably using the 'loud speaker' instead of the quieter 'ear speaker' on mobile devices

Options
oponder
oponder Member
in Q&A

Hi, I'm wondering if anyone has any tips or experience with this topic.

While this is not a Daily specific thing and touches more on Web standards and device/platform differences and implementation of standards, im curious if Daily APIs help with this in any way. My daily application is browser only, and used on mobile devices as well as desktops. It's a custom integration (so not using the prebuilt)

I am struggling to understand how to reliably use the louder speaker of my mobile device. I've tried various things, but sometimes it still feels random.

Today I connected to my call and it started in the quiet ear mode, then when I joined another call I got the louder loud speaker mode. This was on an android device.

Also in the past I have had the same issue with iOS devices.

I tried in the past to add some controls for the user to pick their own speaker (setSinkId), but this is not supported on Safari and iOS. https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId

Anyone that has already struggled down this path and figured out the right set of workarounds or configuration tricks to reliably get the desired audio output mode?

Answers

  • mark_at_daily
    mark_at_daily Community Manager, Dailynista admin
    Options

    Hi @oponder, Daily should handle this complexity for you. You should be able to call enumerateDevices() (docs) to see which devices are available and then setInputDevicesAsync() (docs) to select a device for use. With this, you should have control over which device is used.

    Importantly, on mobile devices, the rule is often that the audio output device is set based on the selection of the audio input device.

    One caveat to mention, IIRC, iOS will only show devices that are available. So, if no peripherals are attached (e.g. wired or bluetooth headphones), then there will only be one option, which is the iPhone Microphone. That should play via speakerphone automatically. Once other devices are plugged in, then there will be options you can make available to the user.

    Also, if you're building with React, this gets even easier by using the useDevices hook (docs).

    Hope this helps!

Categories