AnthyG
commented
7 years ago You just need to include the tracking.js file (in the directory you downloaded, it should be located in /build).
So first of all, you need to add a video-element and a canvas-element to your html:
<div id="C">
<video id="video" width="800" height="600" preload autoplay loop muted></video>
<canvas id="canvas" width="800" height="600"></canvas>
</div>Here's some CSS to get a mirrored video:
#C {
width: 800px;
height: 600px;
position: relative;
margin: 0 auto;
}
/* Hide your video-element with this */
#video{
/*visibility: hidden;*/
}
#canvas {
position: absolute;
top: 0;
}
/* 'Mirror' video and canvas-elements */
#video,
#canvas {
-moz-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
filter: FlipH;
}Then you have to create a context for that in javascript as follows:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');This should be called, once the dom is loaded, so just put it into a script-tag right before </body>.
Next you have to create a tracker, for this example, I'll just use the ColorTracker already provided with tracking.js:
// Only track the color magenta
var colors = new tracking.ColorTracker(['magenta']);
colors.on('track', function(event) {
// Here is some sample code to draw dots onto the canvas
event.data.forEach(function(rect) {
var x = rect.x + rect.width / 2, // This will get the horizontal center of the rect
y = rect.y + rect.height / 2, // .. and the vertical
w = rect.width,
h = rect.height,
c = rect.color;
ctx.beginPath();
ctx.arc(x, y, 50 / w + 50 / h, 0, 2 * Math.PI, false);
ctx.fillStyle = c;
ctx.fill();
});
}
tracking.track('#video', colors, {
camera: true
});Instead of drawing a circle, you could draw anything you want, here are two more examples:
- Rectangle
ctx.strokeStyle = c; ctx.strokeRect(rect.x, rect.y, w, h); - Line (this requires to save the last coordinates..)
ctx.beginPath(); ctx.lineCap = "round"; ctx.lineJoin = "round"; ctx.moveTo(oldx, oldy); ctx.lineTo(x, y); ctx.strokeStyle = c; ctx.stroke();
oldx = x, oldy = y;
Also, you may just want to try this via localhost, if hosted on your own development machine (There's a npm-module called ['http-server'](https://www.npmjs.com/package/http-server) which does this just fine!)
Here's a link to the the [MDN-Site regarding canvas'](https://developer.mozilla.org/docs/Web/API/Canvas_API).
Hope I could help 😅 
lucasroth
devotionsolutions
Hi, I have some good experience using AR SDK, but not to much web development. I am stucked on how to deploy an existing example to a webserver. I tested uploading the whole tracking.js-master to a https server, and the examples work ok via internet. But can´t do the same for a new .html file done just by copying and pasting existing .html example. Please can you detail or give a hint on how to wrap the web app correctly.