Building the Best Camera & Microphone Selector
Why We Need a Camera & Microphone Selector
Historically, with our browser-based desktop recording client, we've relied on the browser features for the user to choose their audio and video recording devices.
Chrome and Chromium-based browsers (Edge, Brave, etc..) had an internal option for choosing both the camera and microphone, and Firefox prompted you to choose one every time. We loved this approach. We kept the recorder simple, and the users relied on existing functionality and settings.
This method sufficed until Safari introduced MediaRecorder support. Safari has no internal option or menu to specify the preferred camera so we had to introduce a way for the user to choose the camera device, at least for Safari (for the microphone, there is a macOS-level setting under System Settings > Sound > Input). Firefox also introduced a subtle change in versions as recent as 106 where it only asks you to choose your devices once per tab per domain.
Apart from the browser changes, a 2nd argument for introducing our own device selector was the prevalence of having multiple recording devices:
- A plethora of devices can now be used for recording, from USB/Bluetooth/AirPlay headsets to virtual camera devices (OBS, XSplit, ManyCam) and virtual microphone devices (Microsoft Teams Audio Device, Steam Streaming Microphone, Steelseries Sonar Virtual Audio Device). There's a good chance the user’s initial devices aren’t the correct ones OR that they don't work.
- Continuity Camera: macOs Ventura introduced the ability to use the iPhone as a webcam wireless or through a wire. At the moment, any Ventura-capable Mac with an iPhone nearby will likely have an extra camera/microphone set through the Continuity Camera feature.
- iOS recently introduced the ability to choose a specific (back) camera on devices with multiple back cameras. It seems this happened in iOS 16.3.
- iPadOS 17 now supports external USB cameras.
As a result, earlier this year, we started working on a new device selector. The device selector is now live with our desktop recording client delivered using the 2.0 embed code on both desktop devices and mobile devices.
Below are some ways we've tried to make this selector the best it can be and some of the considerations we've had to make when designing and developing it.
User Interface
UI-wise, we chose two dedicated icons: a microphone and a camera icon. Clicking each opens up the respective list of devices. We also played with using a generic cog wheel and a single list, but we felt having two dedicated icons was the most obvious. We've seen some apps (Google Meet) hiding the device selectors in deeply nested menus. We feel this approach would have been the worst. The UI we chose is similar to the one used by Zoom and was the preferred variant by the clients we interviewed.
Visual Indication When Adding or Removing Devices
Cameras and microphones can be added or removed at any time. For this reason we wanted a visual indication that something happened and a new device is available or has been removed. We chose a notification-like icon. Green is for when a new device is added, and orange is for when a device has been removed.
When new devices might show up:
- User plugs in a USB camera or microphone
- User connects a Bluetooth headset
- User plugs in a wired headset (analog jack plug)
- User puts an AirPod in the ear
- The iPhone comes in range of your Mac or is connected via wire to your Mac (Continuity Camera)
- You install virtual devices like OBS, Microsoft Teams, or Steam
When devices might disappear from the list:
- Wireless device runs out of battery.
- You enter airplane mode while using a Bluetooth headset
- You disable Bluetooth by mistake (at the OS level or at the device level)
- You mistakenly turn off the Bluetooth headset (device level)
- Shoddy wire/connection for wired headset (USB or analog)
- You pull out the USB microphone/camera or analog headset
- The 2nd/last AirPod is removed from the ear or drops from your ear
- If you close the lid on a MacBook that’s connected to power and an external monitor, the FaceTime camera disappears (not in Firefox).
- On Windows, you can instantly disable devices from Device Manager
We Keep Disconnected Devices in the List
Most of the disappearance events are unwanted. To help the user navigate the confusion, we’re showing disconnected devices in the list of devices for 1 more minute. Disconnected devices will keep their position in the list and will be inactive. This will provide a clear visual indication to the user which device was disconnected.
We Respect the User’s Selection on Firefox
On Firefox, the user can also choose the device from the permissions dialog box, so we need to be careful and ensure that the chosen device is used. Also, Firefox asks for permission once per device per tab per domain, so changing devices will probably bring up the native permissions dialog box.
Contextual Device Info on Chrome, Edge, Opera, Brave on macOS
On Chromium-based browsers, on macOS, the list of devices includes useful contextual information about some devices. We've seen the following labels:
- Built-in
- Virtual
- Bluetooth
This is not something we've built, but a nice feature of Chrome on macOS. Unfortunately, we were not able to replicate the feature on other browsers and operating systems.
We Make It Clear That Device Changes Aren’t Instant
Device changes aren’t instant. So from the time you click on a different camera or microphone device, until that device is correctly captured we show a small animation beside the new device. This animation sets the correct expectation for the user.
We realized that the initial change to a new device is slow, while a subsequent change back to the same device is fast (as if the device has already been initialized). This bit of info sits on top of our previous research on how fast camera & microphone devices initialize.
The Default Microphone Entry on Chrome Has a Better Label
On Chrome (and on any other Chromium-based browser), there’s a Default microphone device. It represents the microphone selected as default at the OS level. For a long while, I thought it represented the default device selected in the Chrome settings, but that proved false.
This pseudo-device:
- can change when connecting/disconnecting a microphone/input device
- will definitely change when one selects a different default input device at the OS level
Chrome labels this pseudo device as "Default" (e.g. "Default - Logitech StreamCam"). We’ve changed the prefix to "Same as System" (e.g. "Same as System - Logitech StreamCam") to make it more clear that it is the device selected at the OS level. Zoom, Around, FaceTime and WhatsApp use a similar label.
There's a bug on Chrome where if you change the default input device at the OS level, the "Default" entry label in Chrome is updated, but the actual audio stream does not come from the new device. We’ve taken (great) care to use the correct device when the device changes (at the OS level) with the recorder initialized or with the microphone list open (we silently capture the new default device directly without relying on the Default entry).
Communications Entry on Chrome/Edge on Windows
In Windows, you can set 2 kinds of default input devices: a Default microphone and a Communications microphone. You'll see them listed on Chrome and any other Chromium-based browsers (Edge, Opera, Brave, etc.).
Some Devices Might Be Used by Other Software
On Windows, different applications can't access the same camera at the same time. For example, if your camera is used by Zoom, it can't be used by Chrome. In these situations, we’re careful not to make the switch and, when possible, inform the user.
There are a few exceptions:
- different browser tabs can access the same camera (tested with Chrome, Edge, and Firefox)
- the OBS Virtual Camera can be accessed by multiple applications at the same time
Chrome Doesn’t Pick Up the Continuity Camera
The Chrome browser on macOS doesn't show the iPhone Camera through Continuity Camera, only the Microphone. This is a known issue specific to Chrome (works on Edge and Brave). There's a workaround for it tough.
Continuity Camera’s Desk View Shows Up Only on Safari
On macOS Ventura and later, when using Continuity Camera (your iPhone as a webcam), there’s a Desk View Camera device available in Safari. It does not show up in Chrome or Firefox.
iPadOS 17 Supports External Webcams and Microphones
As covered by 9to5Mac and demoed in this tweet. We've tested this with a Logitech StreamCam - it comes with a USB-C cable, which makes testing easier - and iPadOS 17, and it works as expected. The StreamCam camera shows up in Safari in the list of devices.
Bluetooth 5.2, LC3 audio codec over LE Audio
Newer Bluetooth headsets will be able to transmit data over LE Audio using a new LC3 codec. We've prepared by getting a new Bluetooth 5.3 capable MacBook PRO and a pair of Sony LinkBuds S with the updated firmware that supports LE Audio in beta with some (Sony) devices but we were unable to test yet the new codec.
In the best-case scenario, if you listen to music/YouTube on your device and enter a call or start an audio/video recording, the music will continue to sound good instead of sounding garbled during the call/recording.
Connecting a Headset/Microphone Through the 3.5 mm Jack
On macOS Sonoma (14) and Ventura (13), connecting an external analog headset with microphone using a 3.5mm jack (TRRS) creates a new input device named "External Microphone" while the built-in one continues to be available as an option.
On older versions of macOS like macOS Monterey (12.7), connecting the same headset through the 3.5mm jack replaces the existing microphone named "Internal Microphone" with "External Microphone". The change is visible in Chrome, but not visible in Safari or Firefox (it only picks up the label change on new tabs).
New Permissions Dialogue in Chrome 115
Chrome 115 rolled out a new permissions dialogue to a subset of users.
By default, in Chrome, when users are prompted for permission, they can select Allow or Block. Both options are stored permanently. But Chrome 115, for a subset of users:
- added an Allow this time option for geolocation, camera, and microphone permissions
- renamed Allow to Allow on every visit
- renamed Block to Don't Allow
Seamless Jump From Audio-Only to Audio+Video and Back
Our desktop recorder will now seamlessly switch from recording audio (because there's no camera available) to recording audio+ video when a camera is connected and back to recording only audio when the camera is removed.
This is not related to the new device selectors, but we decided to make sure it works as expected.
Seamless Jump From No Input Devices to Audio-Only or Audio+Video
If there is no camera and no microphone, the recorder will display a proper message ("Connect a microphone or camera with microphone to record audio or video" instead of "You need a camera to record video") and allow you to connect a camera or microphone, select it and record. Previously, the recorder would end up in a dead-end state.
This is not related to the new device selectors but we decided to make sure it works as expected.
The Integrated MacBook Microphone Does Not Pick Up Any Sound When Lid Is Closed
If you have a powered MacBook with the lid closed and connected to an external monitor, the integrated "MacBook PRO Microphone" input device will still be available but will not pick up any sound.