Sencillo codekata en JavaScript y PHP para hacer una captura de la cámara, enviando luego mediante puro JavaScript la imagen a un script PHP que guardará la imagen en el servidor.
Este post es continuación sobre este otro sobre cómo capturar una imagen de la webcam con JavaScript añadiendo el envío y recepción al servidor.
El código fuente
A partir del fuente anterior, se puede añadir lo siguiente para convertir la imagen de la etiqueta HTML canvas en un objeto dataURL. Luego a su vez éste se convierte a blob con ayuda de comentarios de Stack Overflow de donde han compartido la función. Finalmente se envía en puro JavaScript y se recepciona grabando al mismo directorio.
El fuente en HTML y JavaScript
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>JnjSite.com: taking photo from camera</title>
</head>
<body>
<h1>JnjSite.com: taking photo from camera</h1>
<p id="errorTxt"></p>
<div>
<video id="theVideo" controls autoplay></video>
<canvas id="theCanvas"></canvas>
</div>
<button id="btnCapture">Capture</button>
<button id="btnDownloadImage">Download captured image</button>
<button id="btnSendImageToServer" disabled>Send image to server</button>
<script type="text/javascript">
var videoWidth = 320;
var videoHeight = 240;
var videoTag = document.getElementById('theVideo');
var canvasTag = document.getElementById('theCanvas');
var btnCapture = document.getElementById("btnCapture");
var btnDownloadImage = document.getElementById("btnDownloadImage");
var btnSendImageToServer = document.getElementById("btnSendImageToServer");
videoTag.setAttribute('width', videoWidth);
videoTag.setAttribute('height', videoHeight);
canvasTag.setAttribute('width', videoWidth);
canvasTag.setAttribute('height', videoHeight);
window.onload = () => {
navigator.mediaDevices.getUserMedia({
audio: true,
video: {
width: videoWidth,
height: videoHeight
}
}).then(stream => {
videoTag.srcObject = stream;
}).catch(e => {
document.getElementById('errorTxt').innerHTML = 'ERROR: ' + e.toString();
});
var canvasContext = canvasTag.getContext('2d');
// Capture button..
btnCapture.addEventListener("click", () => {
canvasContext.drawImage(videoTag, 0, 0, videoWidth, videoHeight);
btnSendImageToServer.removeAttribute("disabled");
});
// Download button..
btnDownloadImage.addEventListener("click", () => {
var link = document.createElement('a');
link.download = 'capturedImage.png';
link.href = canvasTag.toDataURL();
link.click();
});
// Send image to server button..
btnSendImageToServer.addEventListener("click", () => {
var dataURL = theCanvas.toDataURL();
var blob = dataURLtoBlob(dataURL);
var data = new FormData();
data.append("capturedImage", blob, "capturedImage.png");
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
alert(xmlHttp.responseText);
}
}
xmlHttp.open("post", "testingCam.php");
xmlHttp.send(data);
});
// https://stackoverflow.com/questions/6850276
function dataURLtoBlob(dataURL) {
var arr = dataURL.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime
});
}
};
</script>
</body>
</html>El fuente en PHP para recepcionar la imagen
<?php
move_uploaded_file($_FILES['capturedImage']['tmp_name'], "testingCam.png");
Cómo arrancarlo, probar los scripts
Se puede crear por ejemplo un fichero testingCam.html y testingCam.php, para luego lanzar desde línea de comandos:
php -S localhost:8000..y acceder entonces a: http://localhost:8000/testingCam.html
Gracias por tu aporte
Nada, a ti por dejar un comentario.
Saludos.