Add experimental 2-way audio support.

src/action-handler-directive.ts

@@ -78,14 +78,10 @@ class ActionHandler extends HTMLElement implements ActionHandler {
     });
 
     const start = (): void => {
-      const options = element.actionHandlerOptions;
-
-      if (options?.hasHold) {
-        this.held = false;
-        this.timer = window.setTimeout(() => {
-          this.held = true;
-        }, this.holdTime);
-      }
+      this.held = false;
+      this.timer = window.setTimeout(() => {
+        this.held = true;
+      }, this.holdTime);
 
       fireEvent(element, 'action', { action: 'start_tap' });
     };
@@ -102,14 +98,13 @@ class ActionHandler extends HTMLElement implements ActionHandler {
         // This action handler by default relies on synthetic click events for
         // touch devices, in order to ensure that embedded cards (e.g. WebRTC)
         // can use stock click handlers. The exception is for hold events.
-        !(options?.hasHold && this.held)
+        !this.held
       ) {
         return;
       }
-      if (options?.hasHold) {
-        clearTimeout(this.timer);
-        this.timer = undefined;
-      }
+
+      clearTimeout(this.timer);
+      this.timer = undefined;
 
       fireEvent(element, 'action', { action: 'end_tap' });
 

src/camera-manager/frigate/engine-frigate.ts

@@ -989,9 +989,7 @@ export class FrigateCameraManagerEngine
 
     const countSegments = () =>
       sum(
-        cameraIDs.map(
-          (cameraID) => this._recordingSegmentsCache.getSize(cameraID) ?? 0,
-        ),
+        cameraIDs.map((cameraID) => this._recordingSegmentsCache.getSize(cameraID) ?? 0),
       );
     const segmentsStart = countSegments();
 
@@ -1081,6 +1079,7 @@ export class FrigateCameraManagerEngine
       supportsSnapshots: !isBirdseye,
       supportsRecordings: !isBirdseye,
       supportsTimeline: !isBirdseye,
+      supports2WayAudio: cameraConfig.live_provider === 'go2rtc',
     };
   }
 

src/camera-manager/generic/engine-generic.ts

@@ -182,6 +182,7 @@ export class GenericCameraManagerEngine implements CameraManagerEngine {
       supportsRecordings: false,
       supportsSnapshots: false,
       supportsTimeline: false,
+      supports2WayAudio: false,
     };
   }
 

src/camera-manager/manager.ts

@@ -755,6 +755,7 @@ export class CameraManager {
       supportsRecordings: perCameraCapabilities.some((cap) => cap?.supportsRecordings),
       supportsSnapshots: perCameraCapabilities.some((cap) => cap?.supportsSnapshots),
       supportsTimeline: perCameraCapabilities.some((cap) => cap?.supportsTimeline),
+      supports2WayAudio: perCameraCapabilities.some((cap) => cap?.supports2WayAudio),
     };
   }
 }

src/camera-manager/types.ts

@@ -100,6 +100,7 @@ interface BaseCapabilities {
   supportsRecordings: boolean;
   supportsSnapshots: boolean;
   supportsTimeline: boolean;
+  supports2WayAudio: boolean;
 }
 
 export type CameraManagerCapabilities = BaseCapabilities;

src/card.ts

@@ -90,6 +90,7 @@ import { ResolvedMediaCache } from './utils/ha/resolved-media.js';
 import { supportsFeature } from './utils/ha/update.js';
 import { FrigateCardInitializer } from './utils/initializer.js';
 import { isValidMediaLoadedInfo } from './utils/media-info.js';
+import { MicrophoneController } from './utils/microphone';
 import { getActionsFromQueryString } from './utils/querystring.js';
 import { View } from './view/view.js';
 
@@ -179,6 +180,9 @@ class FrigateCard extends LitElement {
   @state()
   protected _expand?: boolean = false;
 
+  // null implies the user refused microphone access.
+  protected _microphoneController?: MicrophoneController;
+
   protected _conditionState?: ConditionState;
 
   protected _refMenu: Ref<FrigateCardMenu> = createRef();
@@ -341,7 +345,13 @@ class FrigateCard extends LitElement {
    * Get the style of emphasized menu items.
    * @returns A StyleInfo.
    */
-  protected _getEmphasizedStyle(): StyleInfo {
+  protected _getEmphasizedStyle(critical?: boolean): StyleInfo {
+    if (critical) {
+      return {
+        animation: 'pulse 3s infinite',
+        color: 'var(--error-color, white)',
+      };
+    }
     return {
       color: 'var(--primary-color, white)',
     };
@@ -613,6 +623,27 @@ class FrigateCard extends LitElement {
       });
     }
 
+    if (this._microphoneController && cameraCapabilities?.supports2WayAudio) {
+      const muted = this._microphoneController.isMuted();
+      buttons.push({
+        icon: this._microphoneController.isForbidden()
+          ? 'mdi:microphone-message-off'
+          : muted
+          ? 'mdi:microphone-off'
+          : 'mdi:microphone',
+        ...this._getConfig().menu.buttons.microphone,
+        type: 'custom:frigate-card-menu-icon',
+        title: localize('config.menu.buttons.microphone'),
+        style: muted ? {} : this._getEmphasizedStyle(true),
+        start_tap_action: createFrigateCardCustomAction(
+          'microphone_unmute',
+        ) as FrigateCardCustomAction,
+        end_tap_action: createFrigateCardCustomAction(
+          'microphone_mute',
+        ) as FrigateCardCustomAction,
+      });
+    }
+
     if (screenfull.isEnabled && !this._isBeingCasted()) {
       buttons.push({
         icon: screenfull.isFullscreen ? 'mdi:fullscreen-exit' : 'mdi:fullscreen',
@@ -949,6 +980,21 @@ class FrigateCard extends LitElement {
     if (changedProps.has('_view')) {
       this._setPropertiesForExpandedMode();
     }
+
+    const oldConfig: FrigateCardConfig | undefined =
+      changedProps.get('_overriddenConfig') ?? changedProps.get('_config');
+    const newConfig = this._getConfig();
+    if (
+      (!this._microphoneController ||
+        changedProps.has('_overriddenConfig') ||
+        changedProps.has('_config')) &&
+      oldConfig?.live.microphone.disconnect_seconds !==
+        newConfig.live.microphone.disconnect_seconds
+    ) {
+      this._microphoneController = new MicrophoneController(
+        this._getConfig().live.microphone.disconnect_seconds,
+      );
+    }
   }
 
   protected _setPropertiesForMinMaxHeight(): void {
@@ -1488,6 +1534,24 @@ class FrigateCard extends LitElement {
       case 'diagnostics':
         this._diagnostics();
         break;
+      case 'microphone_mute':
+        this._microphoneController?.mute();
+        this.requestUpdate();
+        break;
+      case 'microphone_unmute':
+        const unmuteAndUpdate = () => {
+          this._microphoneController?.unmute();
+          this.requestUpdate();
+        }
+        if (
+          !this._microphoneController?.isConnected() &&
+          !this._microphoneController?.isForbidden()
+        ) {
+          this._microphoneController?.connect().then(unmuteAndUpdate);
+        } else if (this._microphoneController?.isConnected()) {
+          unmuteAndUpdate();
+        }
+        break;
       default:
         console.warn(`Frigate card received unknown card action: ${action}`);
     }
@@ -2020,6 +2084,7 @@ class FrigateCard extends LitElement {
               .nonOverriddenConfig=${this._config}
               .conditionState=${this._conditionState}
               .hide=${!!this._message}
+              .microphoneStream=${this._microphoneController?.getStream()}
             ></frigate-card-views>`}
         ${
           // Keep message rendering to last to show messages that may have been

src/components/live/live-go2rtc.ts

@@ -12,6 +12,7 @@ import {
   CameraConfig,
   ExtendedHomeAssistant,
   FrigateCardMediaPlayer,
+  MicrophoneConfig,
 } from '../../types.js';
 import '../image.js';
 import {
@@ -34,10 +35,40 @@ const GO2RTC_URL_SIGN_EXPIRY_SECONDS = 24 * 60 * 60;
 
 @customElement('frigate-card-live-go2rtc-player')
 class FrigateCardGo2RTCPlayer extends VideoRTC {
+  protected _microphoneStream?: MediaStream;
+
+  constructor(microphoneStream?: MediaStream) {
+    super();
+    if (microphoneStream) {
+      this._microphoneStream = this._microphoneStream;
+    }
+  }
+
   public play(): void {
     // Let Frigate card control auto playing.
   }
 
+  protected reconnect(): void {
+    if (this.wsState !== WebSocket.CLOSED) {
+      // The websocket has onclose handlers, so don't call onconnect directly,
+      // wait until the eventhandlers are finished..
+      this.ws?.addEventListener('close', () => this.onconnect());
+      this.ondisconnect();
+    } else {
+      // Still call ondisconnect() as there may be an RTC connection to
+      // terminate even if the websocket is closed.
+      this.ondisconnect();
+      this.onconnect();
+    }
+  }
+
+  public async setMicrophoneStream(microphoneStream?: MediaStream): Promise<void> {
+    if (this._microphoneStream !== microphoneStream) {
+      this._microphoneStream = microphoneStream;
+      this.reconnect();
+    }
+  }
+
   public oninit(): void {
     super.oninit();
 
@@ -56,6 +87,85 @@ class FrigateCardGo2RTCPlayer extends VideoRTC {
       this.video.muted = true;
     }
   }
+
+  // This is a modified version of onwebrtc() to support 2-way audio.
+  override onwebrtc() {
+    const pc = new RTCPeerConnection(this.pcConfig);
+
+    const video2: HTMLVideoElement = document.createElement('video');
+    video2.addEventListener('loadeddata', (ev) => this.onpcvideo(ev), { once: true });
+
+    pc.addEventListener('icecandidate', (ev) => {
+      const candidate = ev.candidate ? ev.candidate.toJSON().candidate : '';
+      this.send({ type: 'webrtc/candidate', value: candidate });
+    });
+
+    pc.addEventListener('track', (ev) => {
+      // when stream already init
+      if (video2.srcObject !== null) return;
+
+      // when audio track not exist in Chrome
+      if (ev.streams.length === 0) return;
+
+      // when audio track not exist in Firefox
+      if (ev.streams[0].id[0] === '{') return;
+
+      // Filter out tracks that are not video related.
+      if (ev.track.kind !== 'video') return;
+
+      video2.srcObject = ev.streams[0];
+    });
+
+    pc.addEventListener('connectionstatechange', () => {
+      if (pc.connectionState === 'failed' || pc.connectionState === 'disconnected') {
+        pc.close(); // stop next events
+
+        this.pcState = WebSocket.CLOSED;
+        this.pc = null;
+
+        this.onconnect();
+      }
+    });
+
+    this.onmessage['webrtc'] = (msg) => {
+      switch (msg.type) {
+        case 'webrtc/candidate':
+          pc.addIceCandidate({
+            candidate: msg.value,
+            sdpMid: '0',
+          }).catch(() => console.debug);
+          break;
+        case 'webrtc/answer':
+          pc.setRemoteDescription({
+            type: 'answer',
+            sdp: msg.value,
+          }).catch(() => console.debug);
+          break;
+        case 'error':
+          if (msg.value.indexOf('webrtc/offer') < 0) return;
+          pc.close();
+      }
+    };
+
+    // Safari doesn't support "offerToReceiveVideo"
+    pc.addTransceiver('video', { direction: 'recvonly' });
+    pc.addTransceiver('audio', { direction: 'recvonly' });
+
+    // Must add microphone tracks prior to making the offer.
+    this._microphoneStream?.getTracks().forEach((track) => {
+      console.info('Adding microphone track', track);
+      pc.addTransceiver(track, { direction: 'sendonly' });
+    });
+
+    pc.createOffer().then((offer) => {
+      pc.setLocalDescription(offer).then(() => {
+        this.send({ type: 'webrtc/offer', value: offer.sdp });
+      });
+    });
+
+    this.pcState = WebSocket.CONNECTING;
+    this.pc = pc;
+  }
 }
 
 @customElement('frigate-card-live-go2rtc')
@@ -69,6 +179,12 @@ export class FrigateCardGo2RTC extends LitElement implements FrigateCardMediaPla
   @property({ attribute: false })
   public cameraEndpoints?: CameraEndpoints;
 
+  @property({ attribute: false })
+  public microphoneStream?: MediaStream;
+
+  @property({ attribute: false })
+  public microphoneConfig?: MicrophoneConfig;
+
   protected _player?: FrigateCardGo2RTCPlayer;
 
   public async play(): Promise<void> {
@@ -141,7 +257,7 @@ export class FrigateCardGo2RTC extends LitElement implements FrigateCardMediaPla
       return;
     }
 
-    this._player = new FrigateCardGo2RTCPlayer();
+    this._player = new FrigateCardGo2RTCPlayer(this.microphoneStream);
     this._player.src = address;
     this._player.visibilityCheck = false;
 
@@ -156,6 +272,9 @@ export class FrigateCardGo2RTC extends LitElement implements FrigateCardMediaPla
     if (!this._player || changedProps.has('cameraEndpoints')) {
       this._createPlayer();
     }
+    if (changedProps.has('microphoneStream')) {
+      this._player?.setMicrophoneStream(this.microphoneStream);
+    }
   }
 
   protected render(): TemplateResult | void {

src/components/live/live.ts

@@ -138,6 +138,9 @@ export class FrigateCardLive extends LitElement {
   @property({ attribute: false })
   public cardWideConfig?: CardWideConfig;
 
+  @property({ attribute: false })
+  public microphoneStream?: MediaStream;
+
   // Whether or not the live view is currently in the background (i.e. preloaded
   // but not visible)
   @state()
@@ -251,6 +254,7 @@ export class FrigateCardLive extends LitElement {
           .liveOverrides=${this.liveOverrides}
           .cardWideConfig=${this.cardWideConfig}
           .cameraManager=${this.cameraManager}
+          .microphoneStream=${this.microphoneStream}
           @frigate-card:message=${(ev: CustomEvent<Message>) => {
             this._renderKey++;
             this._messageReceivedPostRender = true;
@@ -315,6 +319,9 @@ export class FrigateCardLiveCarousel extends LitElement {
   @property({ attribute: false })
   public cameraManager?: CameraManager;
 
+  @property({ attribute: false })
+  public microphoneStream?: MediaStream;
+
   // Index between camera name and slide number.
   protected _cameraToSlide: Record<string, number> = {};
   protected _refMediaCarousel: Ref<FrigateCardMediaCarousel> = createRef();
@@ -541,6 +548,7 @@ export class FrigateCardLiveCarousel extends LitElement {
       <div class="embla__slide">
         <frigate-card-live-provider
           ?disabled=${this.liveConfig.lazy_load}
+          .microphoneStream=${this.view?.camera === cameraID ? this.microphoneStream : undefined}
           .cameraConfig=${cameraConfig}
           .cameraEndpoints=${guard(
             [this.cameraManager, cameraID],
@@ -722,6 +730,9 @@ export class FrigateCardLiveProvider
   @property({ attribute: false })
   public cardWideConfig?: CardWideConfig;
 
+  @property({ attribute: false })
+  public microphoneStream?: MediaStream;
+
   @state()
   protected _isVideoMediaLoaded = false;
 
@@ -933,6 +944,8 @@ export class FrigateCardLiveProvider
               .hass=${this.hass}
               .cameraConfig=${this.cameraConfig}
               .cameraEndpoints=${this.cameraEndpoints}
+              .microphoneStream=${this.microphoneStream}
+              .microphoneConfig=${this.liveConfig.microphone}
               @frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
             >
             </frigate-card-live-webrtc-card>`

src/components/views.ts

@@ -48,6 +48,9 @@ export class FrigateCardViews extends LitElement {
   @property({ attribute: false })
   public hide?: boolean;
 
+  @property({ attribute: false })
+  public microphoneStream?: MediaStream;
+
   protected willUpdate(changedProps: PropertyValues): void {
     if (changedProps.has('view') || changedProps.has('config')) {
       if (this.view?.is('live') || this._shouldLivePreload()) {
@@ -204,6 +207,7 @@ export class FrigateCardViews extends LitElement {
                 .liveOverrides=${getOverridesByKey(this.config.overrides, 'live')}
                 .cameraManager=${this.cameraManager}
                 .cardWideConfig=${this.cardWideConfig}
+                .microphoneStream=${this.microphoneStream}
                 class="${classMap(liveClasses)}"
               >
               </frigate-card-live>

src/const.ts

@@ -191,6 +191,8 @@ export const CONF_LIVE_PRELOAD = `${CONF_LIVE}.preload` as const;
 export const CONF_LIVE_TRANSITION_EFFECT = `${CONF_LIVE}.transition_effect` as const;
 export const CONF_LIVE_SHOW_IMAGE_DURING_LOAD =
   `${CONF_LIVE}.show_image_during_load` as const;
+export const CONF_LIVE_MICROPHONE_DISCONNECT_SECONDS =
+  `${CONF_LIVE}.microphone.disconnect_seconds` as const;
 
 const CONF_IMAGE = 'image' as const;
 export const CONF_IMAGE_LAYOUT_FIT = `${CONF_IMAGE}.layout.fit` as const;

src/editor.ts

@@ -147,6 +147,7 @@ import {
   CONF_TIMELINE_STYLE,
   CONF_LIVE_CONTROLS_TIMELINE_STYLE,
   CONF_MEDIA_VIEWER_CONTROLS_TIMELINE_STYLE,
+  CONF_LIVE_MICROPHONE_DISCONNECT_SECONDS,
 } from './const.js';
 import { localize } from './localize/localize.js';
 import frigate_card_editor_style from './scss/editor.scss';
@@ -192,6 +193,7 @@ const MENU_LIVE_CONTROLS_THUMBNAILS = 'live.controls.thumbnails';
 const MENU_LIVE_CONTROLS_TIMELINE = 'live.controls.timeline';
 const MENU_LIVE_CONTROLS_TITLE = 'live.controls.title';
 const MENU_LIVE_LAYOUT = 'live.layout';
+const MENU_LIVE_MICROPHONE = 'live.microphone';
 const MENU_MEDIA_GALLERY_CONTROLS_THUMBNAILS = 'media_gallery.controls.thumbnails';
 const MENU_MEDIA_GALLERY_CONTROLS_FILTER = 'media_gallery.controls.filter';
 const MENU_MEDIA_VIEWER_CONTROLS = 'media_viewer.controls';
@@ -994,10 +996,13 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
     configPathShowRecordings: string,
     defaultShowRecordings: boolean,
   ): TemplateResult {
-    return html`
-    ${this._renderOptionSelector(configPathStyle, this._timelineStyleTypes, {
-      label: localize(`config.common.${CONF_TIMELINE_STYLE}`),
-    })}
+    return html` ${this._renderOptionSelector(
+      configPathStyle,
+      this._timelineStyleTypes,
+      {
+        label: localize(`config.common.${CONF_TIMELINE_STYLE}`),
+      },
+    )}
     ${this._renderNumberInput(configPathWindowSeconds, {
       label: localize(`config.common.${CONF_TIMELINE_WINDOW_SECONDS}`),
     })}
@@ -1755,6 +1760,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                 ${this._renderMenuButton('expand') /* */}
                 ${this._renderMenuButton('timeline')}
                 ${this._renderMenuButton('media_player')}
+                ${this._renderMenuButton('microphone')}
               </div>
             `
           : ''}
@@ -1844,6 +1850,15 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   CONF_LIVE_LAYOUT_POSITION_X,
                   CONF_LIVE_LAYOUT_POSITION_Y,
                 )}
+                ${this._putInSubmenu(
+                  MENU_LIVE_MICROPHONE,
+                  true,
+                  'config.live.microphone.editor_label',
+                  { name: 'mdi:microphone' },
+                  html`
+                    ${this._renderNumberInput(CONF_LIVE_MICROPHONE_DISCONNECT_SECONDS)}
+                  `,
+                )}
               </div>
             `
           : ''}

src/external/go2rtc/video-rtc.d.ts

@@ -12,11 +12,19 @@ export class VideoRTC extends HTMLElement {
   video: HTMLVideoElement;
   ws: WebSocket | null;
   wsURL: string;
-  pc: RTCPeerConnection;
+  pc: RTCPeerConnection | null;
   connectTS: number;
   mseCodecs: string;
 
   src: string | URL;
 
   oninit(): void;
+  send(value: unknown): void;
+  onpcvideo(ev: Event): void;
+  onconnect(): void;
+  ondisconnect(): void;
+  onclose(): void;
+  onopen(): void;
+  onwebrtc(): void;
+  onmessage: Record<string, (msg: { type: string; value: string }) => void>;
 }

src/external/go2rtc/video-rtc.js

@@ -27,7 +27,8 @@ export class VideoRTC extends HTMLElement {
             "hvc1.1.6.L153.B0", // H.265 main 5.1 (Chromecast Ultra)
             "mp4a.40.2",        // AAC LC
             "mp4a.40.5",        // AAC HE
-            "opus",             // OPUS Chrome
+            "flac",             // FLAC (PCM compatible)
+            "opus",             // OPUS Chrome, Firefox
         ];
 
         /**

src/localize/languages/en.json

@@ -218,6 +218,11 @@
       "layout": "Live Layout",
       "lazy_load": "Live cameras are lazily loaded",
       "lazy_unload": "Live cameras are lazily unloaded",
+      "microphone": {
+        "disconnect_seconds": "Seconds after which to disconnect microphone (0=never)",
+        "editor_label": "Microphone",
+        "enabled": "Microphone enabled"
+      },
       "preload": "Preload live view in the background",
       "show_image_during_load": "Show still image while the live stream is loading",
       "transition_effect": "Live camera transition effect"
@@ -267,6 +272,7 @@
         "image": "Image",
         "live": "Live",
         "media_player": "Send to media player",
+        "microphone": "Microphone",
         "priority": "Priority",
         "recordings": "Recordings",
         "snapshots": "Snapshots",

src/localize/languages/it.json

@@ -218,6 +218,11 @@
       "layout": "Disposizione dal vivo",
       "lazy_load": "Le telecamere dal vivo sono pigramente cariche",
       "lazy_unload": "Le telecamere dal vivo sono pigramente non caricate",
+      "microphone": {
+        "disconnect_seconds": "",
+        "editor_label": "",
+        "enabled": ""
+      },
       "preload": "Precarica Live View in background",
       "show_image_during_load": "Mostra un'immagine fissa durante il caricamento del live streaming",
       "transition_effect": "Effetto di transizione della telecamera dal vivo"

src/localize/languages/pt-BR.json

@@ -218,6 +218,11 @@
       "layout": "Layout dinâmico",
       "lazy_load": "As câmeras ao vivo são carregadas lentamente",
       "lazy_unload": "As câmeras ao vivo são descarregadas preguiçosamente",
+      "microphone": {
+        "disconnect_seconds": "",
+        "editor_label": "",
+        "enabled": ""
+      },
       "preload": "Pré-carregar a visualização ao vivo em segundo plano",
       "show_image_during_load": "Mostrar imagem estática enquanto a transmissão ao vivo está carregando",
       "transition_effect": "Efeito de transição de câmera ao vivo"

src/scss/button.scss

@@ -19,7 +19,7 @@ ha-icon-button.button {
     opacity: 1;
   }
   50% {
-    opacity: 0;
+    opacity: 0.6;
   }
   100% {
     opacity: 1;

src/types.ts

@@ -219,6 +219,8 @@ const FRIGATE_CARD_GENERAL_ACTIONS = [
   'image',
   'live',
   'menu_toggle',
+  'microphone_mute',
+  'microphone_unmute',
   'recording',
   'recordings',
   'snapshot',
@@ -409,6 +411,20 @@ const imageBaseConfigSchema = z.object({
  * Live provider options
  */
 
+const microphoneConfigDefault = {
+  disconnect_seconds: 60,
+};
+
+const microphoneConfigSchema = z
+  .object({
+    disconnect_seconds: z
+      .number()
+      .min(0)
+      .default(microphoneConfigDefault.disconnect_seconds),
+  })
+  .default(microphoneConfigDefault);
+export type MicrophoneConfig = z.infer<typeof microphoneConfigSchema>;
+
 const go2rtcConfigSchema = z.object({
   modes: z.enum(['webrtc', 'mse', 'mp4', 'mjpeg']).array().optional(),
   stream: z.string().optional(),
@@ -932,6 +948,9 @@ const liveConfigDefault = {
       duration_seconds: 2,
     },
   },
+  microphone: {
+    ...microphoneConfigDefault,
+  },
 };
 
 const livethumbnailsControlSchema = thumbnailsControlSchema.extend({
@@ -975,6 +994,7 @@ const liveOverridableConfigSchema = z
       .boolean()
       .default(liveConfigDefault.show_image_during_load),
     layout: mediaLayoutConfigSchema.optional(),
+    microphone: microphoneConfigSchema.default(liveConfigDefault.microphone),
   })
   .merge(actionsSchema);
 
@@ -1037,6 +1057,7 @@ const menuConfigDefault = {
     fullscreen: visibleButtonDefault,
     expand: hiddenButtonDefault,
     media_player: visibleButtonDefault,
+    microphone: hiddenButtonDefault,
     recordings: hiddenButtonDefault,
   },
   button_size: 40,
@@ -1073,6 +1094,7 @@ const menuConfigSchema = z
         media_player: visibleButtonSchema.default(
           menuConfigDefault.buttons.media_player,
         ),
+        microphone: hiddenButtonSchema.default(menuConfigDefault.buttons.microphone),
         recordings: hiddenButtonSchema.default(menuConfigDefault.buttons.recordings),
       })
       .default(menuConfigDefault.buttons),

src/utils/microphone.ts

@@ -0,0 +1,84 @@
+export class MicrophoneController {
+  protected _stream?: MediaStream | null;
+  protected _timerID: number | null = null;
+
+  // We keep mute state separate from the stream state so that mute/unmute can
+  // be expressed before the stream is created -- and when it's create it will
+  // have the right mute status.
+  protected _mute = true;
+
+  protected _disconnectSeconds: number;
+
+  constructor(disconnectSeconds?: number) {
+    this._disconnectSeconds = disconnectSeconds ?? 0;
+  }
+
+  public async connect(): Promise<void> {
+    try {
+      this._stream = await navigator.mediaDevices.getUserMedia({
+        audio: true,
+        video: false,
+      });
+    } catch (e) {
+      this._stream = null;
+    }
+    this._setMute();
+  }
+
+  public async disconnect(): Promise<void> {
+    this._stream?.getTracks().forEach((track) => track.stop());
+    this._stream = undefined;
+  }
+
+  public getStream(): MediaStream | undefined {
+    return this._stream ?? undefined;
+  }
+
+  protected _setMute(): void {
+    this._stream?.getTracks().forEach((track) => {
+      track.enabled = !this._mute;
+    });
+    this._startTimer();
+  }
+
+  public mute(): void {
+    this._mute = true;
+    this._setMute();
+  }
+
+  public unmute(): void {
+    this._mute = false;
+    this._setMute();
+  }
+
+  public isConnected(): boolean {
+    return !!this._stream;
+  }
+
+  public isForbidden(): boolean {
+    return this._stream === null;
+  }
+
+  public isMuted(): boolean {
+    // For safety, this function always returns the stream mute status directly
+    // (rather the internal state).
+    return !this._stream || this._stream.getTracks().every((track) => !track.enabled);
+  }
+
+  protected _clearTimer(): void {
+    if (this._timerID) {
+      window.clearTimeout(this._timerID);
+      this._timerID = null;
+    }
+  }
+
+  protected _startTimer(): void {
+    if (this._disconnectSeconds) {
+      this._clearTimer();
+      this._timerID = window.setTimeout(() => {
+        this._clearTimer();
+        this.disconnect();
+      }, this._disconnectSeconds * 1000);
+    }
+  }
+}