Jump to content
johni_9

WebCam PHP

Recommended Posts

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!!!";
    }
?>

 

Edited by Gabriel Heming
adicionar formatação de código

Share this post


Link to post
Share on other sites
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.

 

cam.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!!!";
    }
?>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Leonardo Ortega
      Prezados, bom dia.
      sou novo por aqui, e me deparei com esta situação:
      estou desenvolvendo um projeto e tudo começou quando apenas mudei o banco de dados que estava conectado. Ou seja, se eu me conecto ao baco de dados anterior, volta todo código html, porém, se conecto ao banco de dados atual as divs desaparecem. 
       
      obs: Isso tb acontece quando eu desativo o php tudo volta como a imagem 1 e se eu ativo fica como a imagem2.
       
      quem pode me ajudar.. desde já muito obrigado.  


    • By thgsousa312
      uma função que recebe uma frase e uma palavra antiga e uma palavra nova. A função deve retornar uma string contendo a frase original, mas com a última ocorrência da palavra antiga substituída pela palavra nova. A entrada e saída de dados deve ser feita no programa principal. Exemplo:  
      Frase: “Quem parte e reparte fica com a maior parte”
      Palavra antiga: “parte”  Palavra nova: “parcela”
      Resultado a ser impresso no programa principal: “Quem parte e reparte fica com a maior parcela”
       
      function trocarNome(){
              
          var frase = document.getElementById("frase").value;
          var strAntiga = document.getElementById("strAntiga").value;
          var strNova = document.getElementById("strNova").value;
          //frase = frase.split(" ");
          var a = frase.lastIndexOf(strAntiga);
          var fras2 = frase.lastIndexOf(strAntiga).replace(strAntiga,strNova);
          document.getElementById("demo").innerHTML = "Certo";
      }
    • By Tuzzolino
      Boa tarde gente,
       
       
      Estou fazendo  um site  e  na hora que eu vou compartilhar ele no whatsapp  ele tá pegando o link corretamente mas ao invés de aparecer o titulo aparece somente o description  e não pega a miniatura da imagem  alguém tem algum exemplo de como  deveria ser ?
       
       
      A  imagem  é carregada assim 
       
      <amp-img height="320" width="470" id="img" src="890x610.jpg" layout="responsive" class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" i-amphtml-layout="responsive"><i-amphtml-sizer style="padding-top: 68.0851%;"></i-amphtml-sizer><img decoding="async" amp-img-id="img" src="890x610.jpg" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>  
    • By prometheusz
      Amigos bom dia, sou novo aqui
      Tenho a seguinte tabela  :
       
       
      gostaria de capturar os ids quando fosse clicado no botão pegar valor do codigo porem do jeito que fiz ele só captura o 88 nao importa qual mlinha eu clique ele so captura o numero 88
       
      codigo:

       
      <script> $(function () { $(document).on('click', '.btn-danger', function (e) { e.preventDefault; var codigo =document.getElementsByTagName('th')[5].innerHTML; alert(codigo) }); }); </script> <?php while ($dado = ibase_fetch_object($consulta_retorno)){ ?> <tr> <th data-title="ID"><?php echo ($dado->ID)?> </th> <td data-title="Nome"><?php echo utf8_encode($dado->NOME)?></td> <td data-title="DataCompra"><?php echo date("d/m/Y", strtotime($dado->DATACOMPRA))?></td> <td data-title="Email"><?php echo utf8_encode($dado->EMAIL)?></td> <td> <button class="btn-danger">Pegar Valor do Código</button></td> </tr> <?php }?>  
       
    • By guzulino
      Então... eu preciso inserir uma paulada de dados em um banco de dados de vez em quando, eu até consigo importar de um CSV pro banco, mas eu preciso fazer isso através do php e eu não tenho nem ideia de como fazer isso, procurei por aqui e não achei, se alguém tem alguma resposta ou referência, manda o link que eu vou dar uma olhada. Valeu.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.