最近做的项目遇到了个难题，使用video+canvas+getUserMedia()写的调用本地摄像头拍照不兼容IE。

原因：IE8及以下不支持HTML5标签：video和canvas；IE11及以下所有版本，包括Edge都不支持getUserMedia()。

所以，这几天在网上各种搜，发现想要兼容IE浏览器就只能使用Flash。

解决方案

方案一

flash+as3.0+swfobject实现摄像头拍照

方案分析：

1、使用 adobe flash + actionscript 制作swf文件；

2、采用swfobject.js插件实现页面调用swf文件。

有一篇博客写得特别好：flash+as3.0+swfobject实现摄像头拍照

这样可以自定义swf文件，但是代价好高啊，还要去学actionscript并且要装adobe flash CS6，花的时间太多了。

所以我想到既然有封装的swfobject插件可以更方便的插入flash，那是不是有兼容性好的封装好的控件可以直接调用摄像头。这个搜索过程真的是艰辛无比啊！终于让我找到了jQuery摄像头插件“jquery-webcam-plugin”。

方案二

jquery-webcam-plugin+canvas+后台处理

方案分析：

使用 jquery-webcam-plugin 显示本地摄像头。

点击拍照按钮后，

(a) 针对 IE9 及以上：通过flash调用摄像头后，将图像直接输出到canvas画布中，再通过canvas中的方法 toDataURL()方法，生成图像的base64编码传到后台。

(b)针对 IE8 及以下：因为 IE8 无法用canvas.toDataURL() ，因此拍照后无法直接将图片进行显示。这时通过flash调用摄像头，将得到的像素点阵传到后台，让后台处理，生成图像的 base64 编码，再在前端进行显示。

/* CSS */

.borderstyle { border:1px solid #b6b6b6; width:320px; height:240px; }

#camera { float:left; margin:10px; }

#canvas { width:320px; height:240px; margin:10px; }

/* camera.js代码 */

$(function () {

var w = 320, h = 240;

var pos = 0,

ctx = null,

saveCB;

var canvas = document.getElementById("canvas")

if (canvas.toDataURL) {

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

var image = ctx.getImageData(0, 0, w, h);

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

var Imagedata = canvas.toDataURL().substring(22); //上传给后台的图片数据

pos = 0;

}

};

} else {

var image = [];

saveCB = function (data) {

image.push(data);

pos += 4 * 320;

if (pos >= 4 * 320 * 240) {

$.post(URL, {briStr: image.join(';')}, function (data) {

console.log(data);

//在页面显示base64图片处理

pos = 0;

image = [];

});

}

};

}

$("#camera").webcam({

width: w,

height: h,

mode: "callback",

swffile: "plugins/jQuery-webcam-master/jscam.swf",

onSave: saveCB,

onCapture: function () { //捕获图像

webcam.save();

},

debug: function (type, string) { //控制台信息

//console.log(type + ": " + string);

},

onLoad: function () { //flash 加载完毕执行

//console.log('加载完毕！')

}

});

$(".play").click(function () {

webcam.capture();

});

});