Laravel 将网络摄像头的照片保存在文件夹中

Question

我在使用 ajax 从网络摄像头保存照片时遇到了一些问题。 应拍摄并保存照片，并且不应重新加载页面。 如果我使用 preventDefault() function，网络摄像头照片会保存在文件夹中，但页面会重新加载。 因此，在提供无需重新加载页面的情况下保存图像的解决方案方面的任何帮助

这是我的刀片

<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>

脚本

$(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::post('/webcam_upload', 'testController@webcam')->name('webcam_upload');

Answer 1

Laravel 用于服务器端。 它不处理您的硬件。 为此，您需要获得 javascript 的帮助。 Javascript 可以与您的网络摄像头、麦克风以及其他设备硬件进行交互。 对于您的起点，您可以参考RecordRTC | WebRTC 音频+视频+屏幕录制大库。

尽量避免基于 flash 的实现。 因为大多数浏览器都假设取消对 flash 的支持。

即使您想要 laravel 示例，请参阅此页面链接