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.
-
3De uma olhada nesse tutorial: http://www.phpclasses.org/blog/post/228-How-to-Use-a-Webcam-to-take-Pictures-in-PHP-Application.html– BernardoCommented 5/07/2014 às 17:13
-
1Este link tem um boa explicação em portugues: <html5rocks.com/pt/tutorials/getusermedia/intro>– Isaac JuniorCommented 10/07/2014 às 21:35
-
1Do meu ponto de vista a única maneira de ser o mais compatível com vários Browsers seria usar as soluções em html5 já demonstradas e acaso o browser não de suporte, usar uma solução alternativa em Flash (apenas para capturar a imagem).– Syzoth ♦Commented 25/12/2014 às 19:45
-
Conseguistes resolver tua questão? Não encontrou a resposta?– durttoCommented 9/10/2015 às 11:29
-
Um adendo: Agora seu site precisa ter conexão https para para poder acessar a Webcam via HTML5– Wallace VizerraCommented 7/04/2017 às 1:43
2 Respostas
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:
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.