Hi Developers,
Lets see how to use the Webcam to take snapshot and save it using Laravel Application.
Lets create new laravel project camera
laravel new cameraLets create the neccessary routes
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');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
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);
}
}Lets create the blade file
resources/view/webcam.blade.php
<!DOCTYPE html>
<html>
<head>
<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; }
</style>
</head>
<body>
<div class="container">
<h1 class="text-center">Laravel webcam capture image and save from camera - ITSolutionsGuides</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>Lets Run the Laravel Application using the command
php artisan serveWe hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.
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.
ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.
Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides