Permalink
Cannot retrieve contributors at this time
65 lines (54 sloc)
1.91 KB
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>tracking.js - color with camera</title> | |
| <link rel="stylesheet" href="assets/demo.css"> | |
| <script src="../build/tracking-min.js"></script> | |
| <script src="../node_modules/dat.gui/build/dat.gui.min.js"></script> | |
| <script src="assets/stats.min.js"></script> | |
| <script src="assets/color_camera_gui.js"></script> | |
| <style> | |
| video, canvas { | |
| margin-left: 100px; | |
| margin-top: 35px; | |
| position: absolute; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="demo-title"> | |
| <p><a href="http://trackingjs.com" target="_parent">tracking.js</a> － choose the colors you want to detect through the controls on the right</p> | |
| </div> | |
| <div class="demo-frame"> | |
| <div class="demo-container"> | |
| <video id="video" width="600" height="450" preload autoplay loop muted controls></video> | |
| <canvas id="canvas" width="600" height="450"></canvas> | |
| </div> | |
| </div> | |
| <script> | |
| window.onload = function() { | |
| var video = document.getElementById('video'); | |
| var canvas = document.getElementById('canvas'); | |
| var context = canvas.getContext('2d'); | |
| var tracker = new tracking.ColorTracker(); | |
| tracking.track('#video', tracker, { camera: true }); | |
| tracker.on('track', function(event) { | |
| context.clearRect(0, 0, canvas.width, canvas.height); | |
| event.data.forEach(function(rect) { | |
| if (rect.color === 'custom') { | |
| rect.color = tracker.customColor; | |
| } | |
| context.strokeStyle = rect.color; | |
| context.strokeRect(rect.x, rect.y, rect.width, rect.height); | |
| context.font = '11px Helvetica'; | |
| context.fillStyle = "#fff"; | |
| context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11); | |
| context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22); | |
| }); | |
| }); | |
| initGUIControllers(tracker); | |
| }; | |
| </script> | |
| </body> | |
| </html> |