› ›

Render an Image over a live video capture

mokargasmokargas
edited September 2015 in p5.js Library Questions

Hey all, new to Processing/P5.js

I'm trying to render a PNG over a live video capture that is using clmtracker (3rd party face tracking js). Code is below.

I get an error:

Uncaught TypeError: Cannot read property '_imageMode' of undefined (On line 19413 of p5.js).

Am I approaching this wrong? Note: I can see the png is loaded in Chrome's Network tools.

<html>

  <head>
    <script src="bower_components/clmtrackr/clmtrackr.js"></script>
    <script src="bower_components/clmtrackr/models/model_pca_20_svm.js"></script>
    <script src="bower_components/p5.js/lib/p5.js"></script>
    <script src="bower_components/p5.js/lib/addons/p5.dom.js"></script>
    <script>
        var ctracker;
        var img;
      function setup() {

        img = loadImage("/src/images/watermark.png"); 

        // setup camera capture
        var videoInput = createCapture();
        videoInput.size(400, 300);
        videoInput.position(0, 0);

        var cnv = createCanvas(400, 300);
        cnv.position(0, 0);

        //Tracker
        ctracker = new clm.tracker();
        ctracker.init(pModel);
        ctracker.start(videoInput.elt);
        noStroke();
      }
      function draw() {
        clear();

        // Get face marker positions
        var positions = ctracker.getCurrentPosition();

        //Render watermark        
        image(img, 0, 0);

        for (var i=0; i<positions.length; i++) {
            var x = positions[i][0];
            var y = positions[i][1];
            console.log('x:'+x+' y:'+y);
        }
      }
    </script>

    <style> body { padding: 0; margin: 0} </style>

  </head>

  <body>
  </body>

</html>
Tagged:

Answers

Sign In or Register to comment.