Use the platform property for ios detection (#3360)

docs/controls.md

@@ -27,5 +27,5 @@ On mobile platforms (iOS, Android), web views do not reliably support selecting
 Callbacks for buttons in EC that are handled by the native application
 
 - `showNativeAudioDevicePicker: (() => void) | undefined`. Callback called whenever the user presses the output button in the settings menu.
-  This button is only shown on iOS. (`userAgent.includes("iPhone")`)
+  This button is only shown on iOS. (`/iPad|iPhone|iPod|Mac/.test(navigator.userAgent)`)
 - `onBackButtonPressed: (() => void) | undefined`. Callback when the webview detects a tab on the header's back button.

src/state/MediaDevices.ts

@@ -32,6 +32,7 @@ import {
   availableOutputDevices$ as controlledAvailableOutputDevices$,
 } from "../controls";
 import { getUrlParams } from "../UrlParams";
+import { platform } from "../Platform";
 
 // This hardcoded id is used in EX ios! It can only be changed in coordination with
 // the ios swift team.
@@ -87,9 +88,8 @@ export interface MediaDevice<Label, Selected> {
  *  - Only show the earpiece toggle option if the earpiece is available:
  *   `availableOutputDevices$.includes((d)=>d.forEarpiece)`
  */
-export const iosDeviceMenu$ = navigator.userAgent.includes("iPhone")
-  ? of(true)
-  : alwaysShowIphoneEarpieceSetting.value$;
+export const iosDeviceMenu$ =
+  platform === "ios" ? of(true) : alwaysShowIphoneEarpieceSetting.value$;
 
 function availableRawDevices$(
   kind: MediaDeviceKind,