diff --git a/.build.json b/.build.json index 7e8790e1..459b55ab 100644 --- a/.build.json +++ b/.build.json @@ -145,6 +145,7 @@ { "name": "tfjs/browser/esm/custom", "platform": "browser", + "target": "esnext", "format": "esm", "input": "tfjs/tf-custom.ts", "output": "dist/tfjs.esm.js", @@ -154,6 +155,7 @@ { "name": "human/browser/esm/custom", "platform": "browser", + "target": "esnext", "format": "esm", "input": "src/human.ts", "output": "dist/human.custom.esm.js", @@ -162,11 +164,22 @@ "external": ["fs", "os", "buffer", "util"], "typings": "types", "typedoc": "typedoc" + }, + { + "name": "demo/browser", + "platform": "browser", + "target": "esnext", + "format": "esm", + "input": "demo/typescript/index.ts", + "output": "demo/typescript/index.js", + "sourcemap": true, + "minify": false, + "external": ["*/human.custom.esm.js"] } ] }, "watch": { - "locations": [ "src/**/*", "tfjs/**/*" ] + "locations": [ "src/**/*", "tfjs/**/*", "demo/**/*.ts" ] }, "typescript": { "allowJs": false diff --git a/.eslintrc.json b/.eslintrc.json index 570d374e..3f753a3b 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -27,7 +27,8 @@ ], "ignorePatterns": [ "assets", - "demo/helpers", + "demo/helpers/*.js", + "demo/typescript/*.js", "dist", "media", "models", diff --git a/CHANGELOG.md b/CHANGELOG.md index 655406ef..3c364063 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ ### **HEAD -> main** 2021/10/26 mandic00@live.com +- switch to custom tfjs for demos ### **release: 2.4.1** 2021/10/25 mandic00@live.com diff --git a/demo/index.js b/demo/index.js index cdb4f751..053ca929 100644 --- a/demo/index.js +++ b/demo/index.js @@ -415,7 +415,7 @@ async function setupCamera() { } const track = stream.getVideoTracks()[0]; const settings = track.getSettings(); - if (initialCameraAccess) log('selected video source:', track, settings); // log('selected camera:', track.label, 'id:', settings.deviceId); + if (initialCameraAccess) log('selected video source:', track, settings); ui.camera = { name: track.label.toLowerCase(), width: settings.width, height: settings.height, facing: settings.facingMode === 'user' ? 'front' : 'back' }; initialCameraAccess = false; diff --git a/demo/typescript/index.html b/demo/typescript/index.html new file mode 100644 index 00000000..230a0a8f --- /dev/null +++ b/demo/typescript/index.html @@ -0,0 +1,28 @@ + + + + + Human + + + + + + + + + + + + + + + + 

+  
+
diff --git a/demo/typescript/index.js b/demo/typescript/index.js
new file mode 100644
index 00000000..08fc7199
--- /dev/null
+++ b/demo/typescript/index.js
@@ -0,0 +1,77 @@
+/*
+  Human
+  homepage: 
+  author: '
+*/
+
+// demo/typescript/index.ts
+import Human from "../../dist/human.custom.esm.js";
+var config = {
+  modelBasePath: "../../models",
+  backend: "humangl"
+};
+var human = new Human(config);
+var result;
+var video = document.getElementById("video");
+var canvas = document.getElementById("canvas");
+var fps = { detect: 0, draw: 0, element: document.getElementById("status") };
+var log = (...msg) => console.log(...msg);
+var status = (msg) => {
+  if (fps.element)
+    fps.element.innerText = msg;
+};
+async function webCam() {
+  status("starting webcam...");
+  const options = { audio: false, video: { facingMode: "user", resizeMode: "none", width: { ideal: document.body.clientWidth } } };
+  const stream = await navigator.mediaDevices.getUserMedia(options);
+  const ready = new Promise((resolve) => {
+    video.onloadeddata = () => resolve(true);
+  });
+  video.srcObject = stream;
+  video.play();
+  await ready;
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+  const track = stream.getVideoTracks()[0];
+  const capabilities = track.getCapabilities();
+  const settings = track.getSettings();
+  const constraints = track.getConstraints();
+  log("video:", video.videoWidth, video.videoHeight, { stream, track, settings, constraints, capabilities });
+  canvas.onclick = () => {
+    if (video.paused)
+      video.play();
+    else
+      video.pause();
+  };
+}
+async function detectionLoop() {
+  const t0 = human.now();
+  if (!video.paused)
+    result = await human.detect(video);
+  const t1 = human.now();
+  fps.detect = 1e3 / (t1 - t0);
+  requestAnimationFrame(detectionLoop);
+}
+async function drawLoop() {
+  const t0 = human.now();
+  if (!video.paused) {
+    const interpolated = await human.next(result);
+    await human.draw.canvas(video, canvas);
+    await human.draw.all(canvas, interpolated);
+  }
+  const t1 = human.now();
+  fps.draw = 1e3 / (t1 - t0);
+  status(video.paused ? "paused" : `fps: ${fps.detect.toFixed(1).padStart(5, " ")} detect / ${fps.draw.toFixed(1).padStart(5, " ")} draw`);
+  requestAnimationFrame(drawLoop);
+}
+async function main() {
+  status("loading...");
+  await human.load();
+  status("initializing...");
+  await human.warmup();
+  await webCam();
+  await detectionLoop();
+  await drawLoop();
+}
+window.onload = main;
+//# sourceMappingURL=index.js.map
diff --git a/demo/typescript/index.ts b/demo/typescript/index.ts
new file mode 100644
index 00000000..312c4e8b
--- /dev/null
+++ b/demo/typescript/index.ts
@@ -0,0 +1,76 @@
+/**
+ * Human demo for browsers
+ * @description Simple Human demo for browsers using WebCam
+ */
+
+import Human from '../../dist/human.custom.esm.js'; // equivalent of @vladmandic/human
+
+const config = {
+  modelBasePath: '../../models',
+  backend: 'humangl',
+};
+
+const human = new Human(config);
+let result;
+
+const video = document.getElementById('video') as HTMLVideoElement;
+const canvas = document.getElementById('canvas') as HTMLCanvasElement;
+const fps = { detect: 0, draw: 0, element: document.getElementById('status') };
+
+// eslint-disable-next-line no-console
+const log = (...msg) => console.log(...msg);
+const status = (msg) => { if (fps.element) fps.element.innerText = msg; };
+
+async function webCam() {
+  status('starting webcam...');
+  const options = { audio: false, video: { facingMode: 'user', resizeMode: 'none', width: { ideal: document.body.clientWidth } } };
+  const stream: MediaStream = await navigator.mediaDevices.getUserMedia(options);
+  const ready = new Promise((resolve) => { video.onloadeddata = () => resolve(true); });
+  video.srcObject = stream;
+  video.play();
+  await ready;
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+  const track: MediaStreamTrack = stream.getVideoTracks()[0];
+  const capabilities: MediaTrackCapabilities = track.getCapabilities();
+  const settings: MediaTrackSettings = track.getSettings();
+  const constraints: MediaTrackConstraints = track.getConstraints();
+  log('video:', video.videoWidth, video.videoHeight, { stream, track, settings, constraints, capabilities });
+  canvas.onclick = () => {
+    if (video.paused) video.play();
+    else video.pause();
+  };
+}
+
+async function detectionLoop() {
+  const t0 = human.now();
+  if (!video.paused) result = await human.detect(video);
+  const t1 = human.now();
+  fps.detect = 1000 / (t1 - t0);
+  requestAnimationFrame(detectionLoop);
+}
+
+async function drawLoop() {
+  const t0 = human.now();
+  if (!video.paused) {
+    const interpolated = await human.next(result);
+    await human.draw.canvas(video, canvas);
+    await human.draw.all(canvas, interpolated);
+  }
+  const t1 = human.now();
+  fps.draw = 1000 / (t1 - t0);
+  status(video.paused ? 'paused' : `fps: ${fps.detect.toFixed(1).padStart(5, ' ')} detect / ${fps.draw.toFixed(1).padStart(5, ' ')} draw`);
+  requestAnimationFrame(drawLoop);
+}
+
+async function main() {
+  status('loading...');
+  await human.load();
+  status('initializing...');
+  await human.warmup();
+  await webCam();
+  await detectionLoop();
+  await drawLoop();
+}
+
+window.onload = main;
diff --git a/src/human.ts b/src/human.ts
index 4bfaf576..7b589942 100644
--- a/src/human.ts
+++ b/src/human.ts
@@ -294,6 +294,7 @@ export class Human {
       await tf.ready();
       if (this.env.browser) {
         if (this.config.debug) log('configuration:', this.config);
+        if (this.config.debug) log('environment:', this.env);
         if (this.config.debug) log('tf flags:', this.tf.ENV['flags']);
       }
     }
diff --git a/wiki b/wiki
index 20389b97..5e874c07 160000
--- a/wiki
+++ b/wiki
@@ -1 +1 @@
-Subproject commit 20389b9779834324acbbcf2b25041a489a688d18
+Subproject commit 5e874c076123f1c2b2821b1c37f6005e775465aa