From 69201984c1211b5778d59ba548c0affc321f5e7d Mon Sep 17 00:00:00 2001
From: Vladimir Mandic <mandic00@live.com>
Date: Fri, 6 Nov 2020 22:20:42 -0500
Subject: [PATCH] optimize font resizing

---
 config.js       |  4 ++--
 demo/browser.js | 18 ++++++++++++------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/config.js b/config.js
index 0f218540..8772b40d 100644
--- a/config.js
+++ b/config.js
@@ -108,9 +108,9 @@ export default {
     skipFrames: 15,          // how many frames to go without re-running the hand bounding box detector, only used for video inputs
                              // if model is running st 25 FPS, we can re-use existing bounding box for updated hand skeleton analysis
                              // as the hand probably hasn't moved much in short time (10 * 1/25 = 0.25 sec)
-    minConfidence: 0.1,      // threshold for discarding a prediction
+    minConfidence: 0.2,      // threshold for discarding a prediction
     iouThreshold: 0.2,       // threshold for deciding whether boxes overlap too much in non-maximum suppression
-    scoreThreshold: 0.1,     // threshold for deciding when to remove boxes based on score in non-maximum suppression
+    scoreThreshold: 0.2,     // threshold for deciding when to remove boxes based on score in non-maximum suppression
     enlargeFactor: 1.65,     // empiric tuning as skeleton prediction prefers hand box with some whitespace
     maxHands: 10,            // maximum number of hands detected in the input, should be set to the minimum number for performance
     detector: {
diff --git a/demo/browser.js b/demo/browser.js
index 90277c1e..a79b79ad 100644
--- a/demo/browser.js
+++ b/demo/browser.js
@@ -123,11 +123,16 @@ async function setupCamera() {
   let stream;
   const constraints = {
     audio: false,
-    video: { facingMode: (ui.facing ? 'user' : 'environment'), resizeMode: 'none' },
+    video: {
+      facingMode: (ui.facing ? 'user' : 'environment'),
+      resizeMode: 'none',
+      width: { ideal: window.innerWidth },
+      height: { ideal: window.innerHeight },
+    },
   };
   try {
-    if (window.innerWidth > window.innerHeight) constraints.video.width = { ideal: window.innerWidth };
-    else constraints.video.height = { ideal: window.innerHeight };
+    // if (window.innerWidth > window.innerHeight) constraints.video.width = { ideal: window.innerWidth };
+    // else constraints.video.height = { ideal: window.innerHeight };
     stream = await navigator.mediaDevices.getUserMedia(constraints);
   } catch (err) {
     if (err.name === 'PermissionDeniedError') msg = 'camera permission denied';
@@ -151,6 +156,9 @@ async function setupCamera() {
       canvas.height = video.height;
       canvas.style.width = canvas.width > canvas.height ? '100vw' : '';
       canvas.style.height = canvas.width > canvas.height ? '' : '100vh';
+      // silly font resizing for paint-on-canvas since viewport can be zoomed
+      const size = 14 + (6 * canvas.width / window.innerWidth);
+      ui.baseFont = ui.baseFontProto.replace(/{size}/, `${size}px`);
       if (live) video.play();
       ui.busy = false;
       // do once more because onresize events can be delayed or skipped
@@ -246,8 +254,6 @@ async function detectVideo() {
   document.getElementById('canvas').style.display = 'block';
   const video = document.getElementById('video');
   const canvas = document.getElementById('canvas');
-  const size = 12 + Math.trunc(window.innerWidth / 400);
-  ui.baseFont = ui.baseFontProto.replace(/{size}/, `${size}px`);
   ui.baseLineHeight = ui.baseLineHeightProto;
   if ((video.srcObject !== null) && !video.paused) {
     document.getElementById('play').style.display = 'block';
@@ -266,7 +272,7 @@ async function detectVideo() {
 async function detectSampleImages() {
   document.getElementById('play').style.display = 'none';
   human.config.videoOptimized = false;
-  const size = Math.trunc(ui.columns * 25600 / window.innerWidth);
+  const size = 12 + Math.trunc(12 * ui.columns * window.innerWidth / document.body.clientWidth);
   ui.baseFont = ui.baseFontProto.replace(/{size}/, `${size}px`);
   ui.baseLineHeight = ui.baseLineHeightProto * ui.columns;
   document.getElementById('canvas').style.display = 'none';