Search the Community

Hi Guys Im looking for way to integrate augmented reality into the toolkit if any body has ideas about this please let me now. so far I'm trying with trackingjs, I figure if we can track faces, color etc we can bring the video in vr mode camera and stick stuff in the 3d world using trackingjs syst. any way I know there other libraries but I though this is a nice and clean way to do some augmented reality and it has nothing to do withe Babylon framework yet . @MackeyK24 here my initial code attempt , I put the #video div on the index.hmtl but I dont get the camera working yet je je I need to render the camera's device into the canvas @Deltakosh is ther a way to do this already? see the ~ref link public ready(): void { // this.scene execute when ready var scene = this.scene; this.scene.activeCamera.attachControl(this.engine.getRenderingCanvas()); this.manager.enableUserInput(); var tracker: any = new tracking.ObjectTracker(['face']); tracker.setInitialScale(4); tracker.setStepSize(2); tracker.setEdgesDensity(0.1); tracking.track('#video', tracker); tracker.on('track', function (event) { var canvas = this.engine.getRenderingCanvas(); var context = canvas.getContext('2d'); tracker.on('track', function (event) { context.clearRect(0, 0, canvas.width, canvas.height); event.data.forEach(function (rect) { context.strokeStyle = '#a64ceb'; 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); }); }); }); };}