How can we upload image capture by webcam?

I try to implement image capture feature user can upload image which taken by webcam the problem is now that i'm unable to upload image on my local server here is my javascript and view

(function(){
        var video = document.getElementById('video'),
         canvas = document.getElementById('canvas'),
         context = canvas.getContext('2d'),
         photo = document.getElementById('photo'),
         avatar = document.getElementById('avatar'),
         venderUrl = window.URL || window.webkitURL;

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

        navigator.getMedia ({
            video : true,
            audio : false
        },function(stream){
          video.src = venderUrl.createObjectURL(stream);
          video.play();
        },function(error){
            //
            //
        });  

        document.getElementById('capture').addEventListener('click',function(){
         context.drawImage(video,0,0,400,300);
         photo.setAttribute('src',canvas.toDataURL('image/png'));
         avatar.setAttribute('value',canvas.toDataURL('image/png'));
        });                 
    })();

and view

<form action="/staff/students/confirmation_request" method="post"  enctype="multipart/form-data">
                            {{ csrf_field() }
                          
                                         <video id="video"></video>
                                         <a href="#" id="capture" class="btn-primary btn ">Capture</a>

                                        <canvas id="canvas"></canvas>
                                        <img id="photo" src="https://placekitten.com/g/400/300" alt="your image">
                                       <input name="avatar" id="avatar" value="" class="form-control" type="file" />
                                    

                          <div class="form-group">
                              <button type="submit" class="btn btn-block btn-primary">Submit</button>
                          </div>
                      </form>

thanks