Skip to content

D
domotikad
Switch branch/tag
Find file
Normal viewHistoryPermalink
example_sunglasses_jquery.htm 2.64 KB
Newer Older
nextime's avatar
First github commit
31e7b770
 
nextime committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Pick Your Glasses</title>
	
	<script src="js/compatibility.js"></script>
	<script src="js/smoother.js"></script>
	
	<script src="js/objectdetect.js"></script>
	<script src="js/objectdetect.frontalface.js"></script>
	
	<script src="https://code.jquery.com/jquery-1.8.0.min.js"></script>
	<script src="js/jquery.objectdetect.js"></script>
	
	<script>
	var smoother = new Smoother(0.85, [0, 0, 0, 0, 0]);
		
	$(window).load(function() {
	
		var video = $("#video").get(0);
		try {
			compatibility.getUserMedia({video: true}, function(stream) {
				try {
					video.src = compatibility.URL.createObjectURL(stream);
				} catch (error) {
					video.src = stream;
				}
				video.play();
				compatibility.requestAnimationFrame(tick);
			}, function (error) {
				alert("WebRTC not available");
			});
		} catch (error) {
			alert(error);
		}
		
		function tick() {
			compatibility.requestAnimationFrame(tick);
			
			if (video.readyState === video.HAVE_ENOUGH_DATA) {
				$(video).objectdetect("all", {scaleMin: 3, scaleFactor: 1.1, classifier: objectdetect.frontalface}, function(coords) {
					if (coords[0]) {
						coords = smoother.smooth(coords[0]);
						$("#glasses").css({
							"left":    ~~(coords[0] + coords[2] * 1.0/8 + $(video).offset().left) + "px",
							"top":     ~~(coords[1] + coords[3] * 0.8/8 + $(video).offset().top) + "px",
							"width":   ~~(coords[2] * 6/8) + "px",
							"height":  ~~(coords[3] * 6/8) + "px",
							"display": "block"
						});
					} else {
						$("#glasses").css("display", "none");
					}
				});
			}
		}
		
		$("#list img").click(function () {
			$("#glasses").attr("src", $(this).attr("src"));
		});
	});
	
    </script>
</head>

<body>
	<h1>Pick Your Glasses</h1>
	<video id="video" style="float:left; margin-right:1em;"></video>
	<div id="list">
		<img src="img/sunglasses_0.png" style="display:box; width:117px;">
		<img src="img/sunglasses_1.png" style="display:box; width:117px;">
		<img src="img/sunglasses_2.png" style="display:box; width:117px;">
		<img src="img/sunglasses_3.png" style="display:box; width:117px;">
		<img src="img/sunglasses_4.png" style="display:box; width:117px;">
		<img src="img/sunglasses_5.png" style="display:box; width:117px;">
		<img src="img/sunglasses_6.png" style="display:box; width:117px;">
		<img src="img/sunglasses_7.png" style="display:box; width:117px;">
	</div>
	
	<img id="glasses" src="img/sunglasses_0.png" style="position:absolute; display:none">
	
	Images are licensed under <img src="img/cc_by_sa_3.png"> by vectorarts.net
</body>
</html>