Created
February 5, 2022 07:24
-
-
Save InputBlackBoxOutput/744d11dfbdb5ab25c49d27ae57c10d04 to your computer and use it in GitHub Desktop.
Mediapipe: Hands
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Hands</title> | |
| <script | |
| src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/camera_utils.js" | |
| crossorigin="anonymous" | |
| ></script> | |
| <script | |
| src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/control_utils.js" | |
| crossorigin="anonymous" | |
| ></script> | |
| <script | |
| src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/drawing_utils.js" | |
| crossorigin="anonymous" | |
| ></script> | |
| <script | |
| src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/hands.js" | |
| crossorigin="anonymous" | |
| ></script> | |
| </head> | |
| <body> | |
| <style> | |
| .container { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| -moz-transform: translateX(-50%) translateY(-50%); | |
| -webkit-transform: translateX(-50%) translateY(-50%); | |
| transform: translateX(-50%) translateY(-50%); | |
| text-align: center; | |
| } | |
| </style> | |
| <div class="container"> | |
| <h2>Mediapipe: Hands</h2> | |
| <canvas id="output" width="640px" height="480px"></canvas> | |
| </div> | |
| <script> | |
| const video = document.createElement("video"); | |
| const output = document.getElementById("output"); | |
| const canvasContext = output.getContext("2d"); | |
| function onResultsHands(results) { | |
| canvasContext.save(); | |
| canvasContext.clearRect(0, 0, output.width, output.height); | |
| canvasContext.drawImage( | |
| results.image, | |
| 0, | |
| 0, | |
| output.width, | |
| output.height | |
| ); | |
| if (results.multiHandLandmarks && results.multiHandedness) { | |
| for ( | |
| let index = 0; | |
| index < results.multiHandLandmarks.length; | |
| index++ | |
| ) { | |
| const classification = results.multiHandedness[index]; | |
| const isRightHand = classification.label === "Right"; | |
| const landmarks = results.multiHandLandmarks[index]; | |
| drawConnectors(canvasContext, landmarks, HAND_CONNECTIONS, { | |
| color: isRightHand ? "#00FF00" : "#FF0000", | |
| }), | |
| drawLandmarks(canvasContext, landmarks, { | |
| color: isRightHand ? "#00FF00" : "#FF0000", | |
| fillColor: isRightHand ? "#FF0000" : "#00FF00", | |
| radius: (x) => { | |
| return lerp(x.from.z, -0.15, 0.1, 10, 1); | |
| }, | |
| }); | |
| } | |
| } | |
| canvasContext.restore(); | |
| } | |
| const hands = new Hands({ | |
| locateFile: (file) => { | |
| return `https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/${file}`; | |
| }, | |
| }); | |
| hands.onResults(onResultsHands); | |
| const camera = new Camera(video, { | |
| onFrame: async () => { | |
| await hands.send({ image: video }); | |
| }, | |
| width: 640, | |
| height: 480, | |
| }); | |
| camera.start(); | |
| new ControlPanel(document.createElement("div"), { | |
| selfieMode: true, | |
| maxNumHands: 2, | |
| minDetectionConfidence: 0.5, | |
| minTrackingConfidence: 0.5, | |
| }).on((options) => { | |
| video.classList.toggle("selfie", options.selfieMode); | |
| hands.setOptions(options); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment