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

add video drag&drop capability

pull/356/head
Vladimir Mandic 2021-06-07 08:38:16 -04:00
parent badbe57426
commit d598f1bdb4
2 changed files with 33 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -11,10 +11,8 @@ Repository: **<git+https://github.com/vladmandic/human.git>**
### **HEAD -> main** 2021/06/06 mandic00@live.com
- modularize build platform
- custom build tfjs from sources
### **update wasm to tfjs 3.7.0** 2021/06/06 mandic00@live.com
- modularize build platform
- enable body segmentation and background replacement in demo
- minor git corruption

41
demo/index.js
View File

@ -432,17 +432,19 @@ function webWorker(input, image, canvas, timestamp) {
// main processing function when input is webcam, can use direct invocation or web worker
function runHumanDetect(input, canvas, timestamp) {
// if live video
const live = input.srcObject && (input.srcObject.getVideoTracks()[0].readyState === 'live') && (input.readyState > 2) && (!input.paused);
if (!live && input.srcObject) {
const videoLive = (input.readyState > 2) && (!input.paused);
const cameraLive = input.srcObject && (input.srcObject.getVideoTracks()[0].readyState === 'live');
const live = videoLive || cameraLive;
if (!live) {
// stop ui refresh
if (ui.drawThread) cancelAnimationFrame(ui.drawThread);
if (ui.detectThread) cancelAnimationFrame(ui.detectThread);
ui.drawThread = null;
ui.detectThread = null;
// if we want to continue and camera not ready, retry in 0.5sec, else just give up
if (input.paused) log('camera paused');
else if ((input.srcObject.getVideoTracks()[0].readyState === 'live') && (input.readyState <= 2)) setTimeout(() => runHumanDetect(input, canvas), 500);
else log(`camera not ready: track state: ${input.srcObject.getVideoTracks()[0].readyState} stream state: ${input.readyState}`);
if (input.paused) log('video paused');
else if (cameraLive && (input.readyState <= 2)) setTimeout(() => runHumanDetect(input, canvas), 500);
else log(`video not ready: track state: ${input.srcObject ? input.srcObject.getVideoTracks()[0].readyState : 'unknown'} stream state: ${input.readyState}`);
clearTimeout(ui.drawThread);
ui.drawThread = null;
log('frame statistics: process:', ui.framesDetect, 'refresh:', ui.framesDraw);
@ -552,12 +554,33 @@ async function processImage(input, title) {
});
}
async function processVideo(input, title) {
status(`processing video: ${title}`);
const video = document.createElement('video');
const canvas = document.getElementById('canvas');
video.id = 'video-file';
video.controls = true;
video.loop = true;
// video.onerror = async () => status(`video loading error: ${video.error.message}`);
video.addEventListener('error', () => status(`video loading error: ${video.error.message}`));
video.addEventListener('canplay', async () => {
for (const m of Object.values(menu)) m.hide();
document.getElementById('samples-container').style.display = 'none';
document.getElementById('play').style.display = 'none';
canvas.style.display = 'block';
document.getElementById('btnStartText').innerHTML = 'pause video';
await video.play();
if (!ui.detectThread) runHumanDetect(video, canvas);
});
video.src = input;
}
// just initialize everything and call main function
async function detectVideo() {
document.getElementById('samples-container').style.display = 'none';
document.getElementById('canvas').style.display = 'block';
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
canvas.style.display = 'block';
if ((video.srcObject !== null) && !video.paused) {
document.getElementById('btnStartText').innerHTML = 'start video';
status('paused');
@ -743,9 +766,9 @@ async function processDataURL(f, action) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onload = async (e) => {
const dataURL = e.target.result;
if (action === 'process') {
await processImage(dataURL, f.name);
if (e.target.result.startsWith('data:image')) await processImage(e.target.result, f.name);
if (e.target.result.startsWith('data:video')) await processVideo(e.target.result, f.name);
document.getElementById('canvas').style.display = 'none';
}
if (action === 'background') {
@ -767,7 +790,7 @@ async function processDataURL(f, action) {
}
}
};
image.src = dataURL;
image.src = e.target.result;
}
resolve(true);
};