@lookit/record 3.0.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "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": {
@@ -42,7 +42,7 @@
   },
   "peerDependencies": {
     "@lookit/data": "^0.2.0",
-    "@lookit/templates": "^2.0.0",
+    "@lookit/templates": "^2.1.0",
     "jspsych": "^8.0.3"
   }
 }

package/src/consentVideo.spec.ts

@@ -6,11 +6,7 @@ import { initJsPsych, PluginInfo, TrialType } from "jspsych";
 import playbackFeed from "../hbs/playback-feed.hbs";
 import recordFeed from "../hbs/record-feed.hbs";
 import { VideoConsentPlugin } from "./consentVideo";
-import {
-  ButtonNotFoundError,
-  ImageNotFoundError,
-  VideoContainerNotFoundError,
-} from "./errors";
+import { ElementNotFoundError } from "./errors";
 import Recorder from "./recorder";
 
 declare const window: LookitWindow;
@@ -67,7 +63,21 @@ test("GetVideoContainer error when no container", () => {
   const plugin = new VideoConsentPlugin(jsPsych);
   expect(() =>
     plugin["getVideoContainer"](document.createElement("div")),
-  ).toThrow(VideoContainerNotFoundError);
+  ).toThrow(ElementNotFoundError);
+  expect(() =>
+    plugin["getVideoContainer"](document.createElement("div")),
+  ).toThrow(`"${plugin["video_container_id"]}" div not found.`);
+});
+
+test("getMessageContainer error when no container", () => {
+  const jsPsych = initJsPsych();
+  const plugin = new VideoConsentPlugin(jsPsych);
+  expect(() =>
+    plugin["getMessageContainer"](document.createElement("div")),
+  ).toThrow(ElementNotFoundError);
+  expect(() =>
+    plugin["getMessageContainer"](document.createElement("div")),
+  ).toThrow(`"${plugin["msg_container_id"]}" div not found.`);
 });
 
 test("GetVideoContainer", () => {
@@ -81,6 +91,17 @@ test("GetVideoContainer", () => {
   expect(html).toBe(`<div id="lookit-jspsych-video-container"></div>`);
 });
 
+test("getMessageContainer", () => {
+  const jsPsych = initJsPsych();
+  const plugin = new VideoConsentPlugin(jsPsych);
+  const display = document.createElement("div");
+
+  display.innerHTML = `<div id="${plugin["msg_container_id"]}"></div>`;
+
+  const html = plugin["getMessageContainer"](display).outerHTML;
+  expect(html).toBe(`<div id="lookit-jspsych-video-msg-container"></div>`);
+});
+
 test("recordFeed", () => {
   const jsPsych = initJsPsych();
   const plugin = new VideoConsentPlugin(jsPsych);
@@ -103,7 +124,7 @@ test("playbackFeed", () => {
   const vidContainer = "some video container";
 
   plugin["getVideoContainer"] = jest.fn().mockReturnValue(vidContainer);
-  plugin["onEnded"] = jest.fn().mockReturnValue("some func");
+  plugin["onPlaybackEnded"] = jest.fn().mockReturnValue("some func");
   plugin["playbackFeed"](display);
 
   expect(Recorder.prototype.insertPlaybackFeed).toHaveBeenCalledWith(
@@ -112,7 +133,7 @@ test("playbackFeed", () => {
   );
 });
 
-test("onEnded", () => {
+test("onPlaybackEnded", () => {
   const jsPsych = initJsPsych();
   const plugin = new VideoConsentPlugin(jsPsych);
   const display = document.createElement("div");
@@ -145,7 +166,7 @@ test("onEnded", () => {
     return "";
   });
 
-  plugin["onEnded"](display)();
+  plugin["onPlaybackEnded"](display)();
 
   expect(plugin["recordFeed"]).toHaveBeenCalledWith(display);
   expect(plugin["recordFeed"]).toHaveBeenCalledTimes(1);
@@ -174,7 +195,10 @@ test("getButton error when button not found", () => {
   const display = document.createElement("div");
 
   expect(() => plugin["getButton"](display, "next")).toThrow(
-    ButtonNotFoundError,
+    ElementNotFoundError,
+  );
+  expect(() => plugin["getButton"](display, "next")).toThrow(
+    `"next" button not found.`,
   );
 });
 
@@ -183,7 +207,10 @@ test("getImg error when image not found", () => {
   const plugin = new VideoConsentPlugin(jsPsych);
   const display = document.createElement("div");
   expect(() => plugin["getImg"](display, "record-icon")).toThrow(
-    ImageNotFoundError,
+    ElementNotFoundError,
+  );
+  expect(() => plugin["getImg"](display, "record-icon")).toThrow(
+    `"record-icon" img not found.`,
   );
 });
 

package/src/consentVideo.ts

@@ -3,11 +3,7 @@ import { LookitWindow } from "@lookit/data/dist/types";
 import chsTemplates from "@lookit/templates";
 import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
 import { version } from "../package.json";
-import {
-  ButtonNotFoundError,
-  ImageNotFoundError,
-  VideoContainerNotFoundError,
-} from "./errors";
+import { ElementNotFoundError } from "./errors";
 import Recorder from "./recorder";
 
 declare const window: LookitWindow;
@@ -71,6 +67,11 @@ export class VideoConsentPlugin implements JsPsychPlugin<Info> {
   public static readonly info = info;
   private readonly recorder: Recorder;
   private readonly video_container_id = "lookit-jspsych-video-container";
+  private readonly msg_container_id = "lookit-jspsych-video-msg-container";
+  private uploadingMsg: string | null = null;
+  private startingMsg: string | null = null;
+  private recordingMsg: string | null = null;
+  private notRecordingMsg: string | null = null;
 
   /**
    * Instantiate video consent plugin.
@@ -89,7 +90,7 @@ export class VideoConsentPlugin implements JsPsychPlugin<Info> {
    * @param trial - Trial data including user supplied parameters.
    */
   public trial(display: HTMLElement, trial: TrialType<Info>) {
-    // Get trial HTML string
+    // Get trial HTML string from templates package. This will also set the i18n locale.
     const consentVideo = chsTemplates.consentVideo(trial);
 
     // Add rendered document to display HTML
@@ -97,11 +98,26 @@ export class VideoConsentPlugin implements JsPsychPlugin<Info> {
 
     // Video recording HTML
     this.recordFeed(display);
+    // Set event listeners for buttons.
     this.recordButton(display);
     this.stopButton(display);
     this.playButton(display);
     this.nextButton(display);
+    // Translate and store any messages that may need to be shown. Locale has already been set via the chsTemplates consentVideo method.
+    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",
+    );
   }
+
   /**
    * Retrieve video container element.
    *
@@ -114,7 +130,7 @@ export class VideoConsentPlugin implements JsPsychPlugin<Info> {
     );
 
     if (!videoContainer) {
-      throw new VideoContainerNotFoundError();
+      throw new ElementNotFoundError(this.video_container_id, "div");
     }
 
     return videoContainer;
@@ -138,23 +154,59 @@ export class VideoConsentPlugin implements JsPsychPlugin<Info> {
    */
   private playbackFeed(display: HTMLElement) {
     const videoContainer = this.getVideoContainer(display);
-    this.recorder.insertPlaybackFeed(videoContainer, this.onEnded(display));
+    this.recorder.insertPlaybackFeed(
+      videoContainer,
+      this.onPlaybackEnded(display),
+    );
+  }
+
+  /**
+   * Get message container that appears alongside the video element.
+   *
+   * @param display - HTML element for experiment.
+   * @returns Message container div element.
+   */
+  private getMessageContainer(display: HTMLElement) {
+    const msgContainer = display.querySelector<HTMLDivElement>(
+      `div#${this.msg_container_id}`,
+    );
+
+    if (!msgContainer) {
+      throw new ElementNotFoundError(this.msg_container_id, "div");
+    }
+
+    return msgContainer;
+  }
+
+  /**
+   * 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(display: HTMLElement, message: string) {
+    const msgContainer = this.getMessageContainer(display);
+    msgContainer.innerHTML = message;
   }
 
   /**
-   * Put back the webcam feed once the video recording has ended. This is used
-   * with the "ended" Event.
+   * 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(display: HTMLElement) {
+  private onPlaybackEnded(display: HTMLElement) {
     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;
@@ -174,7 +226,7 @@ export class VideoConsentPlugin implements JsPsychPlugin<Info> {
   ) {
     const btn = display.querySelector<HTMLButtonElement>(`button#${id}`);
     if (!btn) {
-      throw new ButtonNotFoundError(id);
+      throw new ElementNotFoundError(id, "button");
     }
     return btn;
   }
@@ -190,7 +242,7 @@ export class VideoConsentPlugin implements JsPsychPlugin<Info> {
     const img = display.querySelector<HTMLImageElement>(`img#${id}`);
 
     if (!img) {
-      throw new ImageNotFoundError(id);
+      throw new ElementNotFoundError(id, "img");
     }
 
     return img;
@@ -208,12 +260,14 @@ export class VideoConsentPlugin implements JsPsychPlugin<Info> {
     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;
     });
   }
 
@@ -245,11 +299,14 @@ export class VideoConsentPlugin implements JsPsychPlugin<Info> {
 
     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;
     });
   }
   /**

package/src/errors.ts

@@ -196,36 +196,16 @@ export class CreateURLError extends Error {
   }
 }
 
-/** Error thrown when video container couldn't be found. */
-export class VideoContainerNotFoundError extends Error {
-  /** No video container found. */
-  public constructor() {
-    super("Video Container could not be found.");
-    this.name = "VideoContainerError";
-  }
-}
-
-/** Error thrown when button not found. */
-export class ButtonNotFoundError extends Error {
+/** Error thrown when an HTML element is not found. */
+export class ElementNotFoundError extends Error {
   /**
-   * Button couldn't be found by ID field.
+   * Element couldn't be found by ID field.
    *
    * @param id - HTML ID parameter.
+   * @param tag - HTML tag of the element.
    */
-  public constructor(id: string) {
-    super(`"${id}" button not found.`);
-    this.name = "ButtonNotFoundError";
-  }
-}
-
-/** Throw Error when image couldn't be found. */
-export class ImageNotFoundError extends Error {
-  /**
-   * Error when image couldn't be found by ID field.
-   *
-   * @param id - HTML ID parameter
-   */
-  public constructor(id: string) {
-    super(`"${id}" image not found.`);
+  public constructor(id: string, tag: string) {
+    super(`"${id}" ${tag} not found.`);
+    this.name = "ElementNotFoundError";
   }
 }

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: {
@@ -122,6 +123,7 @@ test("Recorder no stop promise", () => {
 
   expect(async () => await rec.stop()).rejects.toThrow(NoStopPromiseError);
 });
+
 test("Recorder initialize error", () => {
   const jsPsych = initJsPsych();
   const rec = new Recorder(jsPsych);
@@ -273,6 +275,125 @@ test("Webcam feed is removed when stream access stops", async () => {
   document.body.innerHTML = "";
 });
 
+test("Webcam feed container maintains size with recorder.stop(true)", async () => {
+  // Add webcam container to document body.
+  const webcam_container_id = "webcam-container";
+  document.body.innerHTML = `<div id="${webcam_container_id}"></div>`;
+  const webcam_div = document.getElementById(
+    webcam_container_id,
+  ) as HTMLDivElement;
+
+  const jsPsych = initJsPsych();
+  const rec = new Recorder(jsPsych);
+  const stopPromise = Promise.resolve();
+
+  rec["stopPromise"] = stopPromise;
+  rec.insertWebcamFeed(webcam_div);
+
+  // Mock the return values for the video element's offsetHeight/offsetWidth, which are used to set the container size
+  jest
+    .spyOn(document.getElementsByTagName("video")[0], "offsetWidth", "get")
+    .mockImplementation(() => 400);
+  jest
+    .spyOn(document.getElementsByTagName("video")[0], "offsetHeight", "get")
+    .mockImplementation(() => 300);
+
+  await rec.stop(true);
+
+  // Container div's dimensions should match the video element dimensions
+  expect(
+    (document.getElementById(webcam_container_id) as HTMLDivElement).style
+      .width,
+  ).toBe("400px");
+  expect(
+    (document.getElementById(webcam_container_id) as HTMLDivElement).style
+      .height,
+  ).toBe("300px");
+
+  document.body.innerHTML = "";
+  // restore the offsetWidth/offsetHeight getters
+  jest.restoreAllMocks();
+});
+
+test("Webcam feed container size is not maintained with recorder.stop(false)", async () => {
+  // Add webcam container to document body.
+  const webcam_container_id = "webcam-container";
+  document.body.innerHTML = `<div id="${webcam_container_id}"></div>`;
+  const webcam_div = document.getElementById(
+    webcam_container_id,
+  ) as HTMLDivElement;
+
+  const jsPsych = initJsPsych();
+  const rec = new Recorder(jsPsych);
+  const stopPromise = Promise.resolve();
+
+  rec["stopPromise"] = stopPromise;
+  rec.insertWebcamFeed(webcam_div);
+
+  // Mock the return values for the video element offsetHeight/offsetWidth, which are used to set the container size
+  jest
+    .spyOn(document.getElementsByTagName("video")[0], "offsetWidth", "get")
+    .mockImplementation(() => 400);
+  jest
+    .spyOn(document.getElementsByTagName("video")[0], "offsetHeight", "get")
+    .mockImplementation(() => 300);
+
+  await rec.stop(false);
+
+  // Container div's dimensions should not be set
+  expect(
+    (document.getElementById(webcam_container_id) as HTMLDivElement).style
+      .width,
+  ).toBe("");
+  expect(
+    (document.getElementById(webcam_container_id) as HTMLDivElement).style
+      .height,
+  ).toBe("");
+
+  document.body.innerHTML = "";
+  // restore the offsetWidth/offsetHeight getters
+  jest.restoreAllMocks();
+});
+
+test("Webcam feed container size is not maintained with recorder.stop()", async () => {
+  // Add webcam container to document body.
+  const webcam_container_id = "webcam-container";
+  document.body.innerHTML = `<div id="${webcam_container_id}"></div>`;
+  const webcam_div = document.getElementById(
+    webcam_container_id,
+  ) as HTMLDivElement;
+
+  const jsPsych = initJsPsych();
+  const rec = new Recorder(jsPsych);
+  const stopPromise = Promise.resolve();
+
+  rec["stopPromise"] = stopPromise;
+  rec.insertWebcamFeed(webcam_div);
+
+  // Mock the return values for the video element offsetHeight/offsetWidth, which are used to set the container size
+  jest
+    .spyOn(document.getElementsByTagName("video")[0], "offsetWidth", "get")
+    .mockImplementation(() => 400);
+  jest
+    .spyOn(document.getElementsByTagName("video")[0], "offsetHeight", "get")
+    .mockImplementation(() => 300);
+
+  await rec.stop();
+
+  // Container div's dimensions should not be set
+  expect(
+    (document.getElementById(webcam_container_id) as HTMLDivElement).style
+      .width,
+  ).toBe("");
+  expect(
+    (document.getElementById(webcam_container_id) as HTMLDivElement).style
+      .height,
+  ).toBe("");
+
+  document.body.innerHTML = "";
+  jest.restoreAllMocks();
+});
+
 test("Recorder initializeRecorder", () => {
   const jsPsych = initJsPsych();
   const rec = new Recorder(jsPsych);
@@ -356,7 +477,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 +627,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. */
@@ -269,13 +276,19 @@ export default class Recorder {
    * tracks, clear the webcam feed element (if there is one), and return the
    * stop promise. This should only be called after recording has started.
    *
+   * @param maintain_container_size - Optional boolean indicating whether or not
+   *   to maintain the current size of the webcam feed container when removing
+   *   the video element. Default is false. If true, the container will be
+   *   resized to match the dimensions of the video element before it is
+   *   removed. This is useful for avoiding layout jumps when the webcam
+   *   container will be re-used during the trial.
    * @returns Promise that resolves after the media recorder has stopped and
    *   final 'dataavailable' event has occurred, when the "stop" event-related
    *   callback function is called.
    */
-  public stop() {
+  public stop(maintain_container_size: boolean = false) {
+    this.clearWebcamFeed(maintain_container_size);
     this.stopTracks();
-    this.clearWebcamFeed();
 
     if (!this.stopPromise) {
       throw new NoStopPromiseError();
@@ -346,12 +359,30 @@ export default class Recorder {
     }
   }
 
-  /** Private helper to clear the webcam feed, if there is one. */
-  private clearWebcamFeed() {
+  /**
+   * Private helper to clear the webcam feed, if there is one. If remove is
+   * false, the video element source attribute is cleared and the parent div
+   * will be set to the same dimensions. This is useful for avoiding layout
+   * jumps when the webcam container and video element will be re-used during
+   * the trial.
+   *
+   * @param maintain_container_size - Boolean indicating whether or not to set
+   *   the webcam feed container size before removing the video element
+   */
+  private clearWebcamFeed(maintain_container_size: boolean) {
     const webcam_feed_element = document.querySelector(
       `#${this.webcam_element_id}`,
     ) as HTMLVideoElement;
     if (webcam_feed_element) {
+      if (maintain_container_size) {
+        const parent_div = webcam_feed_element.parentElement as HTMLDivElement;
+        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();
     }
   }