javascript调用摄像头拍照上传二-------flash版

javascript调用浏览器拍照上传，虽然现在H5已经有个新功能方法getUserMedia()可以调用浏览器的摄像头

进行拍照生成图片上传；但是很不凑巧碰到了IE这个…；IE11及以下所有版本，包括微软抛弃IE后的新名称

Edge都不支持getUserMedia();据说Edge的下个版本会支持，但是那是以后的事了；想要兼容IE浏览器只能

换种思维使用Flash;虽然现在Flash的漏洞比较多，但是作为过渡，还是要使用，碰到IE没得办法；

---

flash版本我们选着现在兼容以及扩展比较好的插件（毕竟前端在去学flash编程，成本太高；）jquery.webcam.min.js；

官方网址：http://www.xarg.org/project/jquery-webcam-plugin/

官方网站是纯英文啊！本来想翻译一下，奈何英语二级的水平还是算了；
webcam给了前端很大的发挥空间，所自带的swf文件只是调用摄像头并显示图像仅此而已；
其他的样式，比如外边款，按钮等都可以随心所欲的设计；

---

webcam的原理是通过flash调用摄像头后，将图像输出到canvas画布中，在通过canvas中的方法
toDataURL()方法，生成图像的64位二进制码，将二进制码传到后台后，由后台去解析处理；

webcam中的相关方法及文件：

flash文件有两个：

1. jscam.swf；
2. jscam_canvas_only.swf；

我们使用canvas生成图片，一般都选着第二个jscam_canvas_only.swf；这个的体积比第一个要小的多
加载速度相对比较快；

调用方法：

$("#camera").webcam({
    width: 320,
    height: 240,
    mode: "callback",
    swffile: "../swf/jscam_canvas_only.swf",
    onTick: function() {},
    onSave: function() {},
    onCapture: function() {},
    debug: function() {},
    onLoad: function() {}
});

配置参数

width: flash影片的宽度；

height: flash影片的高度；

mode: 存储模式，有3种回调,保存,流；

1. Callback Interface：

   获取原始数据通过一个回调方法写在画布上；
   一旦用户已经完成加载整个页面并接受了flash的安全设置，之后摄像头会正常工作显示图像；
   用户通过点击按钮等操作触发方法webcam.capture()，进行拍照；改方法可以接收一个参数，
   该参数是一个整形的数值（以秒为单位）；用来做倒计时拍摄；给多少值就倒计时多少；每秒
   中后都会执行onTick()方法，直到最后一秒钟；

onTick: function(remain) {

    if (0 == remain) {
        jQuery("#status").text("Cheese!");
    } else {
        jQuery("#status").text(remain + " seconds remaining...");
    }
}

onCapture: function () {

    jQuery("#flash").css("display", "block");
    jQuery("#flash").fadeOut("fast", function () {
        jQuery("#flash").css("opacity", 1);
    });

    webcam.save();
}

onCapture方法会执行保存照片前的所有的操作，比如说拍照时的动画效果一闪一灭；
之后会执行save()方法；下面的例子中ctx就是canvas对象，通过putImageData生成图片显示在画布上；

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

swffile： flash文件存放地址；

onLoad： 摄像头准备好后调用的方法；

onLoad: function() {
    var cams = webcam.getCameraList();
    for(var i in cams) {
        jQuery("#cams").append("<li>" + cams[i] + "</li>");
        setCamera(cams[i]);
    }
}

• getCameraList()：获取电脑上所有的摄像机并以数组的形式返回，如果没有得到将抛出个错误并返回空的数组

• setCamera([index])：切换到不同的相机,参数是getCameraList方法中获取到的列表中的一个；

• capture([delay])：获取图像，也就是拍照后调用的方法；

• save([file])：点击拍照后调用的方法，将获取的图像保存；

debug：调试；

debug: function (type, string) {
    $("#status").html(type + ": " + string);
}

以下是官方的例子：

$(function() {

    var pos = 0, ctx = null, saveCB, image = [];

    var canvas = document.createElement("canvas");
    canvas.setAttribute('width', 320);
    canvas.setAttribute('height', 240);

    if (canvas.toDataURL) {

        ctx = canvas.getContext("2d");

        image = ctx.getImageData(0, 0, 320, 240);

        saveCB = 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);
                $.post("/upload.php", {type: "data", image: canvas.toDataURL("image/png")});
                pos = 0;
            }
        };

    } else {

        saveCB = function(data) {
            image.push(data);

            pos+= 4 * 320;

            if (pos >= 4 * 320 * 240) {
                $.post("/upload.php", {type: "pixel", image: image.join('|')});
                pos = 0;
            }
        };
    }

    $("#webcam").webcam({

        width: 320,
        height: 240,
        mode: "callback",
        swffile: "/download/jscam_canvas_only.swf",

        onSave: saveCB,

        onCapture: function () {
            webcam.save();
        },

        debug: function (type, string) {
            console.log(type + ": " + string);
        }
    });

});