Twitter Bootstrap Question posted in

is their any function in php which save images in a folder in pc after every 10 seconds-Twitter bootstrap

I use HTML and JavaScript to capture webcam image. And I use php to store image in folder in my PC. Is there any function in php which capture and save new images after every 10 second? My php code save 1 image in uploaded folder. I want to save images after every 10 second in uploaded folder. Here is my php code which save webcam capture image in uploaded folder.

html, javascript

<html>
<head>
    <title>Capture webcam image with php and jquery </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">
    <h1 class="text-center">Capture webcam image with php </h1>

    <form method="POST" action="storeImage.php">
        <div class="row">
            <div class="col-md-6">
                <div id="my_camera"></div>
                <br/>
                <input type=button value="Take Snapshot" onClick="take_snapshot()">
                <input type="hidden" name="image" class="image-tag">
            </div>
            <div class="col-md-6">
                <div id="results">captured image will appear here...</div>
            </div>
            <div class="col-md-12 text-center">
                <br/>

                <button class="btn btn-success">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: 40
    });

    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>

php

 <?php

        $img = $_POST['image'];
        $folderPath = "C:/xampp/htdocs/PhpProject2/uploaded/";

        $image_parts = explode(";base64,", $img);
        $image_type_aux = explode("image/", $image_parts[0]);
        $image_type = $image_type_aux[1];

        $image_base64 = base64_decode($image_parts[1]);
        $fileName = 't' . '.jpeg';

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

        print_r($fileName);
        $command = escapeshellcmd("python C:/xampp/htdocs/PhpProject2/generate_graph.py/");
        $output = shell_exec($command);
        echo $output;
    ?>
Tags:

2

Answers


  1. 0

    Simply, refresh your page

    <?php
    //your php code
    header("Refresh:10");
?>
    Login or Signup to reply.
  2. 0

    One of the solutions is using Ajax instead of PHP.

    Give an id to your form:

    <form method="POST" action="storeImage.php" id="form">

    ajax code: submit your form every 10 seconds(10000 = 10 seconds)

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    setInterval("$('form').submit()",10000);
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search