Tracking whit responsive video

[JasarOrion]

im trying to use track.js whit a responsive embed webcam

<style>
    canvas {
        position: absolute;
        z-index:9999;
    }
    video {     
        width: 100%;
        height: auto;
    }
</style>
<div class="demo-frame">
                                        <div class="demo-container">
                                            <canvas id="canvas" width="320" height="240"></canvas>
                                          <video id="video" preload autoplay loop muted></video>

                                        </div>
                                    </div>      
<script language="JavaScript">

            window.onload = function() {

              var video = document.getElementById('video');
              var canvas = document.getElementById('canvas');

                $("#canvas").width($("#video").width());
                $("#canvas").height($("#video").height());
              var context = canvas.getContext('2d');
              var tracker = new tracking.ObjectTracker('face');
              tracker.setInitialScale(4);
              tracker.setStepSize(2);
              tracker.setEdgesDensity(0.1);
              tracking.track('#video', tracker, { camera: true });
              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);
                });
              });

            };

    </script>  

bit it isnt working , the tracker square as broken.