diff --git a/.gitignore b/.gitignore
index 6704566..a7dc02a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -102,3 +102,6 @@ dist
# TernJS port file
.tern-port
+
+# VS Code configuration
+.vscode
\ No newline at end of file
diff --git a/examples/test-web-worker.html b/examples/test-web-worker.html
new file mode 100644
index 0000000..dff2559
--- /dev/null
+++ b/examples/test-web-worker.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
diff --git a/package-lock.json b/package-lock.json
index 5ba4821..b20862e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,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"
@@ -4247,6 +4248,15 @@
"fsevents": "~2.3.2"
}
},
+ "node_modules/rollup-plugin-web-worker-loader": {
+ "version": "1.6.1",
+ "resolved": "https://registry.npmjs.org/rollup-plugin-web-worker-loader/-/rollup-plugin-web-worker-loader-1.6.1.tgz",
+ "integrity": "sha512-4QywQSz1NXFHKdyiou16mH3ijpcfLtLGOrAqvAqu1Gx+P8+zj+3gwC2BSL/VW1d+LW4nIHC8F7d7OXhs9UdR2A==",
+ "dev": true,
+ "peerDependencies": {
+ "rollup": "^1.9.2 || ^2.0.0"
+ }
+ },
"node_modules/safer-buffer": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -8110,6 +8120,13 @@
"fsevents": "~2.3.2"
}
},
+ "rollup-plugin-web-worker-loader": {
+ "version": "1.6.1",
+ "resolved": "https://registry.npmjs.org/rollup-plugin-web-worker-loader/-/rollup-plugin-web-worker-loader-1.6.1.tgz",
+ "integrity": "sha512-4QywQSz1NXFHKdyiou16mH3ijpcfLtLGOrAqvAqu1Gx+P8+zj+3gwC2BSL/VW1d+LW4nIHC8F7d7OXhs9UdR2A==",
+ "dev": true,
+ "requires": {}
+ },
"safer-buffer": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
diff --git a/package.json b/package.json
index 76f7b92..d3e4927 100644
--- 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
index 054cf6f..def0833 100644
--- 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
index 00d1f0d..6fa4cf9 100644
--- 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 | 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> {
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
new file mode 100644
index 0000000..888882a
--- /dev/null
+++ 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
index 9973466..b56187f 100644
--- 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
new file mode 100644
index 0000000..940ec77
--- /dev/null
+++ b/workers.d.ts
@@ -0,0 +1,4 @@
+declare module "web-worker:*" {
+ const WorkerFactory: new () => Worker;
+ export default WorkerFactory;
+}