30

Como realizar o procedimento de captura de imagem da webcam do usuário em um formulário de cadastro para enviar via POST? Busco por uma solução que seja compatível com a maioria dos navegadores e que seja de simples implementação.

5

2 Respostas 2

25
+50

Exemplo Mínimo

PHP

camera.php

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tirar Fotos</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<style>
        video { border: 1px solid #ccc; display: block; margin: 0 0 20px 0; }
        #canvas { margin-top: 20px; border: 1px solid #ccc; display: block; }
</style>
</head>
<body>
<div>
    <div><video id="video" width="640" height="480" autoplay></video></div>
    <div><button id="snap">Tirar Foto</button></div>
    <div><button id="save">Salvar Foto</button></div>
    <div><canvas id="canvas" width="640" height="480"></canvas></div>
<script>
    window.addEventListener("DOMContentLoaded", function() {
        var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d"),
        video = document.getElementById("video"),
        videoObj = { "video": true },
        errBack = function(error) {
                console.log("Video capture error: ", error.code); 
        };  
        if(navigator.getUserMedia) {
            navigator.getUserMedia(videoObj, function(stream) {
                video.src = stream;
                video.play();
            }, errBack);
        } else if(navigator.webkitGetUserMedia) {
            navigator.webkitGetUserMedia(videoObj, function(stream){
                video.src = window.webkitURL.createObjectURL(stream);
                video.play();
            }, errBack);
        }
        else if(navigator.mozGetUserMedia) {
            navigator.mozGetUserMedia(videoObj, function(stream){
                video.src = window.URL.createObjectURL(stream);
                video.play();
            }, errBack);
        }
    }, false);
    document.getElementById("snap").addEventListener("click", function() {      
        canvas.getContext("2d").drawImage(video, 0, 0, 640, 480);       
        //alert(canvas.toDataURL());
    });
    document.getElementById("save").addEventListener("click", function() {      
        $.post('fotossalvar.php', {imagem:canvas.toDataURL()}, function(data){
        },'json');
    });
</script>    
</body>
</html>

fotossalvar.php

<?php
    function base64_to_jpeg( $base64_string, $output_file ) {
        $ifp = fopen( $output_file, "wb" ); 
        fwrite( $ifp, base64_decode( $base64_string) ); 
        fclose( $ifp ); 
        return( $output_file ); 
    }       
    $imagem = str_replace('data:image/png;base64,','',$_POST['imagem']);        
    base64_to_jpeg($imagem, "pasta1/foto1.png");        
    echo json_encode(array('imagem' => 1));

Todo o código se resume nesses dois arquivos, siga esse modelo como fator de teste. Configure a sua aplicação com jQuery, e uma pasta com o nome de pasta1, sendo tudo feito em HTML5 com PHP.

Em relação aos navegadores, o Google Chrome e o Firefox funcionaram perfeitamente, já o IE não tive sucesso.

Fontes:

11
+25

Existe um projeto muito interessante no GitHub com vista a fornecer uma solução atual para o uso da webcam do cliente, fazendo uso de fallback para Flash em casos de navegadores mais antigos:

WebcamJS

WebcamJS é uma pequena (~3K minificado e compactado) biblioteca standalone em JavaScript para capturar fotos a partir da câmera do seu computador, e entregá-los a você como JPEG ou PNG Data URIs. As imagens podem ser exibidas em sua página web, rendido em uma tela, ou submetido ao seu servidor. WebcamJS usa HTML5 getUserMedia, mas proporciona um fallback automático e invisível através de Adobe Flash.

Demonstração

Webcam.set({
  width: 320,
  height: 240,
  image_format: 'jpeg',
  jpeg_quality: 90
});
Webcam.attach('#my_camera');

function take_snapshot() {
  // take snapshot and get image data
  Webcam.snap(function(data_uri) {
    // display results in page
    document.getElementById('results').innerHTML =
      '<h2>Here is your image:</h2>' +
      '<img src="' + data_uri + '"/>';
  });
}
body {
  font-family: Helvetica, sans-serif;
}
h2,
h3 {
  margin-top: 0;
}
form {
  margin-top: 15px;
}
form > input {
  margin-right: 15px;
}
#results {
  float: right;
  margin: 20px;
  padding: 20px;
  border: 1px solid;
  background: #ccc;
}
		
<script src="http://pixlcore.com/demos/webcamjs/webcam.js"></script>
<div id="results">A imagem capturada aparece aqui...</div>

<h1>WebcamJS Página de teste</h1>
<h3>Demonstração de uma captura e apresentação em 320x240</h3>

<div id="my_camera"></div>

<form>
  <input type=button value="Tirar Snapshot" onClick="take_snapshot()">
</form>

Enviar para o servidor

A função Webcam.snap() fornece a imagem por meio de um URI Dados via JavaScript, conforme vimos no exemplo em cima.

Contudo, também dispomos de uma forma de decodificar e enviar esses dados da imagem para o servidor através de uma chamada AJAX:

var data_uri = Webcam.snap();

Webcam.upload( data_uri, 'meuScript.php', function(code, text) {
    // Upload concluído
    // 'code' contém o código da resposta HTTP enviado pelo servidor, ex. 200
    // 'text' contem o que o servidor enviou
});

No lado do servidor, os dados chegam tal como se tivessemos submetido um formulário com um campo <input type="file" name="webcam">, pelo que podemos simplesmente receber a imagem da seguinte forma:

// verificações de segurança e outros
// ...
// mover o ficheiro recebido para o local pretendido
move_uploaded_file($_FILES['webcam']['tmp_name'], 'webcam.jpg');

Se for necessário enviar mais dados para o servidor junto com a imagem, podemos faze-lo adicionando os mesmos na forma de queryString:

var username = 'Bubu';
var image_fmt = 'jpeg';
var url = 'meuScript.php?username=' + username + '&format=' + image_fmt;
Webcam.upload( data_uri, url, function(code, text) {...} );

Nota: Existem muitas opções fornecidas pelo projeto WebcamJS e o mesmo está muito bem detalhado e recheado de exemplos de utilização no link do mesmo no GitHub.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .