I'm getting stuck when using upload with webcam.js with Laravel 5.3
it's my view
<!DOCTYPE html>
<html>
<head>
<title>Photobooth</title>
<meta name="description" content="Photobooth App! with Laravel">
<meta name="keywords" content="webcam, photobooth, laravel">
<meta charset="utf-8">
<meta name="author" content="anisku11">
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- Favicons -->
<link rel="shortcut icon" href="">
<link rel="apple-touch-icon" href="">
<link rel="apple-touch-icon" sizes="72x72" href="">
<link rel="apple-touch-icon" sizes="114x114" href="">
<!-- CSS -->
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<script type="text/javascript" src=""></script>
</head>
<body>
<div class="countdown"></div>
<!-- Page Wrap -->
<div id="home"></div>
<div id="camera"></div>
<!-- <canvas id="results"></canvas> -->
<div id="results"></div>
<div id="edit"></div>
<!--[if lt IE 10]><script type="text/javascript" src=""></script><![endif]-->
</body>
</html>
<!-- Code to handle taking the snapshot and displaying it locally -->
<script language="JavaScript">
Webcam.attach( '#camera' );
</script>
<script language="JavaScript">
var cek = 1;
var counter;
$( "#pretake" ).click(function() {
take_snapshot();
});
function take_snapshot() {
// take snapshot and get image data
var countdownDiv = $('.countdown');
//$('.countdown').show();
countdownDiv.show();
// countdown(5);
var seconds = 5;
counter = setInterval(timer, 1000);
countdownDiv.html(seconds);
seconds--;
function timer(){
if (seconds == 0){
clearInterval(counter);
countdownDiv.hide();
mcanvas = document.getElementById('results');
$('#camera').hide();
$('#pretake').hide();
//mcontext = mcanvas.getContext('2d');
if(countdownDiv.css('display')== "none"){
Webcam.snap(function(data_uri, canvas, context) {
// copy image to my own canvas
mcanvas.innerHTML = '<img id="results" style="width: 1920px; height: 1080px; top: 115px;" src="'+data_uri+'"/>';
//this code i can't understand
Webcam.upload( data_uri, '#', function(code, text) {
// Upload complete!
// 'code' will be the HTTP response code from the server, e.g. 200
// 'text' will be the raw response content
});
});
}
return;
}
}
}
</script>
I can't understand how to post base64 image to Controller So it's my controller for this view
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Frontapp;
use Carbon\Carbon;
use Alert;
class FrontController extends Controller
{
public function postImages(Request $request)
{
$requestData = $request->all();
if ($request->hasFile('')) {
$uploadPath = public_path('/uploads/');
$extension = $request->file('')->getClientOriginalExtension();
$fileName = rand(11111, 99999) . '.' . $extension;
$request->file('')->move($uploadPath, $fileName);
$requestData[''] = $fileName;
}
frontapp::create($requestData);
return redirect('front.editor');
}
}
How to integrate webcam.js upload for Laravel 5.3
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire