jspsych · jodeleeuw · Jun 10, 2022 · Jun 10, 2022 · Jun 10, 2022 · Jun 10, 2022
diff --git a/.gitignore b/.gitignore
@@ -102,3 +102,6 @@ dist
 
 # TernJS port file
 .tern-port
+
+# VS Code configuration
+.vscode
diff --git a/examples/test-web-worker.html b/examples/test-web-worker.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="../dist/bundle.js"></script>
+  </head>
+
+  <body></body>
+  <script>
+    var Eyetracker = eyetrack.initEyetracker();
+
+    Eyetracker.foo();
+
+    Eyetracker.bar();
+  </script>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "pretty-quick": "^3.1.3",
     "process": "^0.11.10",
     "rollup": "^2.74.1",
+    "rollup-plugin-web-worker-loader": "^1.6.1",
     "ts-jest": "^28.0.3",
     "tslib": "^2.4.0",
     "typescript": "^4.6.4"

diff --git a/rollup.config.js b/rollup.config.js
@@ -1,6 +1,7 @@
 import commonjs from "@rollup/plugin-commonjs";
 import nodeResolve from "@rollup/plugin-node-resolve";
 import typescript from "@rollup/plugin-typescript";
+import webWorkerLoader from "rollup-plugin-web-worker-loader";
 
 export default {
   input: "src/index.ts",
@@ -9,5 +10,5 @@ export default {
     format: "iife",
     name: "eyetrack",
   },
-  plugins: [nodeResolve(), typescript(), commonjs()],
+  plugins: [nodeResolve(), webWorkerLoader(), commonjs(), typescript()],
 };
diff --git a/src/Eyetracker.ts b/src/Eyetracker.ts
@@ -7,52 +7,63 @@ import {
 import "@tensorflow/tfjs-core";
 import "@tensorflow/tfjs-backend-webgl";
 import "@mediapipe/face_mesh";
-
+import DemoWorker from "web-worker:./Worker.js";
 
 export class Eyetracker {
-
   private stream: MediaStream | undefined;
   private video: HTMLVideoElement | undefined;
   private canvas: HTMLCanvasElement | undefined;
   private detector: FaceLandmarksDetector | undefined;
   private ctx: CanvasRenderingContext2D | undefined;
+  private worker: Worker | undefined;
+
+  constructor() {
+    this.worker = new DemoWorker();
+    this.worker.addEventListener("message", (e) => {
+      console.log(e.data);
+    });
+  }
+
+  foo() {
+    this.worker?.postMessage({ cmd: "foo" });
+  }
+
   private faces: Array<any> | undefined;
 
-  /**
-   * This is a function to add two numbers together.
-   *
-   * @param a A number to add
-   * @param b A number to add
-   * @returns The sum of both numbers
-   */
-  add(a: number, b: number): number {
-    return a + b;
+
+  bar() {
+    this.worker?.postMessage({ cmd: "bar" });
   }
 
   async getCameraPermission() {
-    this.stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
+    this.stream = await navigator.mediaDevices.getUserMedia({
+      video: true,
+      audio: false,
+    });
   }
 
   async getListOfCameras(): Promise<Array<MediaDeviceInfo>> {
     const devices = await navigator.mediaDevices.enumerateDevices();
     const videoDevices = devices.filter((d) => {
-      d.kind === 'videoinput';
-      return d.kind === 'videoinput';
-    })
+      d.kind === "videoinput";
+      return d.kind === "videoinput";
+    });
 
     return videoDevices;
   }
 
   async setCamera(device: MediaDeviceInfo) {
-    this.stream = await navigator.mediaDevices.getUserMedia({ video: { deviceId: device.deviceId } });
+    this.stream = await navigator.mediaDevices.getUserMedia({
+      video: { deviceId: device.deviceId },
+    });
   }
 
   async createVideo(Id: string) {
-    let video = document.createElement('video');
-    video.setAttribute('id', Id);
+    let video = document.createElement("video");
+    video.setAttribute("id", Id);
     document.body.appendChild(video);
-    video.style.transform = 'scaleX(-1)';
-    (video.srcObject as (undefined | MediaProvider | null)) = this.stream;
+    video.style.transform = "scaleX(-1)";
+    (video.srcObject as undefined | MediaProvider | null) = this.stream;
     video.autoplay = true;
     return new Promise((resolve) => {
       video.onloadedmetadata = () => {
@@ -65,48 +76,50 @@ export class Eyetracker {
   }
 
   createDisplay(Id: string) {
-    let canvas = document.createElement("canvas")
-    canvas.setAttribute('id', Id);
+    let canvas = document.createElement("canvas");
+    canvas.setAttribute("id", Id);
     document.body.appendChild(canvas);
-    this.canvas = canvas
+    this.canvas = canvas;
     if (this.video != null) {
       canvas.height = this.video.height;
       canvas.width = this.video.width;
       this.canvas = canvas;
-      var ctx = canvas.getContext('2d');
+      var ctx = canvas.getContext("2d");
       if (ctx != null) {
         ctx.translate(canvas.width, 0);
         ctx.scale(-1, 1);
         ctx.fillStyle = "green";
-        (this.ctx as (undefined | CanvasRenderingContext2D | null)) = ctx;
-        return canvas
-      }
-      else {
-        console.log('canvas.getContext(\'2d\') return null');
-        return canvas
+        (this.ctx as undefined | CanvasRenderingContext2D | null) = ctx;
+        return canvas;
+      } else {
+        console.log("canvas.getContext('2d') return null");
+        return canvas;
       }
+    } else {
+      console.log('Undefined Property "this.video"');
     }
-    else { console.log('Undefined Property \"this.video\"'); }
   }
 
   // Need to test this out
   setDisplay(canvas: HTMLCanvasElement) {
     let video = this.video;
     this.canvas = canvas;
-    if ((canvas != undefined) && (video != undefined)) {
-      canvas.height = video.height
-      canvas.width = video.width
-      var ctx = canvas.getContext('2d');
+    if (canvas != undefined && video != undefined) {
+      canvas.height = video.height;
+      canvas.width = video.width;
+      var ctx = canvas.getContext("2d");
       if (ctx != null) {
         ctx.translate(canvas.width, 0);
         ctx.scale(-1, 1);
         ctx.fillStyle = "green";
       }
-      (this.ctx as (undefined | CanvasRenderingContext2D | null)) = ctx;
+      (this.ctx as undefined | CanvasRenderingContext2D | null) = ctx;
+    } else {
+      console.log('/"this.canvas/", /"this.video/" Undefined');
     }
-    else { console.log('/"this.canvas/", /"this.video/" Undefined'); }
   }
 
+
   hideDisplay(canvas: HTMLCanvasElement) {
     canvas.style.visibility = 'hidden';
   }
@@ -152,7 +165,8 @@ export class Eyetracker {
       refineLandmarks: true,
     };
     const detector = await createDetector(model, detectorConfig);
-    this.detector = detector
-    return detector
+    this.detector = detector;
+    return detector;
   }
+
 }
diff --git a/src/Worker.js b/src/Worker.js
@@ -0,0 +1,17 @@
+self.addEventListener("message", (e) => {
+  const data = e.data;
+  switch (data.cmd) {
+    case "foo":
+      self.postMessage(foo());
+    case "bar":
+      self.postMessage(bar());
+  }
+});
+
+const foo = () => {
+  return Math.random();
+};
+
+const bar = () => {
+  return Math.floor(Math.random() * 100);
+};
diff --git a/tests/index.test.ts b/tests/index.test.ts
@@ -1,6 +1,5 @@
 import { initEyetracker } from "../src/index";
 
-test("test adds two numbers", () => {
-  const eye = initEyetracker();
-  expect(eye.add(2, 2)).toEqual(4);
+test("nothing", () => {
+  expect(true).toBe(true);
 });
diff --git a/workers.d.ts b/workers.d.ts
@@ -0,0 +1,4 @@
+declare module "web-worker:*" {
+  const WorkerFactory: new () => Worker;
+  export default WorkerFactory;
+}