The source width is 0

[shakedlokits]

Getting an Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0. error while attempting to track face on video for one frame.

Apparently, chrome has an issue with element.offsetWidth and element.offsetHeight hence the lines:

  tracking.trackVideo_ = function(element, tracker) {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    var width;
    var height;

    var resizeCanvas_ = function() {
      width = element.offsetWidth;  <---------
      height = element.offsetHeight;  <-------- 
      canvas.width = width;
      canvas.height = height;
    };

are breaking the tracking function for new versions of chrome. This only happens when the canvas element is not defined as display:block.

Anyhow, changing these line to utilize element.width and element.heightfor chrome solves the problem.

[murat-aka]

#263

[kovacs-tamas]

The problem happens if the video element is not attached to the HTML. In this case the offsetWidth and offsetHeight properties don't exist. I would propose to change resizeCanvas_ function in tracking.js line 249. and 250. to the following:

width = element.offsetWidth || element.width; height = element.offsetHeight || element.height;

Unfortunately i don't have time to create a pull request this week, but it would be nice to see this improvement in the source

[nbpalomino]

Having same issue with Chrome v69 on Windows 10... Trying solution proposed by @kovacs-tamas and it works very nice for Chrome...

[BokangThoola]

make sure your media tags has both height and width dimenstions

[tylerdong]

I put the track function in the callback function onloadedmetadata of video and solve this problem。liek this:

   this.$refs.refVideo.onloadedmetadata = e => {
        this.$refs.refVideo.play()
        this.initTracker()
   }

   initTracker() {
        this.context = this.$refs.refCanvas.getContext("2d")    // 画布
        this.tracker = new tracking.ObjectTracker(['face'])     // tracker实例
        this.tracker.setStepSize(1.7)                           // 设置步长
        this.tracker.on('track', this.handleTracked)            // 绑定监听方法
        try {
            tracking.track('#video', this.tracker)      // 开始追踪
        } catch (e) {
            this.scanTip = "访问用户媒体失败，请重试"
        }
    }