@lookit/record 3.0.0 → 3.0.1

package/dist/index.d.ts

@@ -553,6 +553,7 @@ declare class VideoConfigPlugin implements JsPsychPlugin<Info> {
     private minVolume;
     private micChecked;
     private processorNode;
+    private mimeType;
     /**
      * Constructor for video config plugin.
      *
@@ -663,6 +664,8 @@ declare 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.
      */
     initializeAndCreateRecorder: (stream: MediaStream, opts?: MediaRecorderOptions) => void;
     /**
@@ -753,6 +756,20 @@ declare class VideoConfigPlugin implements JsPsychPlugin<Info> {
      *   button.
      */
     private enableNext;
+    /**
+     * 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;
 }
 
 declare const _default: {

package/dist/index.js

@@ -6,7 +6,7 @@ import Handlebars from 'handlebars';
 
 var _package = {
   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: {
@@ -175,8 +175,10 @@ class Recorder {
     this.blobs = [];
     this.localDownload = "false"?.toLowerCase() === "true";
     this.webcam_element_id = "lookit-jspsych-webcam";
+    this.mimeType = "video/webm";
     this.streamClone = this.stream.clone();
     autoBind(this);
+    this.mimeType = this.recorder?.mimeType || this.mimeType;
   }
   get recorder() {
     return this.jsPsych.pluginAPI.getCameraRecorder() || this.jsPsych.pluginAPI.getMicrophoneRecorder();
@@ -194,7 +196,11 @@ class Recorder {
     this._s3 = value;
   }
   initializeRecorder(stream, opts) {
-    this.jsPsych.pluginAPI.initializeCameraRecorder(stream, opts);
+    const recorder_options = {
+      ...opts,
+      mimeType: this.mimeType
+    };
+    this.jsPsych.pluginAPI.initializeCameraRecorder(stream, recorder_options);
   }
   reset() {
     if (this.stream.active) {
@@ -638,6 +644,7 @@ class VideoConfigPlugin {
     this.minVolume = 0.1;
     this.micChecked = false;
     this.processorNode = null;
+    this.mimeType = "video/webm";
     this.addHtmlContent = (trial) => {
       this.display_el.innerHTML = chsTemplates.videoConfig(trial, html_params);
     };
@@ -780,7 +787,12 @@ class VideoConfigPlugin {
       return { cameras: unique_cameras, mics: unique_mics };
     };
     this.initializeAndCreateRecorder = (stream, opts) => {
-      this.jsPsych.pluginAPI.initializeCameraRecorder(stream, opts);
+      this.mimeType = this.getCompatibleMimeType() || this.mimeType;
+      const recorder_options = {
+        ...opts,
+        mimeType: this.mimeType
+      };
+      this.jsPsych.pluginAPI.initializeCameraRecorder(stream, recorder_options);
       this.recorder = new Recorder(this.jsPsych);
     };
     this.checkMic = async (minVol = this.minVolume) => {
@@ -933,6 +945,20 @@ class VideoConfigPlugin {
       };
     });
   }
+  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;
+  }
 }
 VideoConfigPlugin.info = info;