Created
March 29, 2018 00:24
-
-
Save phpsmarter/00d0e87ab1742df1bdc44a91b806fff9 to your computer and use it in GitHub Desktop.
google FaceDection
This file contains 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" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<title>Live Face Detector</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<style> | |
.error-msg { | |
color: greenyellow; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="main-container"> | |
<video width="0" height="0" autoplay></video> | |
<canvas width="640" height="480"></canvas> | |
<div class="error-msg"></div> | |
</div> | |
<script> | |
const errorMsg = document.querySelector('.error-msg'); | |
if ('FaceDetector' in window) { | |
// Initializing vars & consts | |
const video = document.querySelector('video'); | |
const canvas = document.querySelector('canvas'); | |
const context = canvas.getContext('2d'); | |
const faceDetector = new FaceDetector(); | |
// Get access to the camera | |
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { | |
navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) { | |
video.src = window.URL.createObjectURL(stream); | |
video.play(); | |
}); | |
} | |
async function detect() { | |
const faces = await faceDetector.detect(canvas); | |
drawFaces(faces); | |
} | |
// Draw face highlighters | |
async function drawFaces(faces) { | |
faces.forEach(face => { | |
const { width, height, top, left } = face.boundingBox; | |
context.strokeStyle = '#00FF00'; | |
context.lineWidth = 5; | |
context.strokeRect(left, top, width, height); | |
face.landmarks.forEach(landmark => { | |
context.lineWidth = 1; | |
if (landmark.type === 'eye') { | |
context.strokeStyle = '#FF0000'; | |
context.strokeRect(landmark.location.x - 20, landmark.location.y - 20, 40, 20); | |
} else { | |
context.strokeStyle = '#0000FF'; | |
context.strokeRect(landmark.location.x - 40, landmark.location.y - 40, 80, 40); | |
} | |
}); | |
}); | |
} | |
setInterval(() => { | |
context.drawImage(video, 0, 0, canvas.width, canvas.height); | |
detect(); | |
}, 100); | |
} else { | |
// Find if user is using Chrome, and if yes, check version number. Face Detection API has been in the browser since M57 | |
const chromeVer = /Chrome\/(\d+)/.exec(navigator.userAgent); | |
if (chromeVer && parseInt(chromeVer[1]) > 56) { | |
errorMsg.textContent = "Looks like your version of Chrome supports FaceDetector API but you haven't enabled it (since experimental features in Chrome are disabled by default). You can enable it by going to the URL 'chrome://flags#enable-experimental-web-platform-features' and enabling the 'Experimental Web Platform features'" | |
} else { | |
errorMsg.textContent = "Looks like your browser does not support FaceDetector API. If you're on Chrome, please make sure you've the latest update and enable the #enable-experimental-web-platform-features flag from chrome://flags"; | |
} | |
} | |
</script> | |
<!-- Global site tag (gtag.js) - Google Analytics --> | |
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-116311938-1"></script> | |
<script> | |
window.dataLayer = window.dataLayer || []; | |
function gtag() { dataLayer.push(arguments); } | |
gtag('js', new Date()); | |
gtag('config', 'UA-116311938-1'); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment