|
window.runDetect = (model, video, canvas) => {
|
|
console.time('runDetect');
|
// detect objects in the image.
|
model.detect(video).then(predictions => {
|
console.timeEnd('runDetect');
|
console.log('Predictions: ', predictions);
|
|
const context = canvas.getContext('2d');
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
context.font = '10px Arial';
|
|
console.log('number of detections: ', predictions.length);
|
for (let i = 0; i < predictions.length; i++) {
|
context.beginPath();
|
context.rect(...predictions[i].bbox);
|
context.lineWidth = 2;
|
context.strokeStyle = 'green';
|
context.fillStyle = 'green';
|
context.stroke();
|
context.fillText(
|
predictions[i].score.toFixed(3) + ' ' + predictions[i].class, predictions[i].bbox[0],
|
predictions[i].bbox[1] > 10 ? predictions[i].bbox[1] - 5 : 10);
|
}
|
|
window.setTimeout(() => {
|
if (model.run) {
|
model.run(model, video, canvas);
|
}
|
}, 120);
|
});
|
}
|
|
window.runPosenet = (model, video, canvas) => {
|
|
console.time('runPosenet');
|
model.estimatePoses(video, { decodingMethod: 'multi-person', maxDetections: 5 }).then(poses => {
|
console.timeEnd('runPosenet');
|
console.log('Predictions: ', poses);
|
|
const ctx = canvas.getContext('2d');
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
ctx.font = '10px Arial';
|
|
poses.forEach(({ score, keypoints }) => {
|
console.log('keypoints: ', keypoints);
|
for (let i = 0; i < keypoints.length; i++) {
|
const keypoint = keypoints[i];
|
if (keypoint.score >= 0.5) {
|
const { y, x } = keypoint.position;
|
console.log(keypoint.part, ' : ', x, "x", y);
|
ctx.beginPath();
|
ctx.arc(x, y, 3, 0, 2 * Math.PI);
|
ctx.fillStyle = 'red';
|
ctx.fill();
|
}
|
}
|
const adjacentKeyPoints = posenet.getAdjacentKeyPoints(keypoints, 0.5);
|
console.log('adjacentKeyPoints: ', adjacentKeyPoints);
|
|
adjacentKeyPoints.forEach((keypoints) => {
|
const org = keypoints[0].position;
|
const dest = keypoints[1].position;
|
ctx.beginPath();
|
ctx.moveTo(org.x,org.y);
|
ctx.lineTo(dest.x,dest.y);
|
ctx.lineWidth = 2;
|
ctx.strokeStyle = 'green';
|
ctx.stroke();
|
});
|
|
});
|
|
window.setTimeout(() => {
|
if (model.run) {
|
model.run(model, video, canvas);
|
}
|
}, 120);
|
});
|
}
|
|
window.runDeeplab = (model, video, canvas) => {
|
|
console.time('runDeeplab');
|
model.segment(video).then(deeplabOutput => {
|
console.timeEnd('runDeeplab');
|
console.log('deeplabOutput: ', deeplabOutput);
|
const { legend, height, width, segmentationMap } = deeplabOutput;
|
|
const scalecanvas = document.createElement('canvas')
|
scalecanvas.width = width;
|
scalecanvas.height = height;
|
const segmentationMapData = new ImageData(segmentationMap, width, height)
|
var imageData = segmentationMapData.data;
|
for (var i = 0; i < imageData.length; i += 4) {
|
if ((imageData[i] == 0) && (imageData[i + 1] == 0) && (imageData[i + 2] == 0) && (imageData[i + 3] == 255)) {
|
imageData[i + 3] = 0;
|
} else {
|
imageData[i + 3] = 200;
|
}
|
}
|
scalecanvas.getContext('2d').putImageData(segmentationMapData, 0, 0);
|
|
const ctx = canvas.getContext('2d');
|
ctx.font = '16px Arial';
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
ctx.drawImage(scalecanvas, 0, 0, width, height, 0, 0, canvas.width, canvas.height);
|
|
let cnt = 0
|
Object.keys(legend).forEach((label) => {
|
const [red, green, blue] = legend[label];
|
|
ctx.fillStyle = `rgb(${red}, ${green}, ${blue})`;
|
ctx.fillRect(0, cnt * 16 + 16, 32, 16);
|
ctx.fillText(label, 40, cnt * 16 + 32);
|
cnt++
|
});
|
|
window.setTimeout(() => {
|
if (model.run) {
|
model.run(model, video, canvas);
|
}
|
}, 120);
|
});
|
}
|
|
|
window.runbodyPix = (model, video, canvas) => {
|
|
console.time('runbodyPix');
|
model.segmentMultiPersonParts(video).then(multiPersonPartSegmentation => {
|
console.timeEnd('runbodyPix');
|
|
console.log('multiPersonPartSegmentation: ', multiPersonPartSegmentation);
|
const coloredPartImageData = bodyPix.toColoredPartMask(multiPersonPartSegmentation);
|
|
const ctx = canvas.getContext('2d');
|
if (coloredPartImageData) {
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
bodyPix.drawMask(canvas, video, coloredPartImageData, 0.3);
|
}
|
|
window.setTimeout(() => {
|
if (model.run) {
|
model.run(model, video, canvas);
|
}
|
}, 120);
|
});
|
}
|
|
window.runblazeface = (model, video, canvas) => {
|
|
console.time('runblazeface');
|
model.estimateFaces(video, false).then(predictions => {
|
console.timeEnd('runblazeface');
|
|
console.log('predictions: ', predictions);
|
|
const ctx = canvas.getContext('2d');
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
for (let i = 0; i < predictions.length; i++) {
|
const start = predictions[i].topLeft;
|
const end = predictions[i].bottomRight;
|
const size = [end[0] - start[0], end[1] - start[1]];
|
|
ctx.rect(start[0], start[1], size[0], size[1]);
|
}
|
|
window.setTimeout(() => {
|
if (model.run) {
|
model.run(model, video, canvas);
|
}
|
}, 120);
|
});
|
}
|
