Chrome Not Autoplaying Video Stream in Canvas

I was recently tinkering with some demo code that David Walsh put together and, after setting up my own demo using the code mentioned in the post, I noticed some odd behavior in Chrome. Whenever you loaded the page and gave Chrome permission to access your webcam, the camera stream would not show up until you triggered a repaint on the page (e.g., resizing the developer toolbar or clicking the “snap picture” button). While I don’t really understand why this is the case, I did figure out a way to fix it:

video.addEventListener('canplay', function(e) { =;

Here I’ve attached an event listener to the canplay event of the video element. When the event fires, it sets the value of the display property to whatever it happens to be currently. While this code doesn’t exactly do anything in and of itself, it does force a recalculate style event to fire. This is turn makes the video stream visible.

Feedback Requested

I’m sorry I don’t have any information as to the exactly cause of this issue. If David Walsh or anyone else out there wants to shed some light on the issue, please leave a comment below.