Take Photo and Save From Webcam Camera Laravel

  Aug 2023
  Category: Laravel
Take Photo and Save From Webcam Camera Laravel

Hi Developers,

Lets see how to use the Webcam to take snapshot and save it using Laravel Application.

Install Laravel

Lets create new laravel project camera

laravel new camera

Create Route

Lets create the neccessary routes


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');

Create Controller

Lets create the WebcamController using the following command

php artisan make:controller WebcamController
in this controller we will move the images to the public path after uploading it


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

Create Blade File

Lets create the blade file


<!DOCTYPE html>
    <title>laravel webcam capture image and save from camera - ITSolutionsGuides</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; }
<div class="container">
    <h1 class="text-center">Laravel webcam capture image and save from camera - ITSolutionsGuides</h1>
    <form method="POST" action="{{ route('webcam.capture') }}">
        <div class="row">
            <div class="col-md-6">
                <div id="my_camera"></div>
                <input type=button value="Take Snapshot" onClick="take_snapshot()">
                <input type="hidden" name="image" class="image-tag">
            <div class="col-md-6">
                <div id="results">Your captured image will appear here...</div>
            <div class="col-md-12 text-center">
                <button class="btn btn-success">Submit</button>
<script language="JavaScript">
        width: 490,
        height: 350,
        image_format: 'jpeg',
        jpeg_quality: 90
    Webcam.attach( '#my_camera' );
    function take_snapshot() {
        Webcam.snap( function(data_uri) {
            document.getElementById('results').innerHTML = '<img src="'+data_uri+'"/>';
        } );

Run Laravel Application

Lets Run the Laravel Application using the command

php artisan serve

We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.

Subscribe for NewsLetter

Be the first to know about releases and tutorial news and solutions.

We care about your data in our privacy policy.


ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.

Contact US

ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.

whatsapp  gmail  instagram-new--v1  facebook-circled  twitter-circled  linkedin  github  pinterest 

Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides