From 5f68153af7e1b799a2ab82bb1d0027f35fd1efd2 Mon Sep 17 00:00:00 2001
From: Vladimir Mandic <mandic00@live.com>
Date: Wed, 15 Sep 2021 13:59:18 -0400
Subject: [PATCH] add simple webcam and webrtc demo

---
 CHANGELOG.md           |  3 ++-
 demo/helpers/webrtc.js | 16 ++++++++++++++++
 demo/index.js          |  2 --
 src/draw/draw.ts       | 11 +++++------
 src/human.ts           | 12 ++++++++----
 src/image/image.ts     | 11 +++++++++--
 wiki                   |  2 +-
 7 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 094fa8d9..025ea0a6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,8 +9,9 @@
   
 ## Changelog
   
-### **HEAD -> main** 2021/09/14 mandic00@live.com
+### **HEAD -> main** 2021/09/15 mandic00@live.com
 
+- reorganize tfjs bundle
 - experimental custom tfjs bundle - disabled
 - add platform and backend capabilities detection
 - enhanced automated tests
diff --git a/demo/helpers/webrtc.js b/demo/helpers/webrtc.js
index c31de4b3..a1b10053 100644
--- a/demo/helpers/webrtc.js
+++ b/demo/helpers/webrtc.js
@@ -9,6 +9,22 @@ async function log(...msg) {
   }
 }
 
+/**
+ * helper implementation of webrtc 
+ * performs:
+ * - discovery
+ * - handshake
+ * - connct to webrtc stream
+ * - assign webrtc stream to video element
+ *
+ * for development purposes i'm using test webrtc server that reads rtsp stream from a security camera:
+ * <https://github.com/vladmandic/stream-rtsp>
+ * 
+* @param {string} server
+* @param {string} streamName
+* @param {HTMLVideoElement} elementName
+* @return {promise}
+*/
 async function webRTC(server, streamName, elementName) {
   const suuid = streamName;
   log('client starting');
diff --git a/demo/index.js b/demo/index.js
index 5f068ec2..41147b7c 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -904,7 +904,6 @@ async function pwaRegister() {
 }
 
 async function main() {
-  /*
   window.addEventListener('unhandledrejection', (evt) => {
     // eslint-disable-next-line no-console
     console.error(evt.reason || evt);
@@ -912,7 +911,6 @@ async function main() {
     status('exception error');
     evt.preventDefault();
   });
-  */
 
   log('demo starting ...');
 
diff --git a/src/draw/draw.ts b/src/draw/draw.ts
index 572fa47f..b136d570 100644
--- a/src/draw/draw.ts
+++ b/src/draw/draw.ts
@@ -492,17 +492,16 @@ export async function person(inCanvas: HTMLCanvasElement, result: Array<PersonRe
   }
 }
 
-export async function canvas(inCanvas: HTMLCanvasElement, outCanvas: HTMLCanvasElement) {
-  if (!inCanvas || !outCanvas) return;
-  getCanvasContext(outCanvas);
-  const ctx = getCanvasContext(inCanvas);
-  ctx.drawImage(inCanvas, 0, 0);
+export async function canvas(input: HTMLCanvasElement | HTMLImageElement | HTMLMediaElement | HTMLVideoElement, output: HTMLCanvasElement) {
+  if (!input || !output) return;
+  const ctx = getCanvasContext(output);
+  ctx.drawImage(input, 0, 0);
 }
 
 export async function all(inCanvas: HTMLCanvasElement, result: Result, drawOptions?: DrawOptions) {
+  if (!result || !result.performance || !result || !inCanvas) return null;
   const timestamp = now();
   const localOptions = mergeDeep(options, drawOptions);
-  if (!result || !inCanvas) return null;
 
   const promise = Promise.all([
     face(inCanvas, result.face, localOptions),
diff --git a/src/human.ts b/src/human.ts
index e0f3ed13..ef9b4df9 100644
--- a/src/human.ts
+++ b/src/human.ts
@@ -150,7 +150,6 @@ export class Human {
   #analyzeMemoryLeaks: boolean;
   #checkSanity: boolean;
   initial: boolean;
-
   // definition end
 
   /**
@@ -256,7 +255,7 @@ export class Human {
    * @param background?: {@link Input}
    * @returns Canvas
    */
-  segmentation(input: Input, background?: Input) {
+  async segmentation(input: Input, background?: Input) {
     return input ? segmentation.process(input, background, this.config) : null;
   }
 
@@ -327,14 +326,19 @@ export class Human {
    * @param result?: {@link Result} optional use specific result set to run interpolation on
    * @returns result: {@link Result}
    */
-  next = (result?: Result) => interpolate.calc(result || this.result) as Result;
+  next(result: Result = this.result) {
+    return interpolate.calc(result) as Result;
+  }
 
   /** Warmup method pre-initializes all configured models for faster inference
    * - can take significant time on startup
    * - only used for `webgl` and `humangl` backends
    * @param userConfig?: {@link Config}
+   * @returns result: {@link Result}
   */
-  warmup = (userConfig?: Partial<Config>) => warmups.warmup(this, userConfig) as Promise<Result | { error }>
+  async warmup(userConfig?: Partial<Config>): Promise<Result | { error }> {
+    return warmups.warmup(this, userConfig) as Promise<Result | { error }>;
+  }
 
   /** Main detection method
    * - Analyze configuration: {@link Config}
diff --git a/src/image/image.ts b/src/image/image.ts
index 7b6e8353..adef479d 100644
--- a/src/image/image.ts
+++ b/src/image/image.ts
@@ -7,6 +7,7 @@ import * as fxImage from './imagefx';
 import type { Tensor } from '../tfjs/types';
 import type { Config } from '../config';
 import { env } from '../env';
+import { log } from '../helpers';
 
 type Input = Tensor | ImageData | ImageBitmap | HTMLImageElement | HTMLMediaElement | HTMLVideoElement | HTMLCanvasElement | OffscreenCanvas | typeof Image | typeof env.Canvas;
 
@@ -62,9 +63,16 @@ export function process(input: Input, config: Config): { tensor: Tensor | null,
     else throw new Error(`Human: Input tensor shape must be [1, height, width, 3] and instead was ${(input as unknown as Tensor).shape}`);
   } else {
     // check if resizing will be needed
+    if (typeof input['readyState'] !== 'undefined' && input['readyState'] <= 2) {
+      log('input stream is not ready');
+      return { tensor: null, canvas: inCanvas }; // video may become temporarily unavailable due to onresize
+    }
     const originalWidth = input['naturalWidth'] || input['videoWidth'] || input['width'] || (input['shape'] && (input['shape'][1] > 0));
     const originalHeight = input['naturalHeight'] || input['videoHeight'] || input['height'] || (input['shape'] && (input['shape'][2] > 0));
-    if (!originalWidth || !originalHeight) return { tensor: null, canvas: inCanvas }; // video may become temporarily unavailable due to onresize
+    if (!originalWidth || !originalHeight) {
+      log('cannot determine input dimensions');
+      return { tensor: null, canvas: inCanvas }; // video may become temporarily unavailable due to onresize
+    }
     let targetWidth = originalWidth;
     let targetHeight = originalHeight;
     if (targetWidth > maxSize) {
@@ -153,7 +161,6 @@ export function process(input: Input, config: Config): { tensor: Tensor | null,
       outCanvas = inCanvas;
       if (fx) fx = null;
     }
-
     // create tensor from image if tensor is not already defined
     if (!tensor) {
       let pixels;
diff --git a/wiki b/wiki
index 44b1bf12..deadc5d4 160000
--- a/wiki
+++ b/wiki
@@ -1 +1 @@
-Subproject commit 44b1bf12ab5dbf4cedde34da123237b1cd02627b
+Subproject commit deadc5d4f7db0dca06bbe8bbb956e01287ef3920