WebCam PHP

[johni_9 0]

Boa tarde pessoal!

Já pesquisei no fórum, testei os tópico apresentados, porém não obtive sucesso.

Eu preciso desenvolver um projeto em PHP, o qual realize a interação com a Webcam e a imagem capturada seja salva em um diretório e o nome dela na Base de Dados;

Segue parte das páginas:

 

FORM que contém a captura da webcam

<form method="post" action="model/cadMaquina.php" enctype="multipart/form-data">

    <div class="col-md-12 mb-3"><center>
        <div id="my_photo_booth">
            <div id="my_camera"></div>

            <!-- First, include the Webcam.js JavaScript Library -->
            <script type="text/javascript" src="webcamjs/webcam.min.js"></script>

            <!-- Configure a few settings and attach camera -->
            <script language="JavaScript">
                Webcam.set({
                    // live preview size
                    width: 320,
                    height: 240,

                    // device capture size
                    dest_width: 640,
                    dest_height: 480,

                    // final cropped size
                    crop_width: 480,
                    crop_height: 480,

                    // format and quality
                    image_format: 'jpg',
                    jpeg_quality: 90,

                    // flip horizontal (mirror mode)
                    flip_horiz: true
                });
                Webcam.attach( '#my_camera' );
            </script>

            <!-- A button for taking snaps -->
            <!-- <form> -->
                <div id="pre_take_buttons">
                    <!-- This button is shown before the user takes a snapshot -->
                    <input type=button value="Capturar Imagem" onClick="preview_snapshot()">
                </div>
                <div id="post_take_buttons" style="display:none">
                    <!-- These buttons are shown after a snapshot is taken -->
                    <input type=button value="Novo Registro" onClick="cancel_preview()">
                    <!-- <input type=button value="Save Photo >" onClick="save_photo()" style="font-weight:bold;"> -->
                </div>
            <!-- </form> -->
        </div>

        <div id="results" style="display:none">
            <!-- Your captured image will appear here... -->
        </div>

        <!-- Code to handle taking the snapshot and displaying it locally -->
        <script language="JavaScript">
            // preload shutter audio clip
            var shutter = new Audio();
            shutter.autoplay = false;
            shutter.src = navigator.userAgent.match(/Firefox/) ? 'shutter.ogg' : 'shutter.mp3';

            function preview_snapshot() {
                // play sound effect
                //try { shutter.currentTime = 0; } catch(e) {;} // fails in IE
                //shutter.play();

                Webcam.snap( function(data_uri) {
                Webcam.upload( data_uri, 'model/cadMaquina.php', function(code, text) {
                document.getElementById('results').innerHTML =
                '<h2>Here is your image:</h2>' +
                '<img src="'+text+'"/>';
                });
                });

                // freeze camera so user can preview current frame
                Webcam.freeze();

                // swap button sets
                document.getElementById('pre_take_buttons').style.display = 'none';
                document.getElementById('post_take_buttons').style.display = '';
            }

            function cancel_preview() {
                // cancel preview freeze and return to live camera view
                Webcam.unfreeze();

                // swap buttons back to first set
                document.getElementById('pre_take_buttons').style.display = '';
                document.getElementById('post_take_buttons').style.display = 'none';
            }
        </script>

    </div></center>
    <div class="col-md-12 mb-1">
        <input type="submit" class="btn btn-success" style="margin-top: 2px; width: 100%;" value="Cadastrar">
    </div>

CADMAQUINA.PHP

<?php
    include("../conexao.php");

    $nome =  md5(time()) . '.jpg';

    $filepath = 'img/';
 
    move_uploaded_file($_FILES['webcam']['tmp_name'], $filepath.$nome);

   
    $cadMaquina = "INSERT INTO inventario SET fotoMaquina='$nome'";

    if ($conn->query($cadMaquina)) {
        echo "Máquina cadastrada com sucesso!!!";
    } else {
        echo "Máquina não cadastrada!!!";
    }
?>

 

[marcosmarcolin 0]

Certo, mas o que está acontecendo? O que você não conseguiu fazer? Está conseguindo tirar a foto? Detalhe bem a sua questão para ajudarmos.

[johni_9 0]

1 hora atrás, marcosmarcolin disse:

Certo, mas o que está acontecendo? O que você não conseguiu fazer? Está conseguindo tirar a foto? Detalhe bem a sua questão para ajudarmos.

O sistema captura a foto, mantém a imagem congelada após o click, porém quando clico no SUBMIT não salva a imagem na pasta IMG e não envia o nome para o banco de dados

A página possui um botão para captura da imagem, outro para realizar um novo registro da câmera e o submit.

 

[marcosmarcolin 0]

Certo, primeiro precisa certificar algumas coisas:

 

1. A pasta img existe na raiz?

 

2. A imagem está chegando no arquivo php para ser processada?

$_FILES['webcam']['tmp_name'] existe mesmo? Sugiro você criar uma variável para receber $_FILES['webcam'], depois você utiliza ela para mover.

 

3. Seu INSERT está incorreto, corrija para:

"INSERT INTO inventario SET (fotoMaquina) VALUES ('$nome')";

Verifica isso e retorne.

 

A principal questão é saber se a imagem está chegando no cadmaquina.php, depois fica fácil de tratar, garanto que resolveremos.

 

Aguardo seu retorno.

[johni_9 0]

Consegui resolver a situação com a ajuda de um colega da empresa.

Estou postando o código para que a comunidade possa utilizar:

 

FORM:

<form method="post" action="cadMaquina.php" enctype="multipart/form-data">
    <!-- ################################################################# -->
    <div class="col-md-12 mb-3"><center>
        <div id="my_photo_booth">
            <div id="my_camera"></div>

            <!-- First, include the Webcam.js JavaScript Library -->
            <script type="text/javascript" src="webcamjs/webcam.min.js"></script>

            <!-- Configure a few settings and attach camera -->
            <script language="JavaScript">
                Webcam.set({
                    // live preview size
                    width: 320,
                    height: 240,

                    // device capture size
                    dest_width: 640,
                    dest_height: 480,

                    // final cropped size
                    crop_width: 480,
                    crop_height: 480,

                    // format and quality
                    image_format: 'jpg',
                    jpeg_quality: 90,

                    // flip horizontal (mirror mode)
                    flip_horiz: true
                });

                Webcam.attach( '#my_camera' );
            </script>

            <!-- A button for taking snaps -->
            <!-- <form> -->
                <div id="pre_take_buttons">
                    <!-- This button is shown before the user takes a snapshot -->
                    <input type=button value="Capturar Imagem" onClick="preview_snapshot()">
                </div>
                <div id="post_take_buttons" style="display:none">
                    <!-- These buttons are shown after a snapshot is taken -->
                    <input type=button value="Novo Registro" onClick="cancel_preview()">
                    <!-- <input type=button value="Save Photo >" onClick="save_photo()" style="font-weight:bold;"> -->
                </div>
            <!-- </form> -->
        </div>

        <div id="results" style="display:none">
            <!-- Your captured image will appear here... -->
        </div>

        <!-- Code to handle taking the snapshot and displaying it locally -->
        <script language="JavaScript">
            // preload shutter audio clip
            var shutter = new Audio();
            shutter.autoplay = false;
            shutter.src = navigator.userAgent.match(/Firefox/) ? 'shutter.ogg' : 'shutter.mp3';

            function preview_snapshot() {
                // play sound effect
                //try { shutter.currentTime = 0; } catch(e) {;} // fails in IE
                //shutter.play();

                var imgbase64 = undefined;

                Webcam.snap((data_uri) => {
                    imgbase64 = data_uri;
                    /* Opção 1 - Inserindo a imagem em BASE64 no formulário */
                    document.getElementById('fotoMaquina').value=imgbase64;
                    //console.log(data_uri);
                });

                /* Opção 2 - Caso queira fazer o upload em tempo real para algum outro lugar...
                Webcam.upload(imgbase64,'model/cadMaquina.php', function(code,text){
                    console.log(code);
                    console.log(text);
                });*/

                // freeze camera so user can preview current frame
                Webcam.freeze();

                // swap button sets
                document.getElementById('pre_take_buttons').style.display = 'none';
                document.getElementById('post_take_buttons').style.display = '';
            }

            function cancel_preview() {
                // cancel preview freeze and return to live camera view
                Webcam.unfreeze();

                // swap buttons back to first set
                document.getElementById('pre_take_buttons').style.display = '';
                document.getElementById('post_take_buttons').style.display = 'none';
            }
        </script>

        <input type="hidden" id="fotoMaquina" name="fotoMaquina">

    </div></center>
    <!-- ################################################################# -->
    <div class="col-md-12 mb-1">
        <input type="submit" class="btn btn-success" style="margin-top: 2px; width: 100%;" value="Cadastrar">
    </div>
</form>

TRATAMENTO.PHP

<?php
    if(!empty($_FILES)) {
        $nome =  md5(time()) . '.jpg';
        $filepath = 'img/';
 
        move_uploaded_file($_FILES['webcam']['tmp_name'], $filepath.$nome);
    }

    session_start();
    include("../conexao.php");

    $fotoMaquina = $_POST['fotoMaquina'];

    if ($fotoMaquina) {
        $filepath = '../maquinas/';

        $img = str_replace('data:image/png;base64,', '', $fotoMaquina);
        $img = str_replace(' ', '+', $img);
        $data = base64_decode($img);
        $nome = uniqid() . '.png';

        $salvarFoto = (file_put_contents($filepath . $nome, $data) ? true : false);
    }

    /** #################################### **/
    /** #################################### **/
    
    $cadMaquina = "INSERT INTO inventario SET fotoMaquina='$nome'";

    // $cadastrado = mysqli_query($conn, $cadMaquina);

    if ($conn->query($cadMaquina)) {
        echo "Máquina cadastrada com sucesso!!!";
        header('Location: ../maquina.php');
    } else {
        echo "Máquina não cadastrada!!!";
    }
?>