ambiser
/
human
mirror of https://github.com/vladmandic/human
9
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

added camera selection

pull/50/head
Vladimir Mandic 2020-10-16 11:23:59 -04:00
parent b2aeda6b21
commit 88a0293eb7
2 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo/demo-esm.html
View File

@ -4,11 +4,11 @@
<!-- <script src="../assets/tf-backend-wasm.min.js"></script> --> <!-- <script src="../assets/tf-backend-wasm.min.js"></script> -->
<script src="./demo-esm.js" type="module"></script> <script src="./demo-esm.js" type="module"></script>
</head> </head>
<body style="margin: 0; background: black; color: white; font-family: 'Segoe UI'; font-variant: small-caps"> <body style="margin: 0; background: black; color: white; font-family: 'Segoe UI'; font-variant: small-caps; overflow-x: hidden">
<div id="main"> <div id="main">
<video id="video" playsinline style="display: none"></video> <video id="video" playsinline style="display: none"></video>
<image id="image" src="" style="display: none"></video> <image id="image" src="" style="display: none"></video>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
<div id="log">Human library</div> <div id="log" style="position: fixed; bottom: 0">Human library</div>
</div> </div>
</body> </body>

32
demo/demo-esm.js
View File

@ -8,6 +8,7 @@ const ui = {
baseFont: 'small-caps 1.2rem "Segoe UI"', baseFont: 'small-caps 1.2rem "Segoe UI"',
baseLineWidth: 16, baseLineWidth: 16,
busy: false, busy: false,
facing: 'user',
}; };
const config = { const config = {
@ -17,7 +18,7 @@ const config = {
enabled: true, enabled: true,
detector: { maxFaces: 10, skipFrames: 10, minConfidence: 0.5, iouThreshold: 0.3, scoreThreshold: 0.7 }, detector: { maxFaces: 10, skipFrames: 10, minConfidence: 0.5, iouThreshold: 0.3, scoreThreshold: 0.7 },
mesh: { enabled: true }, mesh: { enabled: true },
iris: { enabled: false }, iris: { enabled: true },
age: { enabled: true, skipFrames: 10 }, age: { enabled: true, skipFrames: 10 },
gender: { enabled: true }, gender: { enabled: true },
emotion: { enabled: true, minConfidence: 0.5, useGrayscale: true }, emotion: { enabled: true, minConfidence: 0.5, useGrayscale: true },
@ -286,7 +287,6 @@ function setupUI() {
style.innerHTML = ` style.innerHTML = `
.qs_main { font: 1rem "Segoe UI"; } .qs_main { font: 1rem "Segoe UI"; }
.qs_label { font: 0.8rem "Segoe UI"; } .qs_label { font: 0.8rem "Segoe UI"; }
.qs_title_bar { display: none; }
.qs_content { background: darkslategray; } .qs_content { background: darkslategray; }
.qs_container { background: transparent; color: white; margin: 6px; padding: 6px; } .qs_container { background: transparent; color: white; margin: 6px; padding: 6px; }
.qs_checkbox_label { top: 2px; } .qs_checkbox_label { top: 2px; }
@ -297,10 +297,10 @@ function setupUI() {
const video = document.getElementById('video'); const video = document.getElementById('video');
const canvas = document.getElementById('canvas'); const canvas = document.getElementById('canvas');
if (!video.paused) { if (!video.paused) {
document.getElementById('log').innerText = 'Paused ...'; document.getElementById('log').innerText += '\nPaused ...';
video.pause(); video.pause();
} else { } else {
document.getElementById('log').innerText = 'Starting Human Library ...'; document.getElementById('log').innerText += '\nStarting Human Library ...';
video.play(); video.play();
} }
runHumanDetect(video, canvas); runHumanDetect(video, canvas);
@ -342,6 +342,11 @@ function setupUI() {
}); });
settings.addHTML('title', 'UI Options'); settings.hideTitle('title'); settings.addHTML('title', 'UI Options'); settings.hideTitle('title');
settings.addBoolean('Use Web Worker', false); settings.addBoolean('Use Web Worker', false);
settings.addBoolean('Camera Front/Back', true, (val) => {
ui.facing = val ? 'user' : 'environment';
// eslint-disable-next-line no-use-before-define
setupCamera();
});
settings.addBoolean('Draw Boxes', true); settings.addBoolean('Draw Boxes', true);
settings.addBoolean('Draw Points', true); settings.addBoolean('Draw Points', true);
settings.addBoolean('Draw Polygons', true); settings.addBoolean('Draw Polygons', true);
@ -358,19 +363,26 @@ async function setupCamera() {
const canvas = document.getElementById('canvas'); const canvas = document.getElementById('canvas');
const output = document.getElementById('log'); const output = document.getElementById('log');
const live = video.srcObject ? ((video.srcObject.getVideoTracks()[0].readyState === 'live') && (video.readyState > 2) && (!video.paused)) : false; const live = video.srcObject ? ((video.srcObject.getVideoTracks()[0].readyState === 'live') && (video.readyState > 2) && (!video.paused)) : false;
log('Setting up camera: live:', live); log(`Setting up camera: live: ${live} facing: ${ui.facing}`);
// setup webcam. note that navigator.mediaDevices requires that page is accessed via https // setup webcam. note that navigator.mediaDevices requires that page is accessed via https
if (!navigator.mediaDevices) { if (!navigator.mediaDevices) {
const msg = 'Camera access not supported'; const msg = 'Camera access not supported';
output.innerText = msg; output.innerText += '\n' + msg;
log(msg); log(msg);
return null; return null;
} }
const stream = await navigator.mediaDevices.getUserMedia({ let stream;
try {
stream = await navigator.mediaDevices.getUserMedia({
audio: false, audio: false,
video: { facingMode: 'user', width: window.innerWidth, height: window.innerHeight }, video: { facingMode: ui.facing, width: window.innerWidth, height: window.innerHeight },
}); });
video.srcObject = stream; } catch (err) {
output.innerText += '\nCamera permission denied';
log(err);
}
if (stream) video.srcObject = stream;
else return null;
return new Promise((resolve) => { return new Promise((resolve) => {
video.onloadeddata = async () => { video.onloadeddata = async () => {
video.width = video.videoWidth; video.width = video.videoWidth;
@ -409,7 +421,7 @@ async function main() {
// const input = await setupImage(); // const input = await setupImage();
const msg = `Human ready: version: ${human.version} TensorFlow/JS version: ${human.tf.version_core}`; const msg = `Human ready: version: ${human.version} TensorFlow/JS version: ${human.tf.version_core}`;
document.getElementById('log').innerText = msg; document.getElementById('log').innerText += '\n' + msg;
log(msg); log(msg);
// run actual detection. if input is video, it will run in a loop else it will run only once // run actual detection. if input is video, it will run in a loop else it will run only once