Problems on webpack and Symfony installation

[AlboCode]

Hi , i'm studying clmtrackr, and i want to add it to my symfony project .
I setup everything and seem i can get access to it , but when i run the project getCurrentPosition return false and i get a weird error that maybe is related to the dependency of jsfeat , but i'm not sure.
I share some code , there is my app.js file

import clm from 'clmtrackr';


console.log('Hello Webpack Encore! Edit me in assets/js/app.js');


console.log("video hello");
const constraints = {
   video: true
};

const video = document.getElementsByTagName("video")[0];
console.log(video);
navigator.mediaDevices.getUserMedia(constraints).
then((stream) => {
   console.log(stream);
   video.srcObject = stream

   var ctrack = new clm.tracker();
   //debugger;
   console.log("START!");
   var canvas = document.getElementById('mycanvas');
   ctrack.init();
   console.log(document.querySelector('video'));
   ctrack.start(video);
   //let dueContext = this.canvas.getContext('2d');
   // console.log(document.getElementById("monaimage"));
   //this.ctrack.start(document);
   let update = () => {
       window.requestAnimationFrame(update);
       let positions = ctrack.getCurrentPosition();

       ctrack.draw(canvas);
       console.log("position: " + positions);
       // console.log("LOL!@#!$")

   };
   update();
});

and that's the error i get

blob:http://localhost:8000/e5a722f8-80e3-4305-85b5-40e629b26fa5:5 Uncaught ReferenceError: module is not defined
at blob:http://localhost:8000/e5a722f8-80e3-4305-85b5-40e629b26fa5:5
at self.onmessage (blob:http://localhost:8000/e5a722f8-80e3-4305-85b5-40e629b26fa5:5)

I hope that someone can help me , thanks

[laurent-kouassi]

Hi @AlboCode I'm currently facing the same issue. I'm implementing clmtrackr in my project too.

Have you got it working?

Thank you

[AlboCode]

Hi @laurent-kouassi , nothing to do , I also tryed to install jsfeat but it didn't works.
I will keep work on it .

[laurent-kouassi]

@AlboCode please let me know asap as you find any better solution.

I will do let you know if I get it working too.

Keep it touch.

Thank you 🙂

[laurent-kouassi]

@AlboCode by any chance does it has something to do with canvas size and video size as they have to be size within the same width and hight?

[AlboCode]

@AlboCode by any chance does it has something to do with canvas size and video size as they have to be size within the same width and hight?

@laurent-kouassi my video and canvas have the same size .
that's my html code.

 <video id="videoel" width="400" height="300" preload="auto" autoplay>
    </video>
    <canvas id="mycanvas" style="position: absolute;top: 0;left: 0;" width="400" height="300"></canvas>

I also tried to process an image , but seems that something miss.

[janrozic]

It worked for me when I set useWebWorkers to false in parameters. It might have something to do with how the Worker is created?

var ctrack = new clmtrackr.tracker({
  faceDetection: {
    useWebWorkers: false,
  },
});

[laurent-kouassi]

@janrozic that didn't work for me. Have you installed jsfeat? If yes how does it affect your framework webpack.

Thank you,