Laravel save photos from webcam in a folder

Question

I'm having some trouble with saving photos from webcam using ajax. Photos should be taken and saved and the page should not be reloaded. The webcam photos gets saved in the folder if I use the preventDefault() function but the page gets reloaded. So any help in providing the solution for saving the image without having the page to reload

Here's my blade

<form id ="web_cam" enctype="multipart/form-data">
{{ csrf_field() }} 
<div class="row"> 
    <div class="col-md-6"> 
        <div id="my_camera"></div> 
        <br/> 
        <!-- <input type=button value="Take Snapshot" onClick="take_snapshot()">  -->
        <input type="hidden" id ="image" name="image" class="image-tag"> 
    </div> 
    <div class="col-md-6"> 
        <div id="results">Your captured image will appear here...</div> 
    </div> 
    <div class="col-md-12 text-center"> 
        <br/> 
        <button class="btn btn-success">Submit</button> 
    </div> 
</div> 
</form>

Script

$(function(){  
   setInterval(function(){
       $('#web_cam').submit()
     //$('#web_cam').on('submit', function(e){
            //e.preventDefault();
            let image = $('#image').val();

            $.ajax({
            url: "{{ route('webcam_upload') }}",
            type:"post",
            dataType:'json',
            data: {
        "_token": "{{ csrf_token() }}",
        image:image},
  
            contentType: false,
            cache: false,
            processData: false,
            success:function(data){
                console.log(data);
            },
            error:function(data){
                console.log(error);
            }
                                                                                                        
      
      }
      );
    },10001);
});


Webcam.set({ 
    width: 490, 
    height: 390, 
    image_format: 'jpeg', 
    jpeg_quality: 90 
}); 


Webcam.attach( '#my_camera' ); 
    setInterval(function take_snapshot() { 
        
        Webcam.snap( function(data_uri) { 
            $(".image-tag").val(data_uri); 
            document.getElementById('results').innerHTML = '<img src="'+data_uri+'"/>'; 
    } ); 
},10000);

Controller

 public function webcam(Request $request)
    {
      

      $file_path = "webcam_captures/";
      if (!file_exists($file_path)) {
        // path does not exist
        File::makeDirectory($file_path, $mode = 0777, true, true);
        }
        $filename="";
       
          $webcam_image = $request->image;
          //$webcam_image = $request->input('image');
          //dd($webcam_image);
          $image_parts = explode(";base64,", $webcam_image); // split the base64 image
          $image_type_aux = explode("image/", $image_parts[0]); 
          $image_type = $image_type_aux[1];
          $image_base64 = base64_decode($image_parts[1]); // decode the second part of the image
          $filename = uniqid() . '.png';
          $file = $file_path . $filename; 
          file_put_contents($file, $image_base64);
          
  
         return response()->json(['success'=>'Image taken!']);
         //return redirect()->route('parent_testpage');
    }

Route

Route::post('/webcam_upload', 'testController@webcam')->name('webcam_upload');

Answer 1

Laravel is used at server side. It does not deal with your hardware. For this you need to take help of javascript. Javascript can interact with your webcam, microphone as well as other device hardware. For your starting point you can refer RecordRTC | WebRTC Audio+Video+Screen Recording great library.

Try to avoid flash based implementation. Because most of the browsers suppose to remove the support of flash.

Even if you want laravel example refer this page link