js在ie8+，谷歌等获取摄像头进行拍照，并且获得base64转码图片
首先ie浏览器不兼容 html5 某些元素 ，所以我们不再采用传统方式获取ie摄像头。说明一下，此示例支持ie8+以上的版本，如果版本太低，自己更新一下就行了。
咱么此处采用flash插件。
没有flash插件的先去下载一个flash player，安装太简单，咱们就不说了。
接下来，咱们去下载一个jQuery-webcam-master点击clone or download 就可以下载了，下载完后到解压下来是这样
咱们要用的就是里面的这两个文件
jquery.webcam.min.js
jscam_canvas_only.swf 在使用js文件前 别忘记导入JQuery文件哦
把这两个文件导入你的web项目里面
接下来咱们开始书写html代码，html代码是这样的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery-webcam-js</title>
<script src="/Scripts/ie/jquery-1.10.2.min.js"></script>
<script src="/Scripts/ie/jquery.webcam.min.js"></script>
</head>
<body>
<button class="play">拍照</button>
<div id="status">倒计时</div>
<div id="webcam"></div>
</body>
</html>
可以直接复制进去。
接下来就是编写js脚本
<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: "/Scripts/ie/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); //上传给后台的图片数据
alert(Imagedata);
}
},
onCapture: function () { //捕获图像
webcam.save();
},
debug: function (type, string) { //控制台信息
//console.log(type + ": " + string);
},
onLoad: function () { //flash 加载完毕执行
//console.log('加载完毕！')
}
});
$(".play").click(function () {
webcam.capture();
});
</script>
可以直接复制进去。
如果你运行起来发现摄像头没有开启，不要着急 注意咱们上面两个文件的路径是否正确，是否引入了JQuery文件
如果没有其他问题 就可以看到你的浏览器会显示为这样
点击允许，如果不想每次都弹出这个框 可以去控制面板中找到你的plash 点击进去会这样
点击摄像头和麦克风 再点站点的摄像头设置 接着会显示下方的对话框 再点击你需要设置的网站 把下面的权限设为允许 ，下次进入就不会在需要点击允许，可以自动加载出来。
接下来你就可以点击拍照，在页面中显示啦。快来试试吧。
如果拍出来的像素不是自己想要的怎么，不要着急。淡定 咱们接下来就讲解反编译swf文件 拍成自己想要的像素大小的照片