如何使用网络摄像头拍摄的图像并将其安装到形成submittion

Question

我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; 

Answer 1

你也可以尝试使用Filestack的上传与网络摄像头capabilites。 https://blog.filestack.com/api/uploading-webcam-images-filestack/