diff --git a/src/livekit/MediaDevicesContext.tsx b/src/livekit/MediaDevicesContext.tsx
index 8a19395b..c836f82b 100644
--- a/src/livekit/MediaDevicesContext.tsx
+++ b/src/livekit/MediaDevicesContext.tsx
@@ -20,7 +20,7 @@ import { createMediaDeviceObserver } from "@livekit/components-core";
 import { combineLatest, distinctUntilChanged, map, startWith } from "rxjs";
 import { useObservable, useObservableEagerState } from "observable-hooks";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { isEqual } from "lodash-es";
+import { deepCompare } from "matrix-js-sdk/lib/utils";
 
 import {
   useSetting,
@@ -141,13 +141,16 @@ function useMediaDeviceHandle(
         kind,
         () => logger.error("Error creating MediaDeviceObserver"),
         requestPermissions,
+      ).pipe(
+        startWith([]),
         // This Observable emits new values whenever the browser fires a
         // MediaDevices 'devicechange' event. One would think, innocently, that
         // a 'devicechange' event means the devices have changed. But as of the
         // time of writing, we are seeing mobile Safari firing spurious
         // 'devicechange' events (where no change has actually occurred) when
         // we call MediaDevices.getUserMedia. So, filter by deep equality.
-      ).pipe(startWith([]), distinctUntilChanged<MediaDeviceInfo[]>(isEqual)),
+        distinctUntilChanged<MediaDeviceInfo[]>(deepCompare),
+      ),
     [kind, requestPermissions],
   );
   const available = useObservableEagerState(
diff --git a/src/state/CallViewModel.test.ts b/src/state/CallViewModel.test.ts
index f0066476..b2ecd6cb 100644
--- a/src/state/CallViewModel.test.ts
+++ b/src/state/CallViewModel.test.ts
@@ -26,11 +26,11 @@ import {
   type RemoteParticipant,
 } from "livekit-client";
 import * as ComponentsCore from "@livekit/components-core";
-import { isEqual } from "lodash-es";
 import {
   type CallMembership,
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
+import { deepCompare } from "matrix-js-sdk/lib/utils";
 
 import { CallViewModel, type Layout } from "./CallViewModel";
 import {
@@ -200,7 +200,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
     // care about the most recent value for each time step, so discard these
     // extra values.
     debounceTime(0),
-    distinctUntilChanged(isEqual),
+    distinctUntilChanged(deepCompare),
   );
 }