@lookit/record 3.0.0 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookit/record",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Recording extensions and plugins for CHS studies.",
   "homepage": "https://github.com/lookit/lookit-jspsych#readme",
   "bugs": {

package/src/recorder.spec.ts

@@ -40,6 +40,7 @@ jest.mock("jspsych", () => ({
     pluginAPI: {
       getCameraRecorder: jest.fn().mockReturnValue({
         addEventListener: jest.fn(),
+        mimeType: "video/webm",
         start: jest.fn(),
         stop: jest.fn(),
         stream: {
@@ -356,7 +357,7 @@ test("Recorder reset", () => {
   expect(jsPsych.pluginAPI.initializeCameraRecorder).toHaveBeenCalledTimes(1);
   expect(jsPsych.pluginAPI.initializeCameraRecorder).toHaveBeenCalledWith(
     streamClone,
-    undefined,
+    { mimeType: "video/webm" },
   );
   expect(rec["blobs"]).toStrictEqual([]);
 
@@ -506,3 +507,89 @@ test("Recorder createFileName constructs video file names correctly", () => {
   // Restore Math.random
   jest.spyOn(global.Math, "random").mockRestore();
 });
+
+test("Initializing a new recorder gets the mime type from the initialization", () => {
+  const jsPsych = initJsPsych();
+  const originalInitializeCameraRecorder =
+    jsPsych.pluginAPI.initializeCameraRecorder;
+
+  const stream = {
+    active: true,
+    clone: jest.fn(),
+    getTracks: jest.fn().mockReturnValue([{ stop: jest.fn() }]),
+  } as unknown as MediaStream;
+
+  jsPsych.pluginAPI.initializeCameraRecorder = jest
+    .fn()
+    .mockImplementation(
+      (stream: MediaStream, recorder_options: MediaRecorderOptions) => {
+        return {
+          addEventListener: jest.fn(),
+          mimeType: recorder_options.mimeType,
+          start: jest.fn(),
+          stop: jest.fn(),
+          stream: stream,
+        };
+      },
+    );
+
+  jsPsych.pluginAPI.getCameraRecorder = jest.fn().mockImplementation(() => {
+    return jsPsych.pluginAPI.initializeCameraRecorder(stream, recorder_options);
+  });
+
+  // Initialize with vp9
+  let recorder_options: MediaRecorderOptions = {
+    mimeType: "video/webm;codecs=vp9,opus",
+  };
+  jsPsych.pluginAPI.initializeCameraRecorder(stream, recorder_options);
+  const rec_1 = new Recorder(jsPsych);
+  // Called twice per construction - once for stream clone and once for mime type
+  expect(jsPsych.pluginAPI.getCameraRecorder).toHaveBeenCalledTimes(2);
+  expect(rec_1["mimeType"]).toBe("video/webm;codecs=vp9,opus");
+
+  // Initialize with vp8
+  recorder_options = {
+    mimeType: "video/webm;codecs=vp8,opus",
+  };
+  jsPsych.pluginAPI.initializeCameraRecorder(stream, recorder_options);
+  const rec_2 = new Recorder(jsPsych);
+  expect(jsPsych.pluginAPI.getCameraRecorder).toHaveBeenCalledTimes(4);
+  expect(rec_2["mimeType"]).toBe("video/webm;codecs=vp8,opus");
+
+  jsPsych.pluginAPI.initializeCameraRecorder = originalInitializeCameraRecorder;
+});
+
+test("New recorder uses a default mime type if none is set already", () => {
+  const jsPsych = initJsPsych();
+  const originalInitializeCameraRecorder =
+    jsPsych.pluginAPI.initializeCameraRecorder;
+
+  const stream = {
+    active: true,
+    clone: jest.fn(),
+    getTracks: jest.fn().mockReturnValue([{ stop: jest.fn() }]),
+  } as unknown as MediaStream;
+
+  jsPsych.pluginAPI.initializeCameraRecorder = jest
+    .fn()
+    .mockImplementation((stream: MediaStream) => {
+      return {
+        addEventListener: jest.fn(),
+        start: jest.fn(),
+        stop: jest.fn(),
+        stream: stream,
+      };
+    });
+
+  jsPsych.pluginAPI.getCameraRecorder = jest.fn().mockImplementation(() => {
+    return jsPsych.pluginAPI.initializeCameraRecorder(stream);
+  });
+
+  jsPsych.pluginAPI.initializeCameraRecorder(stream);
+  const rec = new Recorder(jsPsych);
+  // Called twice per construction - once for stream clone and once for mime type
+  expect(jsPsych.pluginAPI.getCameraRecorder).toHaveBeenCalledTimes(2);
+  expect(rec["mimeType"]).toBe("video/webm");
+
+  jsPsych.pluginAPI.initializeCameraRecorder = originalInitializeCameraRecorder;
+});

package/src/recorder.ts

@@ -34,6 +34,7 @@ export default class Recorder {
   private filename?: string;
   private stopPromise?: Promise<void>;
   private webcam_element_id = "lookit-jspsych-webcam";
+  private mimeType = "video/webm";
 
   private streamClone: MediaStream;
 
@@ -45,6 +46,8 @@ export default class Recorder {
   public constructor(private jsPsych: JsPsych) {
     this.streamClone = this.stream.clone();
     autoBind(this);
+    // Use the class instance's mimeType default as a fallback if we can't get the mime type from the initialized jsPsych recorder.
+    this.mimeType = this.recorder?.mimeType || this.mimeType;
   }
 
   /**
@@ -99,7 +102,11 @@ export default class Recorder {
    * @param opts - Media recorder options to use when setting up the recorder.
    */
   public initializeRecorder(stream: MediaStream, opts?: MediaRecorderOptions) {
-    this.jsPsych.pluginAPI.initializeCameraRecorder(stream, opts);
+    const recorder_options: MediaRecorderOptions = {
+      ...opts,
+      mimeType: this.mimeType,
+    };
+    this.jsPsych.pluginAPI.initializeCameraRecorder(stream, recorder_options);
   }
 
   /** Reset the recorder to be used again. */

package/src/videoConfig.spec.ts

@@ -132,6 +132,30 @@ beforeEach(() => {
     cameras: [devicesObj.cam1, devicesObj.cam2],
     mics: [devicesObj.mic1, devicesObj.mic2],
   };
+
+  // Global MediaRecorder.isTypeSupported
+  Object.defineProperty(global, "MediaRecorder", {
+    writable: true,
+    value: jest.fn().mockImplementation(() => ({
+      start: jest.fn(),
+      ondataavailable: jest.fn(),
+      onerror: jest.fn(),
+      state: "",
+      stop: jest.fn(),
+      pause: jest.fn(),
+      resume: jest.fn(),
+    })),
+  });
+
+  Object.defineProperty(MediaRecorder, "isTypeSupported", {
+    writable: true,
+    /**
+     * Placeholder for value
+     *
+     * @returns True
+     */
+    value: () => true,
+  });
 });
 
 afterEach(() => {
@@ -1096,3 +1120,94 @@ test("Video config onMicActivityLevel", () => {
   expect(video_config["micChecked"]).toBe(true);
   expect(event_pass.resolve).toHaveBeenCalled();
 });
+
+test("Video config initializeAndCreateRecorder uses supported mime type", () => {
+  const getCompatibleMimeTypeSpy = jest.spyOn(
+    video_config,
+    "getCompatibleMimeType",
+  );
+
+  // getCameraRecorder is just a convenient way of grabbing the mock stream.
+  video_config["initializeAndCreateRecorder"](
+    jsPsych.pluginAPI.getCameraRecorder().stream,
+  );
+
+  expect(getCompatibleMimeTypeSpy).toHaveBeenCalled();
+  // isTypeSupported is already mocked to return true, so this should use the first mime type value in the list
+  expect(jsPsych.pluginAPI.initializeCameraRecorder).toHaveBeenCalledWith(
+    jsPsych.pluginAPI.getCameraRecorder().stream,
+    { mimeType: "video/webm;codecs=vp9,opus" },
+  );
+});
+
+test("Video config initializeAndCreateRecorder uses default if no mime types are supported", () => {
+  const getCompatibleMimeTypeSpy = jest.spyOn(
+    video_config,
+    "getCompatibleMimeType",
+  );
+
+  // Override the isTypeSupported mock that is set in beforeEach
+  // No type is supported
+  jest.spyOn(MediaRecorder, "isTypeSupported").mockImplementation(() => {
+    return false;
+  });
+  expect(MediaRecorder.isTypeSupported("video/webm;codecs=vp9,opus")).toBe(
+    false,
+  );
+
+  // getCameraRecorder is just a convenient way of grabbing the mock stream.
+  video_config["initializeAndCreateRecorder"](
+    jsPsych.pluginAPI.getCameraRecorder().stream,
+  );
+
+  expect(getCompatibleMimeTypeSpy).toHaveBeenCalled();
+  // If there are no compatible mime types, then it should use the default "video/webm" for initialization.
+  expect(jsPsych.pluginAPI.initializeCameraRecorder).toHaveBeenCalledWith(
+    jsPsych.pluginAPI.getCameraRecorder().stream,
+    { mimeType: "video/webm" },
+  );
+});
+
+test("Video config getCompatibleMimeType gets correct mime type or null", () => {
+  // Note - don't use 'mockImplementationOnce' for the isTypeSupported mock because isTypeSupported can be called multiple times by getCompatibleMimeType.
+
+  // Override the isTypeSupported mock that is set in beforeEach
+  // 1. only supports vp9,opus
+  const isTypeSupportedSpy = jest
+    .spyOn(MediaRecorder, "isTypeSupported")
+    .mockImplementation((type) => {
+      if (type == "video/webm;codecs=vp9,opus") {
+        return true;
+      } else {
+        return false;
+      }
+    });
+  const mime_type_1 = video_config["getCompatibleMimeType"]();
+  expect(mime_type_1).toBe("video/webm;codecs=vp9,opus");
+
+  // 2. only supports vp8,opus
+  isTypeSupportedSpy.mockImplementation((type) => {
+    if (type == "video/webm;codecs=vp8,opus") {
+      return true;
+    } else {
+      return false;
+    }
+  });
+  const mime_type_2 = video_config["getCompatibleMimeType"]();
+  expect(mime_type_2).toBe("video/webm;codecs=vp8,opus");
+
+  // 3. supports vp9,opus and vp8,opus, should use the former
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isTypeSupportedSpy.mockImplementation((type) => {
+    return true;
+  });
+  const mime_type_3 = video_config["getCompatibleMimeType"]();
+  expect(mime_type_3).toBe("video/webm;codecs=vp9,opus");
+
+  // 4. none supported, should return null
+  isTypeSupportedSpy.mockImplementation(() => {
+    return false;
+  });
+  const mime_type_4 = video_config["getCompatibleMimeType"]();
+  expect(mime_type_4).toBeNull();
+});

package/src/videoConfig.ts

@@ -99,6 +99,7 @@ export default class VideoConfigPlugin implements JsPsychPlugin<Info> {
   private minVolume: number = 0.1;
   private micChecked: boolean = false;
   private processorNode: AudioWorkletNode | null = null;
+  private mimeType = "video/webm";
 
   /**
    * Constructor for video config plugin.
@@ -404,12 +405,20 @@ export default class VideoConfigPlugin implements JsPsychPlugin<Info> {
    * @param stream - Media stream returned from getUserMedia that should be used
    *   to set up the jsPsych recorder.
    * @param opts - Media recorder options to use when setting up the recorder.
+   *   This will include the mimeType property that is set via getMimeTypeCodec,
+   *   as well as any other options that can passed via the calling context.
    */
   public initializeAndCreateRecorder = (
     stream: MediaStream,
     opts?: MediaRecorderOptions,
   ) => {
-    this.jsPsych.pluginAPI.initializeCameraRecorder(stream, opts);
+    // If no mime types from the list are supported (getCompatibleMimeType returns null) then use the default.
+    this.mimeType = this.getCompatibleMimeType() || this.mimeType;
+    const recorder_options: MediaRecorderOptions = {
+      ...opts,
+      mimeType: this.mimeType,
+    };
+    this.jsPsych.pluginAPI.initializeCameraRecorder(stream, recorder_options);
     this.recorder = new Recorder(this.jsPsych);
   };
 
@@ -660,4 +669,32 @@ export default class VideoConfigPlugin implements JsPsychPlugin<Info> {
       next_button_el.classList.remove(`${html_params.step_complete_class}`);
     }
   };
+
+  /**
+   * Check support for recording containers/codecs, in order of preference, and
+   * get the first supported type. The first supported type found in the
+   * mime_types array is returned and will be passed to the "mimeType" property
+   * in the recorder options object that is passed to the recorder
+   * initialization function (jsPsych.pluginAPI.initializeCameraRecorder). If
+   * none of these types is supported, the function returns null.
+   *
+   * Note: we will likely need to continuously update the mime_types list as new
+   * formats become supported, we support other browsers/versions, etc.
+   *
+   * @returns Mime type string, or null (if none from the array are supported).
+   */
+  private getCompatibleMimeType() {
+    const mime_types = [
+      "video/webm;codecs=vp9,opus",
+      "video/webm;codecs=vp8,opus",
+    ];
+    let mime_type_index = 0;
+    while (mime_type_index < mime_types.length) {
+      if (MediaRecorder.isTypeSupported(mime_types[mime_type_index])) {
+        return mime_types[mime_type_index];
+      }
+      mime_type_index++;
+    }
+    return null;
+  }
 }