@lookit/record 3.0.0 → 4.0.0

package/dist/index.d.ts

@@ -272,6 +272,11 @@ declare class VideoConsentPlugin implements JsPsychPlugin<Info$3> {
     };
     private readonly recorder;
     private readonly video_container_id;
+    private readonly msg_container_id;
+    private uploadingMsg;
+    private startingMsg;
+    private recordingMsg;
+    private notRecordingMsg;
     /**
      * Instantiate video consent plugin.
      *
@@ -305,13 +310,30 @@ declare class VideoConsentPlugin implements JsPsychPlugin<Info$3> {
      */
     private playbackFeed;
     /**
-     * Put back the webcam feed once the video recording has ended. This is used
-     * with the "ended" Event.
+     * Get message container that appears alongside the video element.
+     *
+     * @param display - HTML element for experiment.
+     * @returns Message container div element.
+     */
+    private getMessageContainer;
+    /**
+     * Add HTML-formatted message alongside the video feed, e.g. for waiting
+     * periods during webcam feed transitions (starting, stopping/uploading). This
+     * will also replace an existing message with the new one. To clear any
+     * existing messages, pass an empty string.
+     *
+     * @param display - HTML element for experiment.
+     * @param message - HTML content for message div.
+     */
+    private addMessage;
+    /**
+     * Put back the webcam feed once the video recording playback has ended. This
+     * is used with the "ended" Event.
      *
      * @param display - JsPsych display HTML element.
      * @returns Event function
      */
-    private onEnded;
+    private onPlaybackEnded;
     /**
      * Retrieve button element from DOM.
      *
@@ -553,6 +575,7 @@ declare class VideoConfigPlugin implements JsPsychPlugin<Info> {
     private minVolume;
     private micChecked;
     private processorNode;
+    private mimeType;
     /**
      * Constructor for video config plugin.
      *
@@ -663,6 +686,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 +778,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: "4.0.0",
   description: "Recording extensions and plugins for CHS studies.",
   homepage: "https://github.com/lookit/lookit-jspsych#readme",
   bugs: {
@@ -48,7 +48,7 @@ var _package = {
   },
   peerDependencies: {
     "@lookit/data": "^0.2.0",
-    "@lookit/templates": "^2.0.0",
+    "@lookit/templates": "^2.1.0",
     jspsych: "^8.0.3"
   }
 };
@@ -141,21 +141,10 @@ class CreateURLError extends Error {
     this.name = "CreateURLError";
   }
 }
-class VideoContainerNotFoundError extends Error {
-  constructor() {
-    super("Video Container could not be found.");
-    this.name = "VideoContainerError";
-  }
-}
-class ButtonNotFoundError extends Error {
-  constructor(id) {
-    super(`"${id}" button not found.`);
-    this.name = "ButtonNotFoundError";
-  }
-}
-class ImageNotFoundError extends Error {
-  constructor(id) {
-    super(`"${id}" image not found.`);
+class ElementNotFoundError extends Error {
+  constructor(id, tag) {
+    super(`"${id}" ${tag} not found.`);
+    this.name = "ElementNotFoundError";
   }
 }
 
@@ -175,8 +164,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 +185,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) {
@@ -262,9 +257,9 @@ class Recorder {
     this.recorder.stop();
     this.stream.getTracks().map((t) => t.stop());
   }
-  stop() {
+  stop(maintain_container_size = false) {
+    this.clearWebcamFeed(maintain_container_size);
     this.stopTracks();
-    this.clearWebcamFeed();
     if (!this.stopPromise) {
       throw new NoStopPromiseError();
     }
@@ -309,11 +304,20 @@ class Recorder {
       link.click();
     }
   }
-  clearWebcamFeed() {
+  clearWebcamFeed(maintain_container_size) {
     const webcam_feed_element = document.querySelector(
       `#${this.webcam_element_id}`
     );
     if (webcam_feed_element) {
+      if (maintain_container_size) {
+        const parent_div = webcam_feed_element.parentElement;
+        if (parent_div) {
+          const width = webcam_feed_element.offsetWidth;
+          const height = webcam_feed_element.offsetHeight;
+          parent_div.style.height = `${height}px`;
+          parent_div.style.width = `${width}px`;
+        }
+      }
       webcam_feed_element.remove();
     }
   }
@@ -383,6 +387,11 @@ const _VideoConsentPlugin = class {
   constructor(jsPsych) {
     this.jsPsych = jsPsych;
     this.video_container_id = "lookit-jspsych-video-container";
+    this.msg_container_id = "lookit-jspsych-video-msg-container";
+    this.uploadingMsg = null;
+    this.startingMsg = null;
+    this.recordingMsg = null;
+    this.notRecordingMsg = null;
     this.jsPsych = jsPsych;
     this.recorder = new Recorder(this.jsPsych);
   }
@@ -394,13 +403,25 @@ const _VideoConsentPlugin = class {
     this.stopButton(display);
     this.playButton(display);
     this.nextButton(display);
+    this.uploadingMsg = chsTemplates.translateString(
+      "exp-lookit-video-consent.Stopping-and-uploading"
+    );
+    this.startingMsg = chsTemplates.translateString(
+      "exp-lookit-video-consent.Starting-recorder"
+    );
+    this.recordingMsg = chsTemplates.translateString(
+      "exp-lookit-video-consent.Recording"
+    );
+    this.notRecordingMsg = chsTemplates.translateString(
+      "exp-lookit-video-consent.Not-recording"
+    );
   }
   getVideoContainer(display) {
     const videoContainer = display.querySelector(
       `div#${this.video_container_id}`
     );
     if (!videoContainer) {
-      throw new VideoContainerNotFoundError();
+      throw new ElementNotFoundError(this.video_container_id, "div");
     }
     return videoContainer;
   }
@@ -411,14 +432,31 @@ const _VideoConsentPlugin = class {
   }
   playbackFeed(display) {
     const videoContainer = this.getVideoContainer(display);
-    this.recorder.insertPlaybackFeed(videoContainer, this.onEnded(display));
+    this.recorder.insertPlaybackFeed(
+      videoContainer,
+      this.onPlaybackEnded(display)
+    );
   }
-  onEnded(display) {
+  getMessageContainer(display) {
+    const msgContainer = display.querySelector(
+      `div#${this.msg_container_id}`
+    );
+    if (!msgContainer) {
+      throw new ElementNotFoundError(this.msg_container_id, "div");
+    }
+    return msgContainer;
+  }
+  addMessage(display, message) {
+    const msgContainer = this.getMessageContainer(display);
+    msgContainer.innerHTML = message;
+  }
+  onPlaybackEnded(display) {
     return () => {
       const next = this.getButton(display, "next");
       const play = this.getButton(display, "play");
       const record = this.getButton(display, "record");
       this.recordFeed(display);
+      this.addMessage(display, this.notRecordingMsg);
       next.disabled = false;
       play.disabled = false;
       record.disabled = false;
@@ -427,14 +465,14 @@ const _VideoConsentPlugin = class {
   getButton(display, id) {
     const btn = display.querySelector(`button#${id}`);
     if (!btn) {
-      throw new ButtonNotFoundError(id);
+      throw new ElementNotFoundError(id, "button");
     }
     return btn;
   }
   getImg(display, id) {
     const img = display.querySelector(`img#${id}`);
     if (!img) {
-      throw new ImageNotFoundError(id);
+      throw new ElementNotFoundError(id, "img");
     }
     return img;
   }
@@ -444,12 +482,14 @@ const _VideoConsentPlugin = class {
     const play = this.getButton(display, "play");
     const next = this.getButton(display, "next");
     record.addEventListener("click", async () => {
+      this.addMessage(display, this.startingMsg);
       record.disabled = true;
-      stop.disabled = false;
       play.disabled = true;
       next.disabled = true;
-      this.getImg(display, "record-icon").style.visibility = "visible";
       await this.recorder.start(true, _VideoConsentPlugin.info.name);
+      this.getImg(display, "record-icon").style.visibility = "visible";
+      this.addMessage(display, this.recordingMsg);
+      stop.disabled = false;
     });
   }
   playButton(display) {
@@ -467,11 +507,14 @@ const _VideoConsentPlugin = class {
     const play = this.getButton(display, "play");
     stop.addEventListener("click", async () => {
       stop.disabled = true;
-      record.disabled = false;
-      play.disabled = false;
-      await this.recorder.stop();
+      this.addMessage(display, this.uploadingMsg);
+      await this.recorder.stop(true);
       this.recorder.reset();
       this.recordFeed(display);
+      this.getImg(display, "record-icon").style.visibility = "hidden";
+      this.addMessage(display, this.notRecordingMsg);
+      play.disabled = false;
+      record.disabled = false;
     });
   }
   nextButton(display) {
@@ -638,6 +681,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 +824,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 +982,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;