This post will demonstrate how to save photographs taken with a webcam using Laravel 9. Laravel 9 allows us to observe how to capture image webcam and save them in a database. We will assist you by providing an illustration of a webcam taking a picture in Laravel 9.
You’ll see a straightforward example of laravel 9 webcam screenshot shooting in this tutorial. Simply load the following URL in your browser, enable your laptop’s webcam, and take a picture. We’ll save it to the Laravel storage directory after that.
Download Laravel 9
Download a brand-new Laravel application in this first step to get started building a webcam and taking samples of photos in Laravel.
composer create-project laravel/laravel example-appAdd Route
We must create a route in this stage in order to generate a view. Therefore, create the following route by opening your route file.
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');
});Create Controller
Now, if you want to use Laravel to create webcam capture imageand database storage, add the following code to 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);
}
}Create View File
To start the webcam capture image, we must build a view file called welcome.blade.php in the final stage. To do this, create the webcam capture image file and add the following code:
resources/view/welcome.blade.php
<!DOCTYPE html>
<html>
<head>
<title>laravel webcam capture image and save from camera - CodeSolutionStuff</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 - CodeSolutionStuff</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>Check it out by going to http://localhost:8000/wecam right away. I hope it will be useful to you.
