@lookit/record 3.0.0 → 4.0.0

package/README.md

@@ -25,7 +25,7 @@ following language codes:
 | Portuguese     | Brazil | pt-BR |
 | Portuguese     |        | pt    |
 
-## Video Configuration
+## Video Configuration Plugin
 
 To record _any_ video during an experiment, including a consent video, you must
 add a video configuration trial. This trial allows the user to give permissions
@@ -61,51 +61,20 @@ const videoConfig = {
 };
 ```
 
-## Video Consent
+## Video Consent Plugin
 
 Users will need to record themselves accepting the consent document for your
 study. This trial will allow the user to read the consent document and record a
 video accepting it.
 
-To create the video consent trial.
+!!! caution "Don't forget a video config trial!"
 
-```javascript
-const videoConsent = { type: chsRecord.VideoConsentPlugin, ...parameters };
-```
+    You MUST have a video config trial in your experiment timeline before the video consent trial.
 
-### Example
+To create the video consent trial:
 
 ```javascript
-const videoConsent = {
-  type: chsRecord.VideoConsentPlugin,
-  PIName: "Jane Smith",
-  institution: "Science University",
-  PIContact: "Jane Smith at 123 456 7890",
-  purpose:
-    "Why do babies love cats? This study will help us find out whether babies love cats because of their soft fur or their twitchy tails.",
-  procedures:
-    "Your child will be shown pictures of lots of different cats, along with noises that cats make like meowing and purring. We are interested in which pictures and sounds make your child smile. We will ask you (the parent) to turn around to avoid influencing your child's responses.",
-  risk_statement:
-    "There are no expected risks if you participate in the study. (This is optional, but should typically be included. If you leave it out there's no 'risks' section and you should include risk information elsewhere.)",
-  voluntary_participation:
-    "There are two sessions in this study; you will be invited to complete another session next month. It is okay not to do both sessions! (This is optional; leave it out if you don't need to say anything besides participation in this session being voluntary.)",
-  payment:
-    "After you finish the study, we will email you a $5 BabyStore gift card within approximately three days. To be eligible for the gift card your child must be in the age range for this study, you need to submit a valid consent statement, and we need to see that there is a child with you. But we will send a gift card even if you do not finish the whole study or we are not able to use your child's data! There are no other direct benefits to you or your child from participating, but we hope you will enjoy the experience.",
-  datause:
-    "We are primarily interested in your child's emotional reactions to the images and sounds. A research assistant will watch your video to measure the precise amount of delight in your child's face as he or she sees each cat picture.",
-  include_databrary: true,
-  additional_video_privacy_statement:
-    "We will also ask your permission to use your videos as stimuli for other parents. (This is optional; leave it out if there aren't additional ways you'll share video beyond as described in the participant's video privacy level and Databrary selections.)",
-  gdpr: false,
-  research_rights_statement:
-    "You are not waiving any legal claims, rights or remedies because of your participation in this research study.  If you feel you have been treated unfairly, or you have questions regarding your rights as a research subject, you may contact the [IRB NAME], [INSTITUTION], [ADDRESS/CONTACT]",
-  additional_segments: [
-    {
-      title: "US Patriot Act Disclosure",
-      text: "[EXAMPLE ONLY, PLEASE REMOVE ADDITIONAL_SEGMENTS UNLESS YOU NEED THEM.] Lookit is a U.S. organization and all information gathered from the website is stored on servers based in the U.S. Therefore, your video recordings are subject to U.S. laws, such as the US Patriot Act. This act allows authorities access to the records of internet service providers. If you choose to participate in this study, you understand that your video recording will be stored and accessed in the USA. The security and privacy policy for Lookit can be found at the following link: <a href='https://lookit.mit.edu/privacy/' target='_blank' rel='noopener'>https://lookit.mit.edu/privacy/</a>.",
-    },
-  ],
-};
+const videoConsent = { type: chsRecord.VideoConsentPlugin, ...parameters };
 ```
 
 ### Parameters
@@ -328,7 +297,68 @@ Replace the default spoken consent statement with your custom text.
 Whether to omit the phrase “or in the very unlikely event of a research-related
 injury” from the contact section. (This was required by the Northwestern IRB.)
 
-## Trial Recording
+### Example
+
+```javascript
+const videoConsent = {
+  type: chsRecord.VideoConsentPlugin,
+  PIName: "Jane Smith",
+  institution: "Science University",
+  PIContact: "Jane Smith at 123 456 7890",
+  purpose:
+    "Why do babies love cats? This study will help us find out whether babies love cats because of their soft fur or their twitchy tails.",
+  procedures:
+    "Your child will be shown pictures of lots of different cats, along with noises that cats make like meowing and purring. We are interested in which pictures and sounds make your child smile. We will ask you (the parent) to turn around to avoid influencing your child's responses.",
+  risk_statement:
+    "There are no expected risks if you participate in the study. (This is optional, but should typically be included. If you leave it out there's no 'risks' section and you should include risk information elsewhere.)",
+  voluntary_participation:
+    "There are two sessions in this study; you will be invited to complete another session next month. It is okay not to do both sessions! (This is optional; leave it out if you don't need to say anything besides participation in this session being voluntary.)",
+  payment:
+    "After you finish the study, we will email you a $5 BabyStore gift card within approximately three days. To be eligible for the gift card your child must be in the age range for this study, you need to submit a valid consent statement, and we need to see that there is a child with you. But we will send a gift card even if you do not finish the whole study or we are not able to use your child's data! There are no other direct benefits to you or your child from participating, but we hope you will enjoy the experience.",
+  datause:
+    "We are primarily interested in your child's emotional reactions to the images and sounds. A research assistant will watch your video to measure the precise amount of delight in your child's face as he or she sees each cat picture.",
+  include_databrary: true,
+  additional_video_privacy_statement:
+    "We will also ask your permission to use your videos as stimuli for other parents. (This is optional; leave it out if there aren't additional ways you'll share video beyond as described in the participant's video privacy level and Databrary selections.)",
+  gdpr: false,
+  research_rights_statement:
+    "You are not waiving any legal claims, rights or remedies because of your participation in this research study.  If you feel you have been treated unfairly, or you have questions regarding your rights as a research subject, you may contact the [IRB NAME], [INSTITUTION], [ADDRESS/CONTACT]",
+  additional_segments: [
+    {
+      title: "US Patriot Act Disclosure",
+      text: "[EXAMPLE ONLY, PLEASE REMOVE ADDITIONAL_SEGMENTS UNLESS YOU NEED THEM.] Lookit is a U.S. organization and all information gathered from the website is stored on servers based in the U.S. Therefore, your video recordings are subject to U.S. laws, such as the US Patriot Act. This act allows authorities access to the records of internet service providers. If you choose to participate in this study, you understand that your video recording will be stored and accessed in the USA. The security and privacy policy for Lookit can be found at the following link: <a href='https://lookit.mit.edu/privacy/' target='_blank' rel='noopener'>https://lookit.mit.edu/privacy/</a>.",
+    },
+  ],
+};
+```
+
+## Trial Recording Extension
+
+Trial recording can be added to most jsPsych trials. This is a jsPsych extension
+that allows you to add video recording to the trial. The trial will start once
+the video recording has been set up, and the video recording will finish as soon
+as the trial has ended.
+
+!!! important "When to use trial recording"
+
+    Trial recording should NOT occur simultaneously with session recording, or with any plugins that already use the webcam (e.g. video config, video consent).
+
+To use the CHS trial recording extension, you need to:
+
+1. Add it to the experiment settings, which is an optional object passed to
+   `initjsPsych`.
+2. Add it to the `extensions` parameter for any trial(s) that you want to be
+   recorded.
+
+!!! caution "Don't forget a video config trial!"
+
+    You MUST have a video config trial in your experiment timeline before doing any trial recording.
+
+### Parameters
+
+This extension does not accept any parameters.
+
+### Example
 
 To record a single trial, you will have to first load the extension in
 `initJsPsych`.
@@ -362,7 +392,48 @@ You might prefer to record across multiple trials in a study session. This can
 be done by using trials created with the start and stop recording plugins. This
 gives a bit of flexibility over which of the study trials are recorded.
 
-To record a study session, create the start and stop recording trials.
+!!! important "When to use session recording"
+
+    Sesssion recording should NOT occur simultaneously with trial recording, or with any plugins that already use the webcam (e.g. video config, video consent).
+
+To record a set of trials, add a 'start' trial in your jsPsych experiment
+timeline right before you'd like to start recording, and add a 'stop' trial at
+the point in your timeline when you'd like to stop recording.
+
+!!! caution "Don't forget a video config trial!"
+
+    You MUST have a video config trial in your experiment timeline before doing any session recording.
+
+### Start Recording Plugin
+
+The plugin to start session recording is called `chsRecord.StartRecordPlugin`.
+
+```javascript
+const startRec = { type: chsRecord.StartRecordPlugin };
+```
+
+#### Parameters
+
+This plugin does not accept any parameters, other those available in all
+plugins.
+
+### Stop Recording Plugin
+
+The plugin to stop session recording is called `chsRecord.StopRecordPlugin`.
+
+```javascript
+const stopRec = { type: chsRecord.StopRecordPlugin };
+```
+
+#### Parameters
+
+This plugin does not accept any parameters, other those available in all
+plugins.
+
+### Example
+
+First, make sure that you've added a video config trial to your experiment
+timeline. Then, create your start and stop recording trials:
 
 ```javascript
 const startRec = { type: chsRecord.StartRecordPlugin };
@@ -390,3 +461,18 @@ stop or start recording trials within the timeline.
 ```javascript
 jsPsych.run([videoConfig, startRec, morning, evening, stopRec, night]);
 ```
+
+You can also create more than one session recording:
+
+```javascript
+jsPsych.run([
+  videoConfig,
+  startRec,
+  morning,
+  stopRec,
+  evening,
+  startRec,
+  night,
+  stopRec,
+]);
+```

package/dist/index.browser.js

@@ -32,7 +32,7 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 
 	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: {
@@ -74,7 +74,7 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	  },
 	  peerDependencies: {
 	    "@lookit/data": "^0.2.0",
-	    "@lookit/templates": "^2.0.0",
+	    "@lookit/templates": "^2.1.0",
 	    jspsych: "^8.0.3"
 	  }
 	};
@@ -167,21 +167,10 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	    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";
 	  }
 	}
 
@@ -8481,6 +8470,7 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	    this.jsPsych = jsPsych;
 	    this.streamClone = this.stream.clone();
 	    autoBind(this);
+	    this.mimeType = this.recorder?.mimeType || this.mimeType;
 	  }
 	  url;
 	  _s3;
@@ -8489,6 +8479,7 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	  filename;
 	  stopPromise;
 	  webcam_element_id = "lookit-jspsych-webcam";
+	  mimeType = "video/webm";
 	  streamClone;
 	  get recorder() {
 	    return this.jsPsych.pluginAPI.getCameraRecorder() || this.jsPsych.pluginAPI.getMicrophoneRecorder();
@@ -8506,7 +8497,11 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	    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) {
@@ -8574,9 +8569,9 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	    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();
 	    }
@@ -8621,11 +8616,20 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	      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();
 	    }
 	  }
@@ -8700,6 +8704,11 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	  static info = info$3;
 	  recorder;
 	  video_container_id = "lookit-jspsych-video-container";
+	  msg_container_id = "lookit-jspsych-video-msg-container";
+	  uploadingMsg = null;
+	  startingMsg = null;
+	  recordingMsg = null;
+	  notRecordingMsg = null;
 	  trial(display, trial) {
 	    const consentVideo = chsTemplates.consentVideo(trial);
 	    display.insertAdjacentHTML("afterbegin", consentVideo);
@@ -8708,13 +8717,25 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	    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;
 	  }
@@ -8725,14 +8746,31 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	  }
 	  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;
@@ -8741,14 +8779,14 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	  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;
 	  }
@@ -8758,12 +8796,14 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	    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) {
@@ -8781,11 +8821,14 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	    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) {
@@ -8955,6 +8998,7 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	  minVolume = 0.1;
 	  micChecked = false;
 	  processorNode = null;
+	  mimeType = "video/webm";
 	  trial(display_element, trial) {
 	    this.display_el = display_element;
 	    navigator.mediaDevices.ondevicechange = this.onDeviceChange;
@@ -9109,7 +9153,12 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	    return { cameras: unique_cameras, mics: unique_mics };
 	  };
 	  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);
 	  };
 	  checkMic = async (minVol = this.minVolume) => {
@@ -9249,6 +9298,20 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	      next_button_el.classList.remove(`${html_params.step_complete_class}`);
 	    }
 	  };
+	  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;
+	  }
 	}
 
 	var index = {
@@ -9262,4 +9325,4 @@ var chsRecord = (function (Data, chsTemplates, jspsych) {
 	return index;
 
 })(chsData, chsTemplates, jsPsychModule);
-//# sourceMappingURL=https://unpkg.com/@lookit/record@3.0.0/dist/index.browser.js.map
+//# sourceMappingURL=https://unpkg.com/@lookit/record@4.0.0/dist/index.browser.js.map