jiliangliang

jquery.webcam.js实现调用摄像头拍照兼容各个浏览器
jquery.webcam.js实现调用摄像头拍照兼容各个浏览器1.demo 可直接复制使用,需要在环境里运行。2...
扫描右侧二维码阅读全文
08
2019/11

jquery.webcam.js实现调用摄像头拍照兼容各个浏览器

jquery.webcam.js实现调用摄像头拍照兼容各个浏览器
1.demo 可直接复制使用,需要在环境里运行。
2.所需 js 文件和 swf 控件可在官方博客下载,地址http://www.xarg.org/project/jquery-webcam-plugin/
3.感谢你的阅读

webcam.zipdemo代码下载

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery-webcam-js</title>
<link href="cs.css" rel="stylesheet" type="text/css">
<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.webcam.min.js"></script>
</head>
<body>
    <button class="play">拍照</button>
    <div id="status">倒计时</div>
    <div id="webcam"></div>         
</body>
<script>
    var w = 320, h = 240;                                       //摄像头配置,创建canvas
    var pos = 0, ctx = null, saveCB, image = [];
    var canvas = document.createElement("canvas");
    $("body").append(canvas);
    canvas.setAttribute('width', w);
    canvas.setAttribute('height', h);
    ctx = canvas.getContext("2d");
    image = ctx.getImageData(0, 0, w, h);

    $("#webcam").webcam({
        width: w,
        height: h,
        mode: "callback",                       //stream,save,回调模式,流模式和保存模式
        swffile: "jscam_canvas_only.swf",
        onTick: function(remain) { 
            if (0 == remain) {
                $("#status").text("拍照成功!");
            } else {
                $("#status").text("倒计时"+remain + "秒钟...");
            }
        },
        onSave: function(data){              //保存图像
            var col = data.split(";");
            var img = image;
            for(var i = 0; i < w; 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 * w * h) {
                ctx.putImageData(img,0,0);      //转换图像数据,渲染canvas
                pos = 0;
                Imagedata=canvas.toDataURL().substring(22);  //上传给后台的图片数据
            }
        },
        onCapture: function () {               //捕获图像
            webcam.save();      
        },
        debug: function (type, string) {       //控制台信息
            console.log(type + ": " + string);
        },
        onLoad: function() {                   //flash 加载完毕执行
            console.log('加载完毕!')
            var cams = webcam.getCameraList();
            for(var i in cams) {
                $("body").append("<p>" + cams[i] + "</p>");
            }
        }
    });  

    $(".play").click(function(){
        webcam.capture(5);        //拍照,参数5是倒计时
    });

</script>
</html>

Last modification:November 9th, 2019 at 11:20 am
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment