Webcam Capture Image and Image Save to Database Using Laravel & Jquery Plugin.

Supported in all laravel version..........

First create laravel project using this command below:

composer create-project laravel/laravel Webcam-laravel

Create a database in phpmyadmin using any name like 'webcam_laravel'

Create a model and migrating file using this command below:

php artisan make:model Info -m

Create a controller using this command below:

php artisan make:controller InfoController

Now,Create a View name 'index.blade.php'.

Create two routes in 'web.php' given below:

Route::get('/', 'InfoController@index');

Route::post('/', 'InfoController@create')->name('info.create');

Update your migration file like this below:

<?php

	use Illuminate\Database\Migrations\Migration;
	use Illuminate\Database\Schema\Blueprint;
	use Illuminate\Support\Facades\Schema;

	class CreateInfosTable extends Migration
	{
	/**
	* Run the migrations.
	*
	* @return void
	*/
	public function up()
	{
	Schema::create('infos', function (Blueprint $table) {
	$table->bigIncrements('id');
	$table->string('name')->nullable();
	$table->integer('age')->nullable();
	$table->string('image')->nullable();
	$table->timestamps();
	});
	}

	/**
	* Reverse the migrations.
	*
	* @return void
	*/
	public function down()
	{
	Schema::dropIfExists('infos');
	}
	}

Then, run this command: php artisan migrate

After modify your Info model like below and set fillable property:

<?php

	namespace App;

	use Illuminate\Database\Eloquent\Model;

	class Info extends Model
	{
	protected $fillable = ['name','age','image'];
	}

Craete a directory name 'uploads' in public folder.

Make changes your InfoController like below:

<?php

	namespace App\Http\Controllers;

	use App\Info;
	use Illuminate\Http\Request;

	class InfoController extends Controller
	{
	public function index()
	{
	return view('index');
	}


	public function create(Request $request)
	{
	$img = $request->get('image');
	$folderPath = "uploads/";
	$image_parts = explode(";base64,", $img);

	foreach ($image_parts as $key => $image){
	$image_base64 = base64_decode($image);
	}

	$fileName = uniqid() . '.png';
	$file = $folderPath . $fileName;
	file_put_contents($file, $image_base64);

	Info::create([
	'name' => request('name'),
	'age' => request('age'),
	'image' => $fileName,
	]);

	return redirect()->back()->with('success', 'Data submitted Successfully');


	}
	} Now, also modify your index.blade.php file in view like below: <!DOCTYPE html> <html> <head> <title>Capture webcam image with php and jquery - ItSolutionStuff.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 mb-2"> <div class="mt-3"> @include('msg') </div> <h1 class="text-center">Information</h1> <form action="{{ route('info.create') }}" method="post" enctype="multipart/form-data"> @csrf <div class="row"> <div class="col-md-12"> <input type="text" name="name" class="form-control mb-4" placeholder="Enter you name..."> <input type="number" name="age" class="form-control mb-4" placeholder="Enter you age..."> </div> <div class="col-md-6"> <div id="my_camera"></div> <br/> <input type=button class="btn btn-sm btn-primary" 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 type="submit" class="btn btn-success mt-2">Submit</button> </div> </div> </form> </div> <!-- Configure a few settings and attach camera --> <script language="JavaScript"> Webcam.set({ width: 490, height: 390, 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>

For giving session message create view name msg.blade.php like below:

@if ($message = Session::get('success'))

<strong>{{ $message }}</strong>

</div>

@endif

Now give the command php artisan serve to see the result.

Enjoy!!!!!

Webcam Capture Image and Image Save to Database Using Laravel & Jquery Plugin.

4 Comments

Contact Form