Unable to take a photo from webcam using HTML5 and on the first page load

You need to try the following to take photo from webcam using HTML5:

Declare variables

var streaming = false,
   video = document.querySelector('#video'), canvas = document.querySelector('#canvas'),
   photo = document.querySelector('#photo'),
   startbutton = document.querySelector('#startbutton'),
   width = 320,
   height = 0;

Using getUserMedia

navigator.getMedia = ( navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                  navigator.mozGetUserMedia ||
                   navigator.msGetUserMedia);