Chụp ảnh từ webcam

Question

Tôi đang cố chụp ngẫu nhiên một hình ảnh từ webcam rồi lưu nó vào máy chủ của tôi, ngay bây giờ tôi đang sử dụng getUserMedia để truyền trực tuyến webcam thành phần tử video sau đó tôi có thể chụp ảnh một bức tranh bằng cách sử dụng một nút nhưng tôi không chắc chắn làm thế nào để lưu hình ảnh đó từ vải vào máy chủ của tôi.

Một vấn đề khác là getUserMedia chỉ hoạt động trong Chrome, Opera và Firefox, có cách nào khác cho IE không?

Đây là những gì tôi đang hiện đang làm việc với:

<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>` 

Cảm ơn Heaps

Answer 1

Bạn có thể sử dụng canvas.toDataUrl để có được một mã hóa base64 chuỗi mà bạn có thể đăng bài như một tham số để một kịch bản trên máy chủ của bạn sẽ đọc và lưu trữ dưới dạng tệp hình ảnh.

Đây là một phiên bản rút gọn của một thực hiện thực tế của phương pháp này:

<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> 

và đây là một kịch bản ví dụ PHP chấp nhận chuỗi base64, chuyển thành một .png, cung cấp cho nó một tên tập tin ngẫu nhiên, và lưu:

<?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."\"}"; 
    } 
} 
?> 

Answer 2

Bạn có thể sử dụng getUserMedia.js hoặc các thư viện tương tự khác bao gồm dự phòng Flash để che IE. Mặc dù Flash gần đây không được ưa chuộng.

CanIUse.com's stream page có thông tin liên quan đến hỗ trợ cho tính năng này.

Như đã nói trong câu trả lời của Robot Woods, canvas.toDataUrl sẽ lấy hình ảnh cho bạn.