Open shakedlokits opened 6 years ago
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
Having same issue with Chrome v69 on Windows 10... Trying solution proposed by @kovacs-tamas and it works very nice for Chrome...
make sure your media tags has both height and width dimenstions
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 = "访问用户媒体失败,请重试"
}
}
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
andelement.offsetHeight
hence the lines: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
andelement.height
for chrome solves the problem.