Home Laravel How To Take Photo In Webcam and Save From Camera Laravel 9 ?

How To Take Photo In Webcam and Save From Camera Laravel 9 ?

by Shahriar Sagor

Today now in this article i will give you an example of laravel 9 webcam capture image and save from camera. Here we will see how to capture image from webcam and then store in database by using laravel 9. Here i will help you about an example of webcam take a photo laravel 9. So now in this tutorial i will give you a simple example of laravel 9 webcam take screenshot. Just need to follow bellow tutorial step of laravel 9 webcam take screenshot and then save from camera.

If we need to start the user webcam and then take picture from there. Then here i will help you about how to do it with laravel application. Here we will use webcam.js to capture photo from the camera.

Now in this example i will create two routes with GET and POST to store image in database. Now in blade file i will write the code about start webcam and capture image, Then we will store image from camera using post method. So let’s see the simple example how it’s done.

Step 1: Install Laravel 9

This is first step but this step is optional; however, if you do not have then need to created the laravel app. then you may go ahead and then execute the below command:

composer create-project laravel/laravel example-app
Step 2: Create Route

Now in this step we need to add the route for generate the view. So need open our route file and add the following route.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\WebcamController;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
  
Route::get('webcam', [WebcamController::class, 'index']);
Route::post('webcam', [WebcamController::class, 'store'])->name('webcam.capture');
Step 3: Create Controller

Now in this file i will write the code about store image into storage folder. so let’s need to copy below code and create the new controller:

app/Http/Controllers/WebcamController.php

<?php
    
namespace App\Http\Controllers;
    
use Illuminate\Http\Request;
use Storage;
  
class WebcamController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index()
    {
        return view('webcam');
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function store(Request $request)
    {
        $img = $request->image;
        $folderPath = "uploads/";
        
        $image_parts = explode(";base64,", $img);
        $image_type_aux = explode("image/", $image_parts[0]);
        $image_type = $image_type_aux[1];
        
        $image_base64 = base64_decode($image_parts[1]);
        $fileName = uniqid() . '.png';
        
        $file = $folderPath . $fileName;
        Storage::put($file, $image_base64);
        
        dd('Image uploaded successfully: '.$fileName);
    }
}
Step 5: Create View File

Now in the last step, we need to create the view file “webcam.blade.php” for start the webcam, so create webcam file and put the bellow code:

resources/view/webcam.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>laravel webcam capture image and save from camera - CodingsPoint.com</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <style type="text/css">
        #results { padding:20px; border:1px solid; background:#ccc; }
    </style>
</head>
<body>
    
<div class="container">
    <h1 class="text-center">Laravel webcam capture image and save from camera - CodingsPoint.com</h1>
     
    <form method="POST" action="{{ route('webcam.capture') }}">
        @csrf
        <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" 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>
</div>
    
<script language="JavaScript">
    Webcam.set({
        width: 490,
        height: 350,
        image_format: 'jpeg',
        jpeg_quality: 90
    });
    
    Webcam.attach( '#my_camera' );
    
    function take_snapshot() {
        Webcam.snap( function(data_uri) {
            $(".image-tag").val(data_uri);
            document.getElementById('results').innerHTML = '<img src="'+data_uri+'"/>';
        } );
    }
</script>
   
</body>
</html>

Read Also: How to Create Google Charts in Laravel 9 Tutorial Example ?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

You may also like