如何在HTML页面中使用网络摄像头拍摄快照？

如果我保存包含图纸的<canvas>。一切工作正常。但是，如果我想保存包含图像（来自网络摄像头流的帧）的canvas，它不起作用，它不会向服务器发送任何内容。有人对此有一些想法吗？如何在HTML页面中使用网络摄像头拍摄快照？

HTML：

<video id="VideoCamera" autoplay></video> 
<canvas id="testCanvas" width="300" height="300"></canvas> 
<textarea id="debugConsole" rows="10" cols="60">Data</textarea> 
<button onclick="saveViaAJAX();">Save Via AJAX</button> 
<input id="button" type="button" value="photo" onclick="snapshot()" /> 
<input id="button1" type="button" value="bubble" onclick="bubble()" /> 

<script type="text/javascript"> 
    // This portion webcam setup 
    var video = document.getElementsByTagName('video')[0]; 
    var localMediaStream = null; 
    if (navigator.getUserMedia) { 
     navigator.getUserMedia('video', successCallback, errorCallback); 
     function successCallback(stream) { 
      video.src = stream; 
      localMediaStream = stream; 
     } 
     function errorCallback(error) { heading.textContent = "An error occurred: [CODE " + error.code + "]"; } 
    } 
    else { 
     heading.textContent = "Native web camera streaming is not supported in this browser!"; 
    } 

    //draw something in canvass 
    var canvas = document.getElementById("testCanvas"); 
    if (canvas.getContext) { 
     var canvasContext = canvas.getContext("2d");  
     canvasContext.fillStyle = "rgb(" + (parseInt(Math.random() * 255)) + "," + (parseInt(Math.random() * 255)) + "," + (parseInt(Math.random() * 255)) + ")"; 
     canvasContext.beginPath(); 
     canvasContext.arc(Math.random() * 350, Math.random() * 350, Math.random() * 20, 0, Math.PI * 2, true); 
     canvasContext.fill(); 
    } 

    // This portion of the code simply draws random circles into the canvas (it has nothing todo with saving the canvas). 
    function bubble() { 
     var canvas = document.getElementById("testCanvas"); 
     var canvasContext = canvas.getContext("2d"); 
     for (i = 0; i < 150; i++) { 
      canvasContext.fillStyle = "rgb(" + (parseInt(Math.random() * 255)) + "," + (parseInt(Math.random() * 255)) + "," + (parseInt(Math.random() * 255)) + ")"; 
      canvasContext.beginPath(); 
      canvasContext.arc(Math.random() * 350, Math.random() * 350, Math.random() * 20, 0, Math.PI * 2, true); 
      canvasContext.fill(); 
     } 
    } 

    // This portion of the code take snaphot from wecam 
    function snapshot() { 
     var canvas = document.getElementById("testCanvas"); 
     var canvasContext = canvas.getContext("2d"); 
     canvasContext.drawImage(video, 0, 0, 240, 320); 
    } 


    // This portion of the code save canvass to server 
    function saveViaAJAX() { 
     var canvas = document.getElementById("testCanvas"); 
     var canvasContext = canvas.toDataURL("image/png"); 
     var postData = "canvasData=" + canvasContext; 
     var debugConsole = document.getElementById("debugConsole"); 
     debugConsole.value = canvasContext; 

     var ajax = new XMLHttpRequest(); 
     ajax.open("POST", 'Save.php', true); 
     ajax.setRequestHeader('Content-Type', 'canvas/upload'); 
     ajax.setRequestHeader('Content-TypeLength', postData.length); 

     ajax.onreadystatechange = function() { 
      if (ajax.readyState == 4) { 
       debugConsole.value = canvasContext + " " + debugConsole.value; 
      } 
     } 
     ajax.send(postData); 
    }

PHP代码save.php：

$png =$_POST['data']; 
$filteredData=substr($png, strpos($png, ",")+1); 
$unencodedData=base64_decode($filteredData); 
$fp = fopen('image.png', 'wb'); 
fwrite($fp, $unencodedData); 
fclose($fp);

谢谢！

来源

2012-05-03 user1371622

可能重复[从相机捕捉图像到窗体或html5画布]（http://stackoverflow.com/questions/3782169/capture-image-from-camera-into-form-or-html5-canvas） – Quentin

你在错误中得到任何错误控制台调用canvas.toDataURL（）方法？ – hallvors