Designing and Engineering a Better Tomorrow
Unlisted
Edited
May 21, 2023
Paused
htl.html`<style>
#video {
transform: scaleX(${flipImage ? -1 : 1});
}
</style>`
webcamContainer = createWebcamContainer()
detectObjectsInWebcam(activateWebcam, webcamContainer, detector)
async function detectAndAnnotateVideo(webcamCanvas, detector) {
const [video, ctx, imgHeight, imgWidth] = webcamCanvas;
/* Get hands list as per:
https://github.com/tensorflow/tfjs-models/tree/master/hand-pose-detection/src/mediapipe#run-inference
*/
const estimationConfig = { flipHorizontal: true };
const hands = await detector.estimateHands(video, estimationConfig);
//storePredictions(hands);
/* Sample Output:
[
{
score: 0.8,
handedness: ‘Right’,
keypoints: [
{x: 105, y: 107, name: "wrist"},
{x: 108, y: 160, name: "pinky_tip"},
...
]
}
]
*/
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
if (hands.length != 0) {
if (hands[0].score >= 0.5) {
// Removes loading message
webCamMessage.querySelector("#status").innerHTML = "";
webCamMessage.querySelector("#status").className = "";
ctx.fillText(
`${hands[0].handedness} Hand, Score: ${hands[0].score}`,
d3.mean(hands[0].keypoints.map((kp) => kp.x)),
d3.mean(hands[0].keypoints.map((kp) => kp.y))
);
//hands[0].keypoints.forEach((point) => {
// ctx.fillText(point.name, point.x, point.y);
//});
} // score >= .5
} // hands.length != 0
// loop forever
requestAnimationFrame(() => {
detectAndAnnotateVideo(webcamCanvas, detector);
});
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
