Laravel 9 Capture Image from Webcam and Store in Database

Hello Artisan,

This article will give you an example of laravel 9 webcam capturing images and saving from the camera. We can see capture images from the webcam and store in the database in laravel 9. we will help you to give an example of a webcam taking a photo laravel 9.

This tutorial will give you a simple example of laravel 9 webcam taking screenshots. Just you will open your browser with the following URL and allow your laptop webcam and then have to take an image and then we will save it into the storage directory in Laravel.

If you need to start using a webcam and take pictures from there. Then I will help you with how to do it with laravel. we will use webcam.js to capture photos from the laptop or phone camera.

Let's see the preview example of what we are going to make:

Step 1: Download Laravel 9

In this first step, download a fresh Laravel application to get started for creating a webcam and take photo examples in Laravel.

composer create-project laravel/laravel example-app

Step 2: Add Route

In this step, we need to add a route for generating a view. so open your route file and add the following route.

routes/web.php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\WebcamController;

Route::controller(WebcamController::class)->group(function () {
    Route::get('webcam', 'index')->name('webcam.capture');
    Route::post('webcam', 'store');
});

Step 3: Create Controller

Now if you want to create capture image from webcam and store in database in laravel, then add below code in your controller:

app/Http/Controllers/WebcamController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
  
class WebcamController extends Controller
{
  
    public function index()
    {
        return view('welcome');
    }
  
    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 4: Create View File

In the last step, we have to create a view file welcome.blade.php to start the webcam, so create the webcam file and put below code:

resources/view/welcome.blade.php

Read also: Laravel Vue Js Vuex Vue-Router and Sass Configuration Example

Now visit the following URL http://localhost:8000/wecam and test it. Hope it can help you.