optimize camera resize on mobile

demo/browser.js

@@ -136,7 +136,7 @@ async function drawResults(input) {
   const avgDraw = Math.trunc(10 * ui.drawFPS.reduce((a, b) => a + b, 0) / ui.drawFPS.length) / 10;
   const warning = (ui.detectFPS.length > 5) && (avgDetect < 5) ? '<font color="lightcoral">warning: your performance is low: try switching to higher performance backend, lowering resolution or disabling some models</font>' : '';
   document.getElementById('log').innerHTML = `
-    video: ${ui.camera.name} | facing: ${ui.camera.facing} | resolution: ${ui.camera.width} x ${ui.camera.height} ${processing}<br>
+    video: ${ui.camera.name} | facing: ${ui.camera.facing} | screen: ${window.innerWidth} x ${window.innerHeight} camera: ${ui.camera.width} x ${ui.camera.height} ${processing}<br>
     backend: ${human.tf.getBackend()} | ${memory}<br>
     performance: ${str(result.performance)} FPS process:${avgDetect} refresh:${avgDraw}<br>
     ${warning}
@@ -178,16 +178,11 @@ async function setupCamera() {
   let stream;
   const constraints = {
     audio: false,
-    video: {
+    video: { facingMode: ui.facing ? 'user' : 'environment', resizeMode: ui.crop ? 'crop-and-scale' : 'none' },
-      facingMode: ui.facing ? 'user' : 'environment',
-      resizeMode: ui.crop ? 'crop-and-scale' : 'none',
-      width: { ideal: window.innerWidth },
-      height: { ideal: window.innerHeight },
-    },
   };
+  if (window.innerWidth > window.innerHeight) constraints.video.width = { ideal: window.innerWidth };
+  else constraints.video.height = { ideal: window.innerHeight };
   try {
-    // 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';
@@ -376,8 +371,8 @@ function setupMenu() {
   menu.addHTML('<hr style="min-width: 200px; border-style: inset; border-color: dimgray">');
   menu.addList('backend', ['cpu', 'webgl', 'wasm'], human.config.backend, (val) => human.config.backend = val);
   menu.addBool('async operations', human.config, 'async', (val) => human.config.async = val);
-  menu.addBool('enable profiler', human.config, 'profile', (val) => human.config.profile = val);
+  // menu.addBool('enable profiler', human.config, 'profile', (val) => human.config.profile = val);
-  menu.addBool('memory shield', human.config, 'deallocate', (val) => human.config.deallocate = val);
+  // menu.addBool('memory shield', human.config, 'deallocate', (val) => human.config.deallocate = val);
   menu.addBool('use web worker', ui, 'useWorker');
   menu.addHTML('<hr style="min-width: 200px; border-style: inset; border-color: dimgray">');
   menu.addLabel('enabled models');
@@ -387,6 +382,10 @@ function setupMenu() {
   menu.addBool('face age', human.config.face.age, 'enabled');
   menu.addBool('face gender', human.config.face.gender, 'enabled');
   menu.addBool('face emotion', human.config.face.emotion, 'enabled');
+  // menu.addBool('face compare', human.config.face.embedding, 'enabled', (val) => {
+  //   human.config.face.embedding.enabled = val;
+  //   document.getElementById('compare-container').style.display = human.config.face.embedding.enabled ? 'block' : 'none';
+  // });
   menu.addBool('body pose', human.config.body, 'enabled');
   menu.addBool('hand pose', human.config.hand, 'enabled');
   menu.addBool('gesture analysis', human.config.gesture, 'enabled');

demo/index.html

@@ -6,7 +6,7 @@
   <meta content="text/html">
   <meta charset="UTF-8">
   <meta name="description" content="3D Face Detection, Body Pose, Hand & Finger Tracking, Iris Tracking, Age & Gender Prediction, Emotion Prediction & Gesture Recognition; Author: Vladimir Mandic <https://github.com/vladmandic>">
-  <meta name="viewport" content="width=device-width, initial-scale=0.6, minimum-scale=0.1, maximum-scale=4.0, shrink-to-fit=yes, user-scalable=yes">
+  <meta name="viewport" content="width=device-width, initial-scale=0.6, minimum-scale=0.3, maximum-scale=3.0, shrink-to-fit=yes, user-scalable=yes">
   <meta name="theme-color" content="#000000"/>
   <meta name="application-name" content="Human">
   <meta name="msapplication-tooltip" content="Human: AI-powered 3D Human Detection">

demo/menu.js

@@ -19,7 +19,7 @@ function createCSS() {
   if (CSScreated) return;
   const css = `
   :root { --rounded: 0.2rem; }
-  .menu { position: absolute; top: 0rem; right: 0; width: fit-content; padding: 0 0.8rem 0 0.8rem; line-height: 1.8rem; z-index: 10; max-height: calc(100% - 4rem);
+  .menu { position: absolute; top: 0rem; right: 0; width: fit-content; padding: 0 0.8rem 0 0.8rem; line-height: 1.8rem; z-index: 10;
           box-shadow: 0 0 8px dimgrey; background: ${theme.background}; border-radius: var(--rounded); border-color: black; border-style: solid; border-width: thin; }
 
   .menu:hover { box-shadow: 0 0 8px ${theme.hover}; }

package.json

@@ -19,8 +19,7 @@
     "type": "git",
     "url": "git+https://github.com/vladmandic/human.git"
   },
-  "dependencies": {
+  "dependencies": {},
-  },
   "peerDependencies": {},
   "devDependencies": {
     "@tensorflow/tfjs-backend-cpu": "^2.7.0",