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文件有两个：

jscam.swf；

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种回调,保存,流；

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

});