Another Video PR

packages/lookit-initjspsych/src/utils.ts

@@ -21,6 +21,7 @@ export const on_data_update = (responseUuid: string, userFunc?: UserFunc) => {
     await Api.updateResponse(responseUuid, {
       exp_data: [...exp_data, data],
     });
+    await Api.finish();
 
     // Don't call the function if not defined by user.
     if (typeof userFunc === "function") {

packages/surveys/package.json

@@ -14,6 +14,7 @@
   "author": "Christopher J Green <[email protected]> (https://github.com/okaycj)",
   "main": "dist/index.js",
   "unpkg": "dist/index.browser.min.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "src",
     "dist"

packages/video/package.json

@@ -14,14 +14,20 @@
   "author": "Christopher J Green <[email protected]> (https://github.com/okaycj)",
   "main": "dist/index.js",
   "unpkg": "dist/index.browser.min.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "src",
     "dist"
   ],
   "scripts": {
     "build": "rollup --config",
+    "dev": "rollup --config rollup.config.dev.mjs --watch",
     "test": "jest --coverage"
   },
+  "dependencies": {
+    "@lookit/data": "^0.0.1",
+    "auto-bind": "^5.0.1"
+  },
   "devDependencies": {
     "@jspsych/config": "^2.0.0"
   },

packages/video/src/index.ts

@@ -1 +1,5 @@
-export default {};
+import StartRecordPlugin from "./start";
+import StopRecordPlugin from "./stop";
+import TrialRecordExtension from "./trial";
+
+export default { TrialRecordExtension, StartRecordPlugin, StopRecordPlugin };

packages/video/src/recorder.ts

@@ -0,0 +1,102 @@
+import autoBind from "auto-bind";
+import { JsPsych } from "jspsych";
+
+/** Recorder handles state of recording and data storage. */
+export default class Recorder {
+  private blobs: Blob[] = [];
+
+  /**
+   * Recorder for online experiments.
+   *
+   * @param jsPsych - Object supplied by jsPsych.
+   */
+  public constructor(private jsPsych: JsPsych) {
+    autoBind(this);
+  }
+
+  /**
+   * Get recorder from jsPsydh plugin API.
+   *
+   * @returns MediaRecorder from the plugin API.
+   */
+  private get recorder() {
+    return this.jsPsych.pluginAPI.getCameraRecorder();
+  }
+
+  /**
+   * Get stream from jsPsydh plugin API.
+   *
+   * @returns MediaStream from the plugin API.
+   */
+  private get stream() {
+    return this.jsPsych.pluginAPI.getCameraStream();
+  }
+
+  /** Start recording. Also, adds event listeners for handling data. */
+  public start() {
+    this.recorder.addEventListener("dataavailable", this.handleDataAvailable);
+    this.recorder.addEventListener("stop", this.handleStop);
+    this.recorder.start();
+  }
+
+  /** Stop recording and camera. */
+  public stop() {
+    this.recorder.stop();
+    this.stream.getTracks().map((t: MediaStreamTrack) => t.stop());
+  }
+
+  /** Handle recorder's stop event. */
+  private async handleStop() {
+    await this.download();
+  }
+
+  /**
+   * Function ran at each time slice and when recorder has stopped.
+   *
+   * @param event - Event containing blob data.
+   */
+  private handleDataAvailable(event: BlobEvent) {
+    this.blobs.push(event.data);
+  }
+
+  /** Temp method to download data url. */
+  private async download() {
+    const data = (await this.bytesToBase64DataUrl(
+      new Blob(this.blobs),
+    )) as string;
+    const link = document.createElement("a");
+    link.href = data;
+    link.download = `something_${new Date().getTime()}.webm`;
+    link.click();
+  }
+
+  /**
+   * Temp method to convert blobs to a data url.
+   *
+   * @param bytes - Bytes or blobs.
+   * @param type - Mimetype.
+   * @returns Result of reading data as url.
+   */
+  private bytesToBase64DataUrl(
+    bytes: BlobPart,
+    type = "video/webm; codecs=vp8",
+  ) {
+    return new Promise((resolve, reject) => {
+      const reader = Object.assign(new FileReader(), {
+        /**
+         * When promise resolves, it'll return the result.
+         *
+         * @returns Result of reading data as url.
+         */
+        onload: () => resolve(reader.result),
+        /**
+         * On error, promise return reader error.
+         *
+         * @returns Error message.
+         */
+        onerror: () => reject(Error(reader.error?.toString())),
+      });
+      reader.readAsDataURL(new File([bytes], "", { type }));
+    });
+  }
+}

packages/video/src/start.ts

@@ -0,0 +1,26 @@
+import { JsPsych, JsPsychPlugin } from "jspsych";
+import Recorder from "./recorder";
+
+const info = <const>{ name: "start-record-plugin", parameters: {} };
+type Info = typeof info;
+
+/** Start recording. Used by researchers who want to record across trials. */
+export default class StartRecordPlugin implements JsPsychPlugin<Info> {
+  public static readonly info = info;
+  private recorder: Recorder;
+
+  /**
+   * Plugin used to start recording.
+   *
+   * @param jsPsych - Object provided by jsPsych.
+   */
+  public constructor(private jsPsych: JsPsych) {
+    this.recorder = new Recorder(this.jsPsych);
+  }
+
+  /** Trial function called by jsPsych. */
+  public trial(): void {
+    this.recorder.start();
+    setTimeout(() => this.jsPsych.finishTrial(), 1000);
+  }
+}

packages/video/src/stop.ts

@@ -0,0 +1,25 @@
+import { JsPsych, JsPsychPlugin } from "jspsych";
+import Recorder from "./recorder";
+
+const info = <const>{ name: "stop-record-plugin", parameters: {} };
+type Info = typeof info;
+
+/** Stop recording. Used by researchers who want to record across trials. */
+export default class StopRecordPlugin implements JsPsychPlugin<Info> {
+  public static readonly info = info;
+  private recorder: Recorder;
+
+  /**
+   * Plugin used to stop recording.
+   *
+   * @param jsPsych - Object provided by jsPsych.
+   */
+  public constructor(private jsPsych: JsPsych) {
+    this.recorder = new Recorder(this.jsPsych);
+  }
+
+  /** Trial function called by jsPsych. */
+  public trial(): void {
+    setTimeout(() => this.recorder.stop(), 1000);
+  }
+}

packages/video/src/trial.ts

@@ -0,0 +1,43 @@
+import autoBind from "auto-bind";
+import { JsPsych, JsPsychExtension, JsPsychExtensionInfo } from "jspsych";
+import Recorder from "./recorder";
+
+/** This extension will allow reasearchers to record trials. */
+export default class TrialRecordExtension implements JsPsychExtension {
+  public static readonly info: JsPsychExtensionInfo = {
+    name: "chs-trial-record-extension",
+  };
+
+  private recorder: Recorder;
+
+  /**
+   * Video recording extension.
+   *
+   * @param jsPsych - JsPsych object passed into extensions.
+   */
+  public constructor(private jsPsych: JsPsych) {
+    this.recorder = new Recorder(this.jsPsych);
+    autoBind(this);
+  }
+
+  /** Ran on the initialize step for extensions. */
+  public async initialize() {}
+
+  /** Ran at the start of a trail. */
+  public on_start() {}
+
+  /** Ran when the trial has loaded. */
+  public on_load() {
+    this.recorder.start();
+  }
+
+  /**
+   * Ran when trial has finished.
+   *
+   * @returns Trail data.
+   */
+  public on_finish() {
+    this.recorder.stop();
+    return {};
+  }
+}