JP
Gravar imagem com WebCam no Adiant Framework
Boa noite Galera do Adiant Framework.
Estou querendo integrar uma WebCam na aplicação de cadastro. Alguém aí já fez?
Se já agradeçia que me dessem um Help.
Estou querendo integrar uma WebCam na aplicação de cadastro. Alguém aí já fez?
Se já agradeçia que me dessem um Help.
Olá José,
Achei isso na internet mais infelizmente não testei ainda para ver como funciona! mais espero que ajuda você!
Acessando Câmera do Celular ou Webcam, tirando foto e fazendo upload com JavaScript, PHP e HTML5
Jonathas Guerra Jonathas Guerra 3 anos ago 26 17.7 K
Precisei trabalhar novamente com WebCam e Câmera dos Smartphone e Tablets, então segue como utilizar a Câmera do PC ou Celular com HTML5, com e sem Flash e fazer o Upload com PHP.
Biblioteca JS Webcam HTML5
Baixe a Biblioteca acima, é algo muito simples, tira a foto, olha a prévia e faz o upload na fasta fotos/.
Código da index.html
<!doctype html>
<html lang="pt">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tutorial WebCam Blog Jonathas Guerra</title>
<script type="text/javascript" src="webcamjs-master/webcam.min.js"></script>
<script language="JavaScript">
function bater_foto()
{
Webcam.snap(function(data_uri)
{
document.getElementById('results').innerHTML = '<img id="base64image" src="'+data_uri+'"/><button onclick="salvar_foto();">Upload desta Foto</button>';
});
}
function mostrar_camera()
{
Webcam.set({
width: 640,
height: 480,
dest_width: 640,
dest_height: 480,
crop_width: 300,
crop_height: 400,
image_format: 'jpeg',
jpeg_quality: 100,
flip_horiz: true
});
Webcam.attach('#minha_camera');
}
function salvar_foto()
{
document.getElementById("carregando").innerHTML="Salvando, aguarde...";
var file = document.getElementById("base64image").src;
var formdata = new FormData();
formdata.append("base64image", file);
var ajax = new XMLHttpRequest();
ajax.addEventListener("load", function(event) { upload_completo(event);}, false);
ajax.open("POST", "upload.php");
ajax.send(formdata);
}
function upload_completo(event)
{
document.getElementById("carregando").innerHTML="";
var image_return=event.target.responseText;
var showup=document.getElementById("completado").src=image_return;
var showup2=document.getElementById("carregando").innerHTML='Upload feito:';
}
window.onload= mostrar_camera;
</script>
<style type="text/css">
.container
{
float: left;
width:320px;
height: 480px;
margin-right: 5px;
padding: 5px;
}
#camera
{
background: #ff6666;
height: 480px;
}
#previa
{
background: #ffc865;
height: 480px;
}
#salva
{
background: #4dea02;
height: 480px;
}
</style>
</head>
<body>
<div class="container" id="camera">Câmera:
<div id="minha_camera"></div><form><input type="button" value="Tirar Foto" onClick="bater_foto()"></form>
</div>
<div class="container" id="previa">
Prévia:<div id="results"></div>
</div>
<div class="container" id="salva">
<span id="carregando"></span><img id="completado" src=""/>
</div>
</body>
</htm>
O Código acima tem as funções javascript que faz cada etapa, acessa a Webcam ou Câmera do Celular, Bate a Foto e faz o Upload na pasta fotos/ usando o Arquivo abaixo:
Arquivo PHP para fazer o upload da imagem, upload.php
Lembrando que para isso tudo funcionar direitinho, é preciso usar SSL (https://).
Obrigado pelo help Sr° Carlos Roberto.
Vou testar depois te retornarei.
www.adianti.com.br/forum/pt/view_4788?integracao-biblioteca-webcam-n