{"id":439,"date":"2024-07-01T16:07:58","date_gmt":"2024-07-01T16:07:58","guid":{"rendered":"https:\/\/blog.mozilla.org\/webrtc\/?p=439"},"modified":"2025-07-04T00:50:08","modified_gmt":"2025-07-04T00:50:08","slug":"how-webrtc-speaker-selection-works","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/webrtc\/how-webrtc-speaker-selection-works\/","title":{"rendered":"How WebRTC speaker selection works"},"content":{"rendered":"

<\/p>\n

Today’s topic is speaker selection<\/em>. If you’ve never given it much thought, or consider it straightforward, this post is for you. Let’s start by testing your general WebRTC knowledge:<\/p>\n

Pop Quiz:<\/strong> If a website wants to play out of different speakers on your system, what permission must it have?<\/p>\n

    \n
  1. \n
      \n
    1. Speaker-selection permission<\/li>\n
    2. Microphone permission<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n

      If you answered 2 then chances are you know your WebRTC stuff well, but you’re probably on a Chromium browser.<\/p>\n

      Pause for a moment. Why would websites need microphone<\/strong><\/em> permission to control speaker output<\/em>? Why should users expose themselves to possibly being recorded just to redirect songs to their portable speakers? They shouldn’t. It’s a permission escalation and an entirely unnecessary invasion of privacy. Nevertheless, in other browsers this remains the only answer today.<\/p>\n

      Thankfully, Firefox provides the more straightforward and privacy-preserving answer of 1.<\/p>\n

      In this post, we’ll look at how speaker selection works in different browsers, how permissions can be abused for fingerprinting purposes, and how to add speaker selection with a fallback so it works in all browsers.
      \n<\/p>\n

      How speaker selection works in Firefox (and the spec)<\/h2>\n

      On desktop, Firefox supports the standards-track navigator.mediaDevices.selectAudioOutput()<\/code><\/a> API. You only need a <button><\/code> to invoke it:<\/p>\n

      \r\nspeakers.onclick = async () => {\r\n  const info = await navigator.mediaDevices.selectAudioOutput();\r\n  await videoElement.setSinkId(info.deviceId);\r\n  speakers.innerText = `${info.label}...`;\r\n  localStorage.previouslyUsedSpeakersId = info.deviceId;\r\n}\r\n<\/pre>\n
      Passing in a previously used deviceId<\/code><\/a> you wish to use is optional, but allows you to skip a prompt in most cases.<\/p>\n
      If you’re in Firefox right now, you can put on your headset and try it here:<\/p>\n