Jquery 网络摄像头插件不拍照答案

【问题标题】：Jquery Web Cam Plugin Not Snapping PhotoJquery 网络摄像头插件不拍照
【发布时间】：2013-01-10 16:23:37
【问题描述】：

我无法拍照，但我可以在网络摄像头上看到自己。我不确定缺少什么。以下是我到目前为止的进展：

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>

【问题讨论】：

标签： jquery html webcam

【解决方案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));

不要忘记设置正确的上传文件夹权限和正确的文件路径。

【讨论】：