Created
February 5, 2022 07:23
-
-
Save InputBlackBoxOutput/1f8a3b3f9eaf780feb0cbd303f23ee51 to your computer and use it in GitHub Desktop.
Mediapipe: Face detection
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>Face detection</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]/face_detection.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: Face detection</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 onResultsFace(results) { | |
| canvasContext.save(); | |
| canvasContext.clearRect(0, 0, output.width, output.height); | |
| canvasContext.drawImage( | |
| results.image, | |
| 0, | |
| 0, | |
| output.width, | |
| output.height | |
| ); | |
| if (results.detections.length > 0) { | |
| drawRectangle(canvasContext, results.detections[0].boundingBox, { | |
| color: "blue", | |
| lineWidth: 4, | |
| fillColor: "#00000000", | |
| }); | |
| drawLandmarks(canvasContext, results.detections[0].landmarks, { | |
| color: "red", | |
| radius: 5, | |
| }); | |
| } | |
| canvasContext.restore(); | |
| } | |
| const faceDetection = new FaceDetection({ | |
| locateFile: (file) => { | |
| return `https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/${file}`; | |
| }, | |
| }); | |
| faceDetection.onResults(onResultsFace); | |
| const camera = new Camera(video, { | |
| onFrame: async () => { | |
| await faceDetection.send({ image: video }); | |
| }, | |
| width: 640, | |
| height: 480, | |
| }); | |
| camera.start(); | |
| new ControlPanel(document.createElement("div"), { | |
| selfieMode: true, | |
| minDetectionConfidence: 0.5, | |
| }).on((options) => { | |
| video.classList.toggle("selfie", options.selfieMode); | |
| faceDetection.setOptions(options); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment