Ir para conteúdo
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!!!";
    }
?>

 

Editado por Gabriel Heming
adicionar formatação de código

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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!!!";
    }
?>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Eduardo S. B. de Oliveira
      Senhores, preciso de uma ajuda, estou criando um formulário onde o checkbox fique "checked" quando clicar em cima, mas o detalhe e que quando atualizar a pagina o checkbox permaneça marcado. É possível? 
    • Por snkGOD
      Boas galera, há algum tempo eu tenho vontade de botar em prática um projeto aqui pro meu bairro. Aqui tem uma galera de umas 60 pessoas que sempre organizam pequenos campeonatos e torneios entre eles, eu queria saber o que preciso estudar pra conseguir fazer algo parecido com o CartolaFC, algo pra incluir apenas essa quantidade de pessoas, com sistema de pontuação seguindo o modelo do CartolaFC. É algo pequeno, apenas para nós. Se houver algum script que faça isso e alguém puder me passar o nome, também serve. Grato a todos que se dispuserem a ajudar.
    • Por Michael Costa
      Olá. Eu gostaria de saber se é possível passar variáveis de php para css sendo que foi colocado como nome de class as variaveis do php
    • Por bessa238
      Bom dia galera, estou tendo um problema com meu código, eu trago os dados do banco mas tenho 2 SELECT dependentes, um com estado e a cidade, segue o código
                  $.when(                 $('#estado').val(data.estado), //o valor da option no select estado ( já está preenchido com os values desde o carregamento da página ) é setado.                 $('#estado').change()) //o método change() é chamado para que o carregamento das cidades no select 2 ( cidades ) é feito.             .then(function() {                 $('#cidade').val(data.cidade); //deveria setar a cidade vinda do banco como a option no select.             }); funcional apenas até a parte do $('#estado').change(), a cidade ( vinda do banco ) é até setada por um breve momento, questão de 0,25 segundos, depois o valor que aparece na cidade é alterado e setado como a primeira option dentre todas opções do select. Alguém já passou por tal problema ? estou a um tempo atrás de solução e não consigo obter nenhuma resposa, porém sei que é possível fazer como isso é apenas um formulário de cadastro para edição, muitos outros sistemas e sites usam este recurso. Desde já, obrigado a todos !
    • Por MateusOFCZ
      Olá, estou desenvolvendo um BOT utilizando java, javascript e node.js, gostaria de saber se tem como eu fazer um painel em java (arquivo executável) onde tem um campo de texto (Que é digitado um tema, exemplo "Brasil"), uma lista com 3 itens (Quem é, O que é e A história do(a), você iria selecionar, por exemplo no campo de texto você digitou "Brasil" e na lista você selecionaria "A história do(a)"...) como faço pra quando clicar no botão "Enviar" ele iria executar um comando em node.js adicionando as informações (Tema e Opção).

       


      Caso não tenha entendido posso tentar explicar de uma forma mais clara!
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.