как использовать веб-камеру для захвата изображения и прикрепить его к форме для отправки

Я создаю мини-биометрическое приложение в php. Я хочу иметь возможность прикрепить захваченное изображение к форме регистрации и сохранить его в базе данных MySQL. Мне удалось найти некоторый исходный код в Интернете для захвата изображения с помощью webcam.js, но мне нужно прикрепить захваченное изображение к форме для отправки в базу данных.

вот исходный код HTML

<div align="center">
<form method='post' id='emp-SaveForm' action="#" style="width:70%;">
<div class="row">
<div class="col-md-6">
<!-- -->
<div id="my_camera"></div>
<!--<input type=button value="Configure" onClick="configure()" class="btn btn-warning">-->
<input type=button value="Take Snapshot" onClick="take_snapshot()" class="btn btn-info">
<input type=button value="Save Snapshot" onClick="saveSnap()" class="btn btn-success">
</div>
<div class="col-md-4">
<div id="results"  ></div>
</div>
</div>
<table class='table table-striped'><tr>
<td>Name</td>
<td><input type='text' name='name' class='form-control' placeholder='EX : Surname Othernames' /></td>
</tr>

<tr>
<td>D.o.B</td>
<td><input type='text' name='dob' class='form-control datepicker' placeholder='' ></td>
</tr>

<tr>
<td>Gender</td>
<td>
<select name="gender">
<option value="">Select Gender</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select>
</td>
</tr>
<tr>
<td>BVN</td>
<td><input type='text' name='bvn' class='form-control' placeholder=''></td>
</tr>

<tr>
<td>Business Name</td>
<td><input type='text' name='business_name' class='form-control' placeholder=''></td>
</tr>

<tr>
<td>Contact Address</td>
<td><input type='text' name='contact_addr' class='form-control ' placeholder=''></td>
</tr>

<tr>
<td>Town/City</td>
<td><input type='text' name='Town_City' class='form-control' placeholder=''></td>
</tr>

<tr>
<td>L.G.A</td>
<td><input type='text' name='lga' class='form-control' placeholder=''></td>
</tr>
<tr>
<td>State</td>
<td>
<select class="form-control" name="state">
<option value="">-- Select State --</option>
<option value="Abia" >Abia</option><option value="Abuja" >Abuja</option><option value="Adamawa" >Adamawa</option><option value="Akwa_ibom" >Akwa-ibom</option><option value="Anambra" >Anambra</option><option value="Bauchi" >Bauchi</option><option value="Bayelsa" >Bayelsa</option><option value="Benue" >Benue</option><option value="Borno" >Borno</option><option value="Cross_River" >Cross-River</option><option value="Delta" >Delta</option><option value="Ebonyi" >Ebonyi</option><option value="Edo" >Edo</option><option value="Ekiti" >Ekiti</option><option value="Enugu" >Enugu</option><option value="Gombe" >Gombe</option><option value="Imo" >Imo</option><option value="International" >International</option><option value="Jigawa" >Jigawa</option><option value="Kaduna" >Kaduna</option><option value="Kano" >Kano</option><option value="Kastina" >Kastina</option><option value="Kebbi" >Kebbi</option><option value="Kogi" >Kogi</option><option value="Kwara" >Kwara</option><option value="Lagos" >Lagos</option><option value="Nasarawa" >Nasarawa</option><option value="Niger" >Niger</option><option value="Ogun" >Ogun</option><option value="Ondo" >Ondo</option><option value="Osun" >Osun</option><option value="Oyo" >Oyo</option><option value="Plateau" >Plateau</option><option value="Rivers" >Rivers</option><option value="Sokoto" >Sokoto</option><option value="Taraba" >Taraba</option><option value="Yobe" >Yobe</option><option value="Zamfara" >Zamfara</option>                                    </select>

</td>
</tr>

<tr>
<td>Phone 1</td>
<td><input type='text' name='phone_1' class='form-control' placeholder=''></td>
</tr>

<tr>
<td>Phone 2</td>
<td><input type='text' name='phone_2' class='form-control' placeholder=''></td>
</tr>
<tr>
<td>Email Address</td>
<td><input type='text' name='email' class='form-control' placeholder=''></td>
</tr>
<tr>
<td>Products and Service Render</td>
<td><input type='text' name='products_services_rendered' class='form-control' placeholder=''></td>
</tr>
<tr>
<td>Sub Society Name</td>
<td><input type='text' name='sub_society_name' class='form-control' placeholder=''></td>
</tr>
<tr>
<td>Position</td>
<td><input type='text' name='position' class='form-control' placeholder=''></td>
</tr>
<tr>
<td>Next of kin Name</td>
<td><input type='text' name='next_kin_name' class='form-control' placeholder=''></td>
</tr>

<tr>
<td>Relationship</td>
<td><input type='text' name='relationship' class='form-control' placeholder=''></td>
</tr>

<tr>
<td>Phone of Next of Kin</td>
<td><input type='text' name='phone_of_next_kin' class='form-control' placeholder=''></td>
</tr>

<tr>
<td>Payment Status</td>
<td>
<select name="payment_status" class="from-control">
<option value=""></option>
<option value="Paid">Paid</option>
<option value="Unpaid">Unpaid</option>
</select>

</td>
</tr><tr>
<td colspan="2">
<input type="hidden" name="mem_id_no" value="" />
<button type="submit" class="btn btn-primary" name="btn-save" id="btn-save">
<span class="glyphicon glyphicon-plus"></span> Save Record
</button>
</td>
</tr>
</table>
</form>

</div>

php для отправки формы

<?php
require_once 'db/dbconfig.php';
require_once 'db/db_connect.php';if($_POST)
{

$query = "SELECT MAX(CAST(id as decimal))id from users";
if($result = mysqli_query($conn, $query))
{
$rowy = mysqli_fetch_assoc($result);
$count = $rowy['id'];
$count = $count+1;
$code_no = str_pad($count, 4, "0", STR_PAD_LEFT);
}
$str = substr(sha1(mt_rand() . microtime()), mt_rand(0,35), 3);

$name = $_POST['name'];
$dob = $_POST['dob'];
$gen = $_POST['gender'];
$bvn = $_POST['bvn'];
$bn = $_POST['business_name'];
$ca = $_POST['contact_addr'];
$tc = $_POST['Town_City'];
$lga = $_POST['lga'];
$st = $_POST['state'];
$p1 = $_POST['phone_1'];
$p2 = $_POST['phone_2'];
$email = $_POST['email'];
$psr = $_POST['products_services_rendered'];
$ssn = $_POST['sub_society_name'];
$posi = $_POST['position'];
$min = $str.$code_no;
$nkn = $_POST['next_kin_name'];
$rel = $_POST['relationship'];
$ponk = $_POST['phone_of_next_kin'];
$ps = $_POST['payment_status'];
$pho = $_POST['photo'];
$sig = $_POST['signature'];
$dat = date("y:m:d H:m:i");

try{

$stmt = $db_con->prepare("INSERT INTO users(
name,
dob,
gender,
bvn,
business_name,
contact_addr,
Town_City,
lga,
State,
phone_1,
phone_2,
email,
products_services_rendered,
sub_society_name,
position,
mem_id_no,
next_kin_name,
relationship,
phone_of_next_kin,
payment_status,
photo,
signature,
date_registered

) VALUES(:nam, :d, :gen, :bv,:bn,:ca,:tc,:lg,:st,:ph,:pha,:em,:psr,:ssn,:pos,:min,:nkn,:rel,:ponk,:ps,:ph,:sig,:dr)");
$stmt->bindParam(":nam", $name);
$stmt->bindParam(":d", $dob);
$stmt->bindParam(":gen", $gen);
$stmt->bindParam(":bv", $bvn);
$stmt->bindParam(":bn", $bn);
$stmt->bindParam(":ca", $ca);
$stmt->bindParam(":tc", $tc);
$stmt->bindParam(":lg", $lga);
$stmt->bindParam(":st", $st);
$stmt->bindParam(":ph", $p1);
$stmt->bindParam(":pha", $p2);
$stmt->bindParam(":em", $email);
$stmt->bindParam(":psr", $psr);
$stmt->bindParam(":ssn", $ssn);
$stmt->bindParam(":pos", $posi);
$stmt->bindParam(":min", $min);
$stmt->bindParam(":nkn", $nkn);
$stmt->bindParam(":rel", $rel);
$stmt->bindParam(":ponk", $ponk);
$stmt->bindParam(":ps", $ps);
$stmt->bindParam(":ph", $pho);
$stmt->bindParam(":sig", $sig);
$stmt->bindParam(":dr", $dat);

if($stmt->execute())
{
echo "Successfully Added";
}
else{
echo "Query Problem";
}
}
catch(PDOException $e){
echo $e->getMessage();
}
}

?>

JQuery для захвата изображения

<script language="JavaScript">

// Configure a few settings and attach camera
function configure(){
Webcam.set({
width: 200,
height: 150,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
}
// A button for taking snaps// preload shutter audio clip
var shutter = new Audio();
shutter.autoplay = false;
shutter.src = navigator.userAgent.match(/Firefox/) ? 'shutter.ogg' : 'shutter.mp3';

function take_snapshot() {
// play sound effect
shutter.play();

// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'<img id="imageprev" src="'+data_uri+'"/>';
} );

Webcam.reset();
}

function saveSnap(){
// Get base64 value from <img id='imageprev'> source
var base64image =  document.getElementById("imageprev").src;

Webcam.upload( base64image, 'upload.php', function(code, text) {
console.log('Save successfully');
//console.log(text);
});

}
</script>

Код PHP, чтобы переместить его в локальную папку

<?php

// new filename
$filename = 'pic_'.date('YmdHis') . '.jpeg';

$url = '';
if( move_uploaded_file($_FILES['webcam']['tmp_name'],'upload/'.$filename) ){
$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/upload/' . $filename;
}

// Return image url
echo $url;