2013-01-10 101 views
1

我无法抓拍图片不过,我可以看到自己的网络摄像头。我不知道什么是失踪。在为我的进步迄今:jQuery的网络摄像头插件不捕捉照片

JSP页面:

$(document).ready(function(){ 


     $("#camera").webcam({ 
       width: 315, 
       height: 240, 
       mode: "callback", 
       swffile: "swf/jscam_canvas_only.swf", 


       onLoad: function() { 

        var cams = webcam.getCameraList(); 
        for(var i in cams) { 
         jQuery("#canvas").append("<li>" + cams[i] + "</li>"); 
        } 
          jQuery("#canvas").hide(); 
       }, 


       onCapture: function() { 

        jQuery("#flash").css("display", "block"); 
        jQuery("#flash").fadeOut(100, function() { 
         jQuery("#flash").css("opacity", 1); 
        }); 
          jQuery("#canvas").show(); 
          webcam.save(); 
       }, 

       onSave: function(data) { 

        var col = data.split(";"); 
        var img = image; 

        for(var i = 0; i < 320; i++) { 
         var tmp = parseInt(col[i]); 
         img.data[pos + 0] = (tmp >> 16) & 0xff; 
         img.data[pos + 1] = (tmp >> 8) & 0xff; 
         img.data[pos + 2] = tmp & 0xff; 
         img.data[pos + 3] = 0xff; 
         pos+= 4; 
        } 

        if (pos >= 4 * 320 * 240) { 
         ctx.putImageData(img, 0, 0); 
         pos = 0; 
        } 
       } 





     }); 


}); 


    <div id="camera"></div><label>Canvas</label> 
         <div><p><canvas id="canvas" height="240" width="320"></canvas></p></div> 
         <a href="javascript:webcam.capture();changeFilter();void(0);">Take a picture instantly</a> 

回答

1

试试这个

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script src="http://www.xarg.org/download/jquery.webcam.min.js" type="text/javascript">  </script> 
</head> 
<body> 

<div id="webcam"> 
<span><a href="javascript:webcam.capture();void(0);">Take a picture instantly</a>  </span> 
</div> 

<script type="text/javascript"> 
jQuery("#webcam").webcam({ 
width: 320, 
height: 240, 
mode: "save", 
swffile: "/swf/jscam.swf", 

onCapture: function() { 
webcam.save('/upload.php'); 
    $('#webcam').hide(); 
    $('#image').show(); 
    setInterval(function() { 
var d = new Date(); 
jQuery("#image").attr("src", "/upload/image.jpg?"+d.getTime()); 
}, 2000); 
} 
}); 

</script> 

<img style="display:none;" id="image" src="/upload/image.jpg?<? echo rand(0,1000); ?>" width="320" border="0" alt="" /> 

</body> 
</html> 

和PHP

$str = file_get_contents("php://input"); 
file_put_contents("/upload/image.jpg", pack("H*", $str)); 

不要忘记设置上载权许可文件夹和正确的文件路径。