@lookit/record 3.0.0 → 4.0.0

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;
+  }
 }