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

fixed webcam initialization

pull/50/head
Vladimir Mandic 2020-10-17 10:25:27 -04:00
parent 5754e5e36e
commit 4fea8e9ff1
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
demo/browser.js
View File

@ -98,11 +98,13 @@ 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} facing: ${ui.facing}`); let msg = `Setting up camera: live: ${live} facing: ${ui.facing}`;
output.innerText += `\n${msg}`;
log(msg);
// 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'; msg = 'Camera access not supported';
output.innerText += '\n' + msg; output.innerText += `\n${msg}`;
log(msg); log(msg);
return null; return null;
} }
@ -127,7 +129,8 @@ async function setupCamera() {
if (live) video.play(); if (live) video.play();
ui.busy = false; ui.busy = false;
// do once more because onresize events can be delayed or skipped // do once more because onresize events can be delayed or skipped
if (video.width !== window.innerWidth) await setupCamera(); if (video.width > window.innerWidth) await setupCamera();
output.innerText += `\nCamera resolution: ${video.width} x ${video.height}`;
resolve(video); resolve(video);
}; };
}); });
@ -229,7 +232,7 @@ async function detectVideo() {
const canvas = document.getElementById('canvas'); const canvas = document.getElementById('canvas');
ui.baseFont = ui.baseFontProto.replace(/{size}/, '1.2rem'); ui.baseFont = ui.baseFontProto.replace(/{size}/, '1.2rem');
ui.baseLineHeight = ui.baseLineHeightProto; ui.baseLineHeight = ui.baseLineHeightProto;
if (!video.paused) { if ((video.srcObject !== null) && !video.paused) {
document.getElementById('log').innerText += '\nPaused ...'; document.getElementById('log').innerText += '\nPaused ...';
video.pause(); video.pause();
} else { } else {

2
demo/index.html
View File

@ -20,7 +20,7 @@
<body style="margin: 0; background: black; color: white; font-family: 'Segoe UI'; font-size: 16px; font-variant: small-caps; overflow-x: hidden"> <body style="margin: 0; background: black; color: white; font-family: 'Segoe UI'; font-size: 16px; font-variant: small-caps; overflow-x: hidden">
<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" style="margin: 0 auto"></canvas>
<div id="samples" style="display: flex; flex-wrap: wrap"></div> <div id="samples" style="display: flex; flex-wrap: wrap"></div>
<div id="log" style="position: fixed; bottom: 0">Human library</div> <div id="log" style="position: fixed; bottom: 0">Human library</div>
</body> </body>