Merge pull request #38 from eatsjobs/fix/stream-labels

fix/stream labels

Author: eatsjobs

.changeset/seven-forks-cough.md

@@ -0,0 +1,5 @@
+---
+"@eatsjobs/media-mock": minor
+---
+
+The media track labels and id have now the devices ones

lib/main.ts

@@ -720,31 +720,56 @@ export class MediaMockClass {
 
     const videoTracks = canvasStream?.getVideoTracks() ?? [];
 
-    // Normalize MediaStreamTrack methods to provide consistent real-device behavior
-    videoTracks.forEach((track) => {
+    // We detect the facing mode from constraints and get the video device based on that
+    // then we override the id and label based on that
+    const facingMode = this.getFacingModeFromConstraints(constraints);
+    const videoDevice = this.getDeviceForFacingMode(
+      facingMode,
+      this.settings.device,
+    );
+
+    videoTracks.forEach((track: MediaStreamTrack) => {
+      // Set the track label to match the selected device label
+      if (videoDevice?.label) {
+        Object.defineProperty(track, "label", {
+          value: videoDevice.label,
+          writable: false,
+          configurable: false,
+        });
+      }
+
+      // Set the track id (deviceId) to match the selected device
+      if (videoDevice?.deviceId) {
+        Object.defineProperty(track, "id", {
+          value: videoDevice.deviceId,
+          writable: false,
+          configurable: false,
+        });
+      }
+
       // Ensure getCapabilities method is always available (all real devices have this)
       if (!track.getCapabilities) {
-        // Find the first video input device to get its capabilities
-        const videoDevice = this.settings.device.mediaDeviceInfo.find(
-          (device) => device.kind === "videoinput",
-        );
-
         if (videoDevice?.getCapabilities) {
           // Use the device-specific capabilities from mockCapabilities
-          track.getCapabilities = () => videoDevice.getCapabilities();
+          // Bind to track so 'this' refers to the track
+          track.getCapabilities = function (this: MediaStreamTrack) {
+            return videoDevice.getCapabilities();
+          }.bind(track);
         } else {
           // Fallback to device resolutions if no specific capabilities defined
           const deviceResolutions = this.settings.device.videoResolutions;
           const widths = deviceResolutions.map((res) => res.width);
           const heights = deviceResolutions.map((res) => res.height);
 
-          track.getCapabilities = () => ({
-            width: { min: Math.min(...widths), max: Math.max(...widths) },
-            height: { min: Math.min(...heights), max: Math.max(...heights) },
-            frameRate: { min: 1, max: 60 },
-            facingMode: ["user", "environment"],
-            resizeMode: ["none", "crop-and-scale"],
-          });
+          track.getCapabilities = function (this: MediaStreamTrack) {
+            return {
+              width: { min: Math.min(...widths), max: Math.max(...widths) },
+              height: { min: Math.min(...heights), max: Math.max(...heights) },
+              frameRate: { min: 1, max: 60 },
+              facingMode: ["user", "environment"],
+              resizeMode: ["none", "crop-and-scale"],
+            };
+          }.bind(track);
         }
       }
 
@@ -784,6 +809,68 @@ export class MediaMockClass {
     return 30;
   }
 
+  /**
+   * Extract facingMode from constraints (can be a string or ConstrainDOMString)
+   */
+  private getFacingModeFromConstraints(
+    constraints: MediaStreamConstraints,
+  ): string | null {
+    if (typeof constraints.video === "object" && constraints.video.facingMode) {
+      const facingMode = constraints.video.facingMode;
+      if (typeof facingMode === "string") {
+        return facingMode;
+      }
+      // facingMode can be an object with ideal/exact properties
+      const facingModeObj = facingMode as Record<string, unknown>;
+      if (facingModeObj.ideal) {
+        const ideal = facingModeObj.ideal;
+        return Array.isArray(ideal) ? ideal[0] : (ideal as string);
+      }
+      if (facingModeObj.exact) {
+        const exact = facingModeObj.exact;
+        return Array.isArray(exact) ? exact[0] : (exact as string);
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Get the appropriate camera device based on facingMode
+   * Falls back to last videoinput if no matching camera found
+   */
+  private getDeviceForFacingMode(
+    facingMode: string | null,
+    device: DeviceConfig,
+  ): MockMediaDeviceInfo | undefined {
+    const videoDevices = device.mediaDeviceInfo.filter(
+      (d) => d.kind === "videoinput",
+    );
+
+    if (!videoDevices.length) {
+      return undefined;
+    }
+
+    if (!facingMode) {
+      return videoDevices[0];
+    }
+
+    // Find all devices that support the requested facingMode and return the last one
+    // This usually is the Back Camera or camera2 0, facing back for the given default devices
+    const matchingDevices = videoDevices.filter((d) => {
+      const capabilities = d.getCapabilities();
+      const supportedFacingModes = capabilities.facingMode;
+      return (
+        Array.isArray(supportedFacingModes) &&
+        supportedFacingModes.includes(facingMode)
+      );
+    });
+
+    // Return the last matching device if found, otherwise fall back to first videoinput
+    return matchingDevices.length > 0
+      ? matchingDevices[matchingDevices.length - 1]
+      : videoDevices[0];
+  }
+
   /**
    * Get the appropriate resolution based on device orientation and constraints
    * @param constraints Media constraints

package-lock.json

@@ -4,14 +4,19 @@ async function startStream() {
   const videoElement = document.querySelector<HTMLVideoElement>(
     "#video",
   ) as HTMLVideoElement;
-  // const assetURL = "/assets/ean8_12345670.png"; // https://www.pexels.com/video/signing-the-parcel-4440957/
+  // const assetURL = "/assets/ean8_12345670.png";
+  // https://www.pexels.com/video/signing-the-parcel-4440957/
   const videoAssetURL = "/assets/hd_1280_720_25fps.mp4";
   MediaMock.setMockedVideoTracksHandler((tracks) => {
     const capabilities = tracks[0].getCapabilities();
-    tracks[0].getCapabilities = () => ({
-      ...capabilities,
-      whatever: 1,
-    });
+    tracks[0].getCapabilities = function (
+      this: MediaStreamTrack,
+    ): MediaTrackCapabilities & { whatever: number } {
+      return {
+        ...capabilities,
+        whatever: 1,
+      };
+    }.bind(tracks[0]);
     return tracks;
   }).mock(devices["iPhone 12"]);
 
@@ -20,12 +25,17 @@ async function startStream() {
   try {
     const stream = await navigator.mediaDevices.getUserMedia({
       video: {
+        facingMode: { exact: "environment" },
         width: { ideal: 1920 },
         height: { ideal: 1080 },
         frameRate: { ideal: 5 },
       },
     });
 
+    stream.getVideoTracks().forEach((track) => {
+      console.log("Track:", track.label, track.id);
+    });
+
     videoElement.srcObject = stream;
 
     await videoElement.play();

src/main.ts

@@ -1253,4 +1253,160 @@ describe("MediaMock", () => {
     expect(settings.width).toBeGreaterThan(0);
     expect(settings.height).toBeGreaterThan(0);
   });
+
+  // ===== STREAM LABEL TESTS =====
+
+  it("should set stream track label to match selected device label", async () => {
+    const device = getDeviceForBrowser();
+    MediaMock.mock(device);
+    await MediaMock.setMediaURL(imageUrl);
+
+    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+    expect(stream).toBeDefined();
+    expect(stream.getVideoTracks().length).toBeGreaterThan(0);
+
+    const videoTrack = stream.getVideoTracks()[0];
+
+    // Get the expected label from the device's first videoinput device
+    const expectedLabel = device.mediaDeviceInfo.find(
+      (d) => d.kind === "videoinput",
+    )?.label;
+
+    // Stream track label should match the device label
+    expect(videoTrack.label).toBe(expectedLabel);
+  });
+
+  it("should select front camera when facingMode user constraint is specified", async () => {
+    const device = getDeviceForBrowser();
+    MediaMock.mock(device);
+    await MediaMock.setMediaURL(imageUrl);
+
+    const stream = await navigator.mediaDevices.getUserMedia({
+      video: { facingMode: "user" },
+    });
+    expect(stream).toBeDefined();
+
+    const videoTrack = stream.getVideoTracks()[0];
+
+    // Get the last front camera (user) from the device (should be the primary one)
+    const frontCameras = device.mediaDeviceInfo.filter(
+      (d) => d.kind === "videoinput" && d.getCapabilities().facingMode?.includes("user"),
+    );
+    const primaryFrontCamera = frontCameras.length > 0 ? frontCameras[frontCameras.length - 1] : undefined;
+
+    // Stream track label should match the selected front camera label
+    expect(videoTrack.label).toBe(primaryFrontCamera?.label);
+  });
+
+  it("should select back camera when facingMode environment constraint is specified", async () => {
+    const device = getDeviceForBrowser();
+    MediaMock.mock(device);
+    await MediaMock.setMediaURL(imageUrl);
+
+    const stream = await navigator.mediaDevices.getUserMedia({
+      video: { facingMode: "environment" },
+    });
+    expect(stream).toBeDefined();
+
+    const videoTrack = stream.getVideoTracks()[0];
+
+    // Get the last back camera (environment) from the device (should be the primary one)
+    const backCameras = device.mediaDeviceInfo.filter(
+      (d) => d.kind === "videoinput" && d.getCapabilities().facingMode?.includes("environment"),
+    );
+    const primaryBackCamera = backCameras.length > 0 ? backCameras[backCameras.length - 1] : undefined;
+
+    // If back camera exists, verify the label matches
+    if (primaryBackCamera) {
+      expect(videoTrack.label).toBe(primaryBackCamera.label);
+    }
+  });
+
+  it("should set stream track deviceId to match selected device", async () => {
+    const device = getDeviceForBrowser();
+    MediaMock.mock(device);
+    await MediaMock.setMediaURL(imageUrl);
+
+    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+    expect(stream).toBeDefined();
+    expect(stream.getVideoTracks().length).toBeGreaterThan(0);
+
+    const videoTrack = stream.getVideoTracks()[0];
+
+    // Get the expected deviceId from the device's first videoinput device
+    const expectedDeviceId = device.mediaDeviceInfo.find(
+      (d) => d.kind === "videoinput",
+    )?.deviceId;
+
+    // Stream track deviceId should match the device deviceId
+    expect(videoTrack.id).toBe(expectedDeviceId);
+  });
+
+  it("should set stream track deviceId based on facingMode constraint", async () => {
+    const device = getDeviceForBrowser();
+    MediaMock.mock(device);
+    await MediaMock.setMediaURL(imageUrl);
+
+    const stream = await navigator.mediaDevices.getUserMedia({
+      video: { facingMode: "user" },
+    });
+    expect(stream).toBeDefined();
+
+    const videoTrack = stream.getVideoTracks()[0];
+
+    // Get the last front camera (user) from the device (should be the primary one)
+    const frontCameras = device.mediaDeviceInfo.filter(
+      (d) => d.kind === "videoinput" && d.getCapabilities().facingMode?.includes("user"),
+    );
+    const primaryFrontCamera = frontCameras.length > 0 ? frontCameras[frontCameras.length - 1] : undefined;
+
+    // Stream track deviceId should match the selected camera's deviceId
+    expect(videoTrack.id).toBe(primaryFrontCamera?.deviceId);
+  });
+
+  it("should support facingMode as object with ideal constraint", async () => {
+    const device = getDeviceForBrowser();
+    MediaMock.mock(device);
+    await MediaMock.setMediaURL(imageUrl);
+
+    const stream = await navigator.mediaDevices.getUserMedia({
+      video: { facingMode: { ideal: "environment" } },
+    });
+    expect(stream).toBeDefined();
+
+    const videoTrack = stream.getVideoTracks()[0];
+
+    // Get the last back camera (environment) from the device
+    const backCameras = device.mediaDeviceInfo.filter(
+      (d) => d.kind === "videoinput" && d.getCapabilities().facingMode?.includes("environment"),
+    );
+    const primaryBackCamera = backCameras.length > 0 ? backCameras[backCameras.length - 1] : undefined;
+
+    // Stream track label should match the selected back camera
+    if (primaryBackCamera) {
+      expect(videoTrack.label).toBe(primaryBackCamera.label);
+    }
+  });
+
+  it("should support facingMode as object with exact constraint", async () => {
+    const device = getDeviceForBrowser();
+    MediaMock.mock(device);
+    await MediaMock.setMediaURL(imageUrl);
+
+    const stream = await navigator.mediaDevices.getUserMedia({
+      video: { facingMode: { exact: "user" } },
+    });
+    expect(stream).toBeDefined();
+
+    const videoTrack = stream.getVideoTracks()[0];
+
+    // Get the last front camera (user) from the device
+    const frontCameras = device.mediaDeviceInfo.filter(
+      (d) => d.kind === "videoinput" && d.getCapabilities().facingMode?.includes("user"),
+    );
+    const primaryFrontCamera = frontCameras.length > 0 ? frontCameras[frontCameras.length - 1] : undefined;
+
+    // Stream track label should match the selected front camera
+    expect(videoTrack.label).toBe(primaryFrontCamera?.label);
+  });
 });