Сделать 1 изображение с canvas

function onwebcam(videos)
{
 
    $('#video').css('display','block');
    $('#canvas').css('display','none');
 
navigator.getUserMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia;
 
if (navigator.getUserMedia) {
   navigator.getUserMedia({ audio: false, video: { width: 1333, height: 768 } },
 
      function(stream) {
                
     var videos = document.querySelector('video');
         videos.srcObject = stream;
         videos.onloadedmetadata = function(e) {
         videos.play();
         };
    
            $('#vklWebCam').css('display', 'none');
             $('#capture').css('display','block');
             
        $('#capture').click(function(){photo(videos);  
        }); 
          },
      function(err) {
         console.log("The following error occurred: " + err.name);
      }
   );
} else {
   console.log("getUserMedia not supported");
}
 
 
}
 
 
 
function photo(videos){
    $('#video').css('display','none');
    $('#canvas').css('display','block');
    
 
   var canvas=document.querySelector('canvas');
   var  context=canvas.getContext('2d');
 
 
 
  context.drawImage(videos, 0, 0, 300, 150);
  
 
  count=document.getElementsByClassName("slider__itemwebcam")[0].childElementCount;
  $('.slider__itemwebcam').append('<img src="" style="width:150px;height:120px;" id="photo'+count+'"/>');
  
  $('#photo'+count).attr('src', canvas.toDataURL('image/jpeg'));
 
  $('#capture').css('display','none');
    $('#vklWebCam').css('display', 'block');      
 $('#vklWebCam').click(function(){onwebcam()}); 
}

      function(stream) {
                
     var videos = document.querySelector('video');
         videos.srcObject = stream;
         videos.onloadedmetadata = function(e) {
         videos.play();
         };