parent
782ca3ce36
commit
2dee5dc169
@ -1,55 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<canvas class="output_canvas" width="1280px" height="720px"></canvas>
|
|
||||||
</div>
|
|
||||||
<script type="module">
|
|
||||||
const videoElement = document.createElement("video");
|
|
||||||
const canvasElement = document.getElementsByClassName('output_canvas')[0];
|
|
||||||
const canvasCtx = canvasElement.getContext('2d');
|
|
||||||
|
|
||||||
function onResults(results) {
|
|
||||||
canvasCtx.save();
|
|
||||||
canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
|
|
||||||
canvasCtx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
|
|
||||||
if (results.multiHandLandmarks) {
|
|
||||||
for (const landmarks of results.multiHandLandmarks) {
|
|
||||||
console.log(landmarks)
|
|
||||||
drawConnectors(canvasCtx, landmarks, HAND_CONNECTIONS,
|
|
||||||
{color: '#00FF00', lineWidth: 5});
|
|
||||||
drawLandmarks(canvasCtx, landmarks, {color: '#FF0000', lineWidth: 2});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
canvasCtx.restore();
|
|
||||||
}
|
|
||||||
|
|
||||||
const hands = new Hands({locateFile: (file) => {
|
|
||||||
return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`;
|
|
||||||
}});
|
|
||||||
hands.setOptions({
|
|
||||||
maxNumHands: 2,
|
|
||||||
modelComplexity: 1,
|
|
||||||
minDetectionConfidence: 0.5,
|
|
||||||
minTrackingConfidence: 0.5
|
|
||||||
});
|
|
||||||
hands.onResults(onResults);
|
|
||||||
const camera = new Camera(videoElement, {
|
|
||||||
onFrame: async () => {
|
|
||||||
await hands.send({image: videoElement});
|
|
||||||
},
|
|
||||||
width: 1280,
|
|
||||||
height: 720
|
|
||||||
});
|
|
||||||
camera.start();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
Loading…
Reference in new issue