Je souhaite transférer d'une page web (html) une capture photo à l'aide ma webcam et l'enregistrer dans une base de donnée SQLite ou sur Disque.
J'encode (grâce à google) la capture en Base64, mais de l'autre coté, au niveau du CGI c'est une vrai galère pour moi.
Merci d'avance pour votre aide,
Ci dessous la page html :
Code : Tout sélectionner
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Camera</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript">
var mediaStream
function init() {
navigator.mediaDevices.getUserMedia({ audio: false, video: { width: 800, height: 600 } }).then(function(mediaStream) {
var video = document.getElementById('sourcevid');
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
}).catch(function(err) { console.log(err.name + ": " + err.message); });
}
function clone(){
var vivi = document.getElementById('sourcevid');
var canvas1 = document.getElementById('cvs').getContext('2d');
canvas1.drawImage(vivi, 0,0, 150, 112);
var base64 = document.getElementById('cvs').toDataURL("image/png"); //l'image au format base 64
document.getElementById('tar').value = '';
document.getElementById('tar').value = base64;
}
function stop() {
var video = document.getElementById('sourcevid');
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
this.getVideoTracks().forEach(function(track) {
track.stop();
});
};
}
window.onload = init;
</script>
</head>
<body>
<video id="sourcevid" height='150' width='150' autoplay="true" style='display:inline'></video>
<div id="main" style='height:150px;width:150px;margin:auto;display:inline'>
<canvas id="cvs" height='150' width='150'></canvas>
</div>
<button onclick='clone()' style='height:50px;width:80px;margin:auto'>photo</button>
<button onclick='stop()' style='height:50px;width:80px;margin:auto'>stop</button>
<form action="../cgi-bin/capture.exe" method="Post">
<textarea id='tar' name="tar" style='width:50%;height:200px;'></textarea>
<button type="submit" style='height:50px;width:80px;margin:auto'>Envoyer</button>
</form>
</body>
</html>