Fix audio/video device flickering (#2353)

* Make onError a `useCallback`

Signed-off-by: Timo K <toger5@hotmail.de>
Co-authored-by: Robin <robin@robin.town>

src/matrix-utils.ts

@@ -19,9 +19,13 @@ import { MemoryStore } from "matrix-js-sdk/src/store/memory";
 import { IndexedDBCryptoStore } from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
 import { LocalStorageCryptoStore } from "matrix-js-sdk/src/crypto/store/localStorage-crypto-store";
 import { MemoryCryptoStore } from "matrix-js-sdk/src/crypto/store/memory-crypto-store";
-import { createClient, ICreateClientOpts } from "matrix-js-sdk/src/matrix";
+import {
+  createClient,
+  ICreateClientOpts,
+  Preset,
+  Visibility,
+} from "matrix-js-sdk/src/matrix";
 import { ClientEvent } from "matrix-js-sdk/src/client";
-import { Visibility, Preset } from "matrix-js-sdk/src/@types/partials";
 import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
 import { logger } from "matrix-js-sdk/src/logger";
 import { secureRandomBase64Url } from "matrix-js-sdk/src/randomstring";

src/room/VideoPreview.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useEffect, useMemo, useRef, FC, ReactNode } from "react";
+import { useEffect, useMemo, useRef, FC, ReactNode, useCallback } from "react";
 import useMeasure from "react-use-measure";
 import { ResizeObserver } from "@juggle/resize-observer";
 import { usePreviewTracks } from "@livekit/components-react";
@@ -68,8 +68,8 @@ export const VideoPreview: FC<Props> = ({
     deviceId: devices.audioInput.selectedId,
   };
 
-  const tracks = usePreviewTracks(
-    {
+  const localTrackOptions = useMemo(
+    () => ({
       // The only reason we request audio here is to get the audio permission
       // request over with at the same time. But changing the audio settings
       // shouldn't cause this hook to recreate the track, which is why we
@@ -80,13 +80,21 @@ export const VideoPreview: FC<Props> = ({
       video: muteStates.video.enabled && {
         deviceId: devices.videoInput.selectedId,
       },
-    },
-    (error) => {
+    }),
+    [devices.videoInput.selectedId, muteStates.video.enabled],
+  );
+
+  const onError = useCallback(
+    (error: Error) => {
       logger.error("Error while creating preview Tracks:", error);
       muteStates.audio.setEnabled?.(false);
       muteStates.video.setEnabled?.(false);
     },
+    [muteStates.audio, muteStates.video],
   );
+
+  const tracks = usePreviewTracks(localTrackOptions, onError);
+
   const videoTrack = useMemo(
     () =>
       tracks?.find((t) => t.kind === Track.Kind.Video) as