optimize camera resize on mobile

pull/50/head
Vladimir Mandic 2020-11-18 09:15:03 -05:00
parent 21c1649c06
commit 3f3d629fb9
13 changed files with 32 additions and 33 deletions

View File

@ -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: {
facingMode: ui.facing ? 'user' : 'environment',
resizeMode: ui.crop ? 'crop-and-scale' : 'none',
width: { ideal: window.innerWidth },
height: { ideal: window.innerHeight },
},
video: { facingMode: ui.facing ? 'user' : 'environment', resizeMode: ui.crop ? 'crop-and-scale' : 'none' },
};
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('memory shield', human.config, 'deallocate', (val) => human.config.deallocate = 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('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');

View File

@ -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">

View File

@ -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}; }

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -5,7 +5,7 @@
"imports": []
},
"demo/browser.js": {
"bytes": 22881,
"bytes": 23089,
"imports": [
{
"path": "dist/human.esm.js"
@ -26,7 +26,7 @@
"imports": []
},
"demo/menu.js": {
"bytes": 13845,
"bytes": 13814,
"imports": []
},
"dist/human.esm.js": {
@ -38,7 +38,7 @@
"dist/demo-browser-index.js.map": {
"imports": [],
"inputs": {},
"bytes": 2671743
"bytes": 2671871
},
"dist/demo-browser-index.js": {
"imports": [],
@ -51,16 +51,16 @@
"bytesInOutput": 7284
},
"demo/menu.js": {
"bytesInOutput": 11952
"bytesInOutput": 11921
},
"assets/gl-bench.js": {
"bytesInOutput": 7731
},
"demo/browser.js": {
"bytesInOutput": 17051
"bytesInOutput": 16997
}
},
"bytes": 1827550
"bytes": 1827465
}
}
}

View File

@ -9,7 +9,7 @@
"imports": []
},
"package.json": {
"bytes": 2281,
"bytes": 2278,
"imports": []
},
"src/age/age.js": {

2
dist/human.esm.json vendored
View File

@ -9,7 +9,7 @@
"imports": []
},
"package.json": {
"bytes": 2281,
"bytes": 2278,
"imports": []
},
"src/age/age.js": {

2
dist/human.json vendored
View File

@ -9,7 +9,7 @@
"imports": []
},
"package.json": {
"bytes": 2281,
"bytes": 2278,
"imports": []
},
"src/age/age.js": {

View File

@ -9,7 +9,7 @@
"imports": []
},
"package.json": {
"bytes": 2281,
"bytes": 2278,
"imports": []
},
"src/age/age.js": {

View File

@ -9,7 +9,7 @@
"imports": []
},
"package.json": {
"bytes": 2281,
"bytes": 2278,
"imports": []
},
"src/age/age.js": {

3
package-lock.json generated
View File

@ -214,7 +214,8 @@
"@tensorflow/tfjs-converter": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-converter/-/tfjs-converter-2.7.0.tgz",
"integrity": "sha512-SBpKYn/MkN8US7DeTcnvqHpvp/WKcwzpdgkQF+eHMHEbS1lXSlt4BHhOFgRdLPzy1gEC9+6P0VdTE8NQ737t/Q=="
"integrity": "sha512-SBpKYn/MkN8US7DeTcnvqHpvp/WKcwzpdgkQF+eHMHEbS1lXSlt4BHhOFgRdLPzy1gEC9+6P0VdTE8NQ737t/Q==",
"dev": true
},
"@tensorflow/tfjs-core": {
"version": "2.7.0",

View File

@ -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",