ИГРЫ #668
Description
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>
<style>
body { margin:0; overflow:hidden; }
video { transform: scaleX(-1); }
#dot {
width: 30px;
height: 30px;
background: red;
position: absolute;
border-radius: 50%;
}
</style>
<script>
const video = document.getElementById("video");
const dot = document.getElementById("dot");
// HANDS
const hands = new Hands({
locateFile: (file) =>
`https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`
});
hands.setOptions({
maxNumHands: 1,
minDetectionConfidence: 0.7,
minTrackingConfidence: 0.7
});
// RESULT
hands.onResults(results => {
if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
let finger = results.multiHandLandmarks[0][8];
let x = window.innerWidth - (finger.x * window.innerWidth);
let y = finger.y * window.innerHeight;
dot.style.left = x + "px";
dot.style.top = y + "px";
}
});
// CAMERA
const camera = new Camera(video, {
onFrame: async () => {
await hands.send({ image: video });
},
width: 400,
height: 300
});
camera.start();
</script>