Webcam plugin to take photo, store it in a folder and send the path to an input

Question

Webcam plugin to take photo, store it in a folder and send the path to an input

Navigation

#1 by (0 votes)

0

I have a customer registration screen with normal data to be filled (name, city, state, etc.). But I need to implement a webcam area to save a client photo along with the rest of the data. I found a plugin (webcam.js) that gives access to the camera, and when I shoot the photo the image is usually saved in a folder that I define. so far this is usually working . The problem is that it is also registered in mysql. I would just like to store the photo in the folder and its path be sent to a hidden one, so that the user can finish the inclusion of the other data and finish the complete cadastre. How do I make this passage? the photo is saved in the folder and the path is returned to the input hidden?

follow my code:

index.php

<script type="text/javascript" src="webcam.js"></script>
<script language="JavaScript">
        document.write( webcam.get_html(320, 240) );
        webcam.set_api_url( 'test.php' );
        webcam.set_quality( 90 ); // JPEG quality (1 - 100)
        webcam.set_shutter_sound( true ); // play shutter click sound
        webcam.set_hook( 'onComplete', 'my_completion_handler' );

        function take_snapshot(){
            // take snapshot and upload to server
            document.getElementById('upload_results').innerHTML = '<h1>Uploading...</h1>';
            webcam.snap();
        }

        function my_completion_handler(msg) {
            // extract URL out of PHP output
            if (msg.match(/(http\:\/\/\S+)/)) {
                // show JPEG image in page
                document.getElementById('upload_results').innerHTML ='<h1>Upload Successful!</h1>';
                // reset camera for another shot
                webcam.reset();
            }
            else {
                alert("PHP Error: " + msg);
            }
        }
    </script>

    <form>
        <input type=button value="Configure..." onClick="webcam.configure()">
        &nbsp;&nbsp;
        <input type=button value="Take Snapshot" onClick="take_snapshot()">  
        <input type="hidden" name="receberCaminho">   
    </form>
<div id="upload_results" style="background-color:#eee;"></div>

test.php

  <?php
session_start();
include 'conexao.php';
$name = date('YmdHis');
$newname="images/".$name.".jpg";
$file = file_put_contents( $newname, file_get_contents('php://input') );
if (!$file) {
    print "ERROR: Failed to write data to $filename, check permissions\n";
    exit();
}
else
{
    $sql="Insert into cliente (clienteFoto) values('$newname')";
    $result=mysqli_query($conecta,$sql)
            or die("Error in query");
    $value=mysqli_insert_id($conecta);
    $_SESSION["myvalue"]=$value;


}

$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/' . $newname;
print "$url\n";

?>

php javascript html webcam

asked by anonymous 19.02.2016 / 02:24

1 answer

Xcode - App installation failed: An unknown error has occurred Create auto complete in input?

score 0 · Answer 1

After some research I was able to solve my problem myself .. follows a solution for anyone who goes through something similar:

index.php

<head>

<script type="text/javascript" src="webcam.js"></script>
<script language="JavaScript">
        document.write( webcam.get_html(320, 240) );
        webcam.set_api_url( 'test.php' );
        webcam.set_quality( 90 ); // JPEG quality (1 - 100)
        webcam.set_shutter_sound( true ); // play shutter click sound
        webcam.set_hook( 'onComplete', 'my_completion_handler' );

        function take_snapshot(){
            // take snapshot and upload to server
            document.getElementById('upload_results').innerHTML = '<h1>Uploading...</h1>';
            webcam.snap();
        }

        function my_completion_handler(msg) {
            // extract URL out of PHP output
            if (msg.match(/(images\S+)/)) {
                // show JPEG image in page
                document.getElementById('upload_results').innerHTML ='<h1>Upload Successful!</h1>';
                document.getElementById('teste').value = msg;
                 // show JPEG image in page


            $('#img').append("<img src="+msg+" class=\"img\">");
            setTimeout(function() {
             $('.img').remove();
            }, 4000);

            // reset camera for another shot
            webcam.reset();
            }
            else {
                alert("PHP Error: " + msg);
            }
        }   



</script>
</head>
<html>
  <body>


  <form>
        <input type=button value="Configure..." onClick="webcam.configure()">
        &nbsp;&nbsp;
        <input type=button value="Take Snapshot" onClick="take_snapshot()"> 

        <input type="text" id="teste">    
  </form>

     <div id="img" style=" height:800px; width:500px; float:left; margin-left:40px; margin-top:20px;">
     <div id="upload_results" style="background-color:#eee;"></div>


  </body>


</html>

test.php

<?php
session_start();
$name = date('YmdHis');
$newname="images/".$name.".jpg";
$file = file_put_contents( $newname, file_get_contents('php://input') );
if (!$file) {
    print "ERROR: Failed to write data to $filename, check permissions\n";
    exit();
}


$url2 = "images/".$name.".jpg";
print "$url2\n";

?>