Skip to content

Instantly share code, notes, and snippets.

@waltzaround
Created December 20, 2016 06:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save waltzaround/2b8b869a14afcaacc9fe85b7254d7c34 to your computer and use it in GitHub Desktop.
Save waltzaround/2b8b869a14afcaacc9fe85b7254d7c34 to your computer and use it in GitHub Desktop.
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 Face Detection</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrapper">
<h1>HTML5 GLASSES</h1>
<p>Created by Walter Lim. See full details</p>
<script type="text/javascript">
// http://wesbos.com/html5-video-face-detection-canvas-javascript for face detection
// https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm for how to call video from webcam into hardware
// http://paulrhayes.com/2012-11/fun-with-face-detection-canvas-and-webcam-video/
var video = document.querySelector("#videoElement");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
}
function videoError(e) {
// do something
}
</script>
<!-- Our Main Video Element -->
<video autoplay="true" id="videoElement">
</video>
<!-- Out Canvas Element for output -->
<canvas id="output" height="426" width="640" ></canvas>
<!-- div to track progress -->
<div id="elapsed_time">Press play for HTML5 Glasses!</div>
</div>
<script type="text/javascript" src="scripts/ccv.js"></script>
<script type="text/javascript" src="scripts/face.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment