Catturare un'immagine da una webcam

Sto tentando di catturare casualmente un'immagine da una webcam e quindi salvarla sul mio server, in questo momento sto usando getUserMedia per trasmettere la webcam all'elemento video, quindi posso acquisire un'immagine per una tela usando un pulsante ma non sono sicuro di come salvare quell'immagine dalla tela al mio server.Catturare un'immagine da una webcam

Un altro problema è getUserMedia funziona solo in Chrome, Opera e Firefox, c'è qualche alternativa per IE?

Questo è quello che sto attualmente lavorando con:

<video id="video" width="640" height="480" autoplay></video> 
<button id="snap">Snap Photo</button> 
<canvas id="canvas" width="640" height="480"></canvas> 
<button id="getBase" onclick="getBase()">Get Base64</button> 
<textarea id="textArea"></textarea> 

<script> 

    // Put event listeners into place 
    window.addEventListener("DOMContentLoaded", function() { 
     // Grab elements, create settings, etc. 
     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); 
     }; 

     // Put video listeners into place 
     if(navigator.getUserMedia) { // Standard 
      navigator.getUserMedia(videoObj, function(stream) { 
       video.src = stream; 
       video.play(); 
      }, errBack); 
     } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed 
      navigator.webkitGetUserMedia(videoObj, function(stream){ 
       video.src = window.webkitURL.createObjectURL(stream); 
       video.play(); 
      }, errBack); 
     } 

     // Trigger photo take 
     document.getElementById("snap").addEventListener("click", function() { 
      context.drawImage(video, 0, 0, 640, 480); 
     }); 

     document.getElementByID("getBase").addEventListener("click", getBase()); 

    }, false);     

    function getBase(){ 
     var imgBase = canvas.toDataURL("image/png"); 

     document.getElementByID("textArea").value=imgBase; 
    } 
</script>`

Grazie Cumuli

fonte

2013-02-24 TurtleTopiary

È possibile utilizzare canvas.toDataUrl per ottenere una stringa codificata base64 che si può inserire come parametro a uno script su il tuo server che lo leggerà e lo memorizzerà come file immagine.

Qui è una versione ridotta di una effettiva attuazione di questo approccio:

<script> 
function saveImage(){ 
    var xmlhttp; 
    xmlhttp=((window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP")); 
    xmlhttp.onreadystatechange=function(){ 
     if (xmlhttp.readyState==4){ 
      if(xmlhttp.status==200){ 
       //handle success     
      } 
     } 
    } 
    xmlhttp.open("POST",baseURL,true); 
    var oldCanvas = under.toDataURL("image/png"); 
    var params=oldCanvas; 
    xmlhttp.setRequestHeader("Content-type", "application/upload"); 
    xmlhttp.setRequestHeader("Content-length", params.length); 
    xmlhttp.setRequestHeader("Connection", "close"); 
    xmlhttp.send(params); 
} 
</script>

e qui è un esempio di script PHP che accetta la stringa base64, converte in .png, dà un nome casuale, e salva:

<?php 
if((isset($GLOBALS["HTTP_RAW_POST_DATA"]))){ 
    //some validation is necessary, this is just a proof of concept 
    if(isset($GLOBALS["HTTP_RAW_POST_DATA"])){ 
     $params=explode('&',$GLOBALS["HTTP_RAW_POST_DATA"]); 
     $imgsrc=str_replace(' ','+',$params[0]); 
     $im = imagecreatefrompng($imgsrc); 
    } 
    if($im){ 
     $background = imagecolorallocatealpha($im, 255,255,255,127); 
     imagecolortransparent($im, $background); 
     //random file name 
     $m = rand(10e16, 10e24); 
     $filename=base_convert($m, 10, 36); 
     //save image 
     imagepng($im, 'images/'.$filename.'.png'); 
     imagedestroy($im); 
     $size = getimagesize('images/'.$filename.'.png'); 
     $iH=$size[1]; 
     $iW=$size[0]; 
     echo "{\"filename\":\"".$filename."\",\"width\":\"".$iW."\",\"height\":\"".$iH."\"}"; 
    } 
} 
?>

fonte

2013-02-24 21:37:46

Ho tentato di utilizzare toDataUrl, ho aggiunto un clic su un pulsante per chiamare la seguente funzione 'function getBase() { var imgBase = canvas.toDataUrl(); document.getElementByID ("textArea"). Value = imgBase; } Questo dovrebbe essere l'output della stringa Base64 in un'area di testo che ho creato. Qualche indizio sul perché non lo fa? – TurtleTopiary

prova a specificare un formato come questo: '.toDataURL (" image/png ");' forse? –

oh, e forse Url contro URL? –

È possibile utilizzare getUserMedia.js o altre librerie simili che comprendono un ripiego Flash per coprire IE. Sebbene Flash sia diventato impopolare di recente.

CanIUse.com's stream page contiene informazioni sul supporto per questa funzione.

Come è stato detto nella risposta di Robot Woods, canvas.toDataUrl catturerà l'immagine per voi.

fonte

2015-09-16 20:00:26

Catturare un'immagine da una webcam

risposta

Problemi correlati