Add camera switching to the media view model

src/state/MediaViewModel.ts

@@ -16,6 +16,7 @@ import {
 import {
   type LocalParticipant,
   LocalTrack,
+  LocalVideoTrack,
   type Participant,
   ParticipantEvent,
   type RemoteParticipant,
@@ -27,6 +28,7 @@ import {
   RemoteTrack,
 } from "livekit-client";
 import { type RoomMember } from "matrix-js-sdk";
+import { logger } from "matrix-js-sdk/lib/logger";
 import {
   BehaviorSubject,
   type Observable,
@@ -51,6 +53,8 @@ import { accumulate } from "../utils/observable";
 import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { E2eeType } from "../e2ee/e2eeType";
 import { type ReactionOption } from "../reactions";
+import { platform } from "../Platform";
+import { type MediaDevices } from "./MediaDevices";
 
 export function observeTrackReference$(
   participant$: Observable<Participant | undefined>,
@@ -433,20 +437,35 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
  * The local participant's user media.
  */
 export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
+  /**
+   * The local video track as an observable that emits whenever the track
+   * changes, the camera is switched, or the track is muted.
+   */
+  private readonly videoTrack$: Observable<LocalVideoTrack | null> =
+    this.video$.pipe(
+      switchMap((v) => {
+        const track = v?.publication?.track;
+        if (!(track instanceof LocalVideoTrack)) return of(null);
+        return merge(
+          // Watch for track restarts because they indicate a camera switch
+          fromEvent(track, TrackEvent.Restarted).pipe(
+            startWith(null),
+            map(() => track),
+          ),
+          fromEvent(track, TrackEvent.Muted).pipe(map(() => null)),
+        );
+      }),
+    );
+
   /**
    * Whether the video should be mirrored.
    */
-  public readonly mirror$ = this.video$.pipe(
-    switchMap((v) => {
-      const track = v?.publication?.track;
-      if (!(track instanceof LocalTrack)) return of(false);
-      // Watch for track restarts, because they indicate a camera switch
-      return fromEvent(track, TrackEvent.Restarted).pipe(
-        startWith(null),
-        // Mirror only front-facing cameras (those that face the user)
-        map(() => facingModeFromLocalTrack(track).facingMode === "user"),
-      );
-    }),
+  public readonly mirror$ = this.videoTrack$.pipe(
+    // Mirror only front-facing cameras (those that face the user)
+    map(
+      (track) =>
+        track !== null && facingModeFromLocalTrack(track).facingMode === "user",
+    ),
     this.scope.state(),
   );
 
@@ -457,12 +476,46 @@ export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
   public readonly alwaysShow$ = alwaysShowSelf.value$;
   public readonly setAlwaysShow = alwaysShowSelf.setValue;
 
+  /**
+   * Callback for switching between the front and back cameras.
+   */
+  public readonly switchCamera$: Observable<(() => void) | null> =
+    platform === "desktop"
+      ? of(null)
+      : this.videoTrack$.pipe(
+          map((track) => {
+            if (track === null) return null;
+            const facingMode = facingModeFromLocalTrack(track).facingMode;
+            // If the camera isn't front or back-facing, don't provide a switch
+            // camera shortcut at all
+            if (facingMode !== "user" && facingMode !== "environment")
+              return null;
+            // Restart the track with a camera facing the opposite direction
+            return (): void =>
+              void track
+                .restartTrack({
+                  facingMode: facingMode === "user" ? "environment" : "user",
+                })
+                .then(() => {
+                  // Inform the MediaDevices which camera was chosen
+                  const deviceId =
+                    track.mediaStreamTrack.getSettings().deviceId;
+                  if (deviceId !== undefined)
+                    this.mediaDevices.videoInput.select(deviceId);
+                })
+                .catch((e) =>
+                  logger.error("Failed to switch camera", facingMode, e),
+                );
+          }),
+        );
+
   public constructor(
     id: string,
     member: RoomMember | undefined,
     participant$: Observable<LocalParticipant | undefined>,
     encryptionSystem: EncryptionSystem,
     livekitRoom: LivekitRoom,
+    private readonly mediaDevices: MediaDevices,
     displayname$: Observable<string>,
     handRaised$: Observable<Date | null>,
     reaction$: Observable<ReactionOption | null>,