最近做的项目遇到了个难题，使用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();});});

base64图片在页面上显示参考：base64图片在各种浏览器的兼容性处理

<!-- index.html -->
<body>
<div><div id="camera" class="borderstyle"></div><canvas id="canvas" class="borderstyle" width="320px" height="240px"></canvas><div id="showImg"></div><button class="play">拍照</button>
</div>
<script src="camera.js"></script>
</body>

JS调用本地摄像头拍照（兼容各大浏览器及IE8+）相关推荐

摄像头网页服务器,js调用本地摄像头拍照并上传到web服务器
[实例简介] js调用本地摄像头拍照并上传到web服务器.后台使用java实现图片的接收和存储,上传的图片默认保存到项目下的images文件夹中. [实例截图] [核心代码] MyCamera └── ...
html5 调用摄像头支持IE,JS调用本地摄像头拍照（兼容各大浏览器及IE8+）
最近做的项目遇到了个难题,使用video+canvas+getUserMedia()写的调用本地摄像头拍照不兼容IE. 原因:IE8及以下不支持HTML5标签:video和canvas:IE11及以下 ...
js调用本地摄像头拍照截图，提交后台
今天有个需求,需要在前端界面调用本地摄像头,然后拍照结束后可以截取预览,最后将结果提交到后台.查了网上很多的插件,发现适合的非常少,于是决定自己修改一个. 这里我修改了一个jquery插件,把摄像头拍 ...
利用python调用本地摄像头拍照，对图片命名并保存到指定位置，带界面
1.需求: 因项目需要做一个以图搜图的小程序,需要储备零件图库,约1000种 2.原计划&痛点原本想通过手机挨个拍照,再拷贝出来,重命名,这样会耽误大量时间,且容易出错 3.解决方案于是做 ...
php h5 调用摄像头_利用html5调用本地摄像头拍照上传图片
[php]代码库html5概念啥的就不废话了,不知道的百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的标签来获取本地摄像头,在html5之前,要在浏览器获取本地摄像头只有通过插件( ...
php调用本地摄像头,javascript 调用本地摄像头拍照 ajax提交上传
最近在做一个小应用,里面有一个功能就是需要打开摄像头拍照并且上传,今天就记录一下这个小功能. HTML篇: 这里我是用的layui的样式,需要先引用layui的样式,才会有上图的效果. * 照片: 点 ...
vue+springboot实现调用本地摄像头拍照上传后端使用百度ocr识别身份证信息
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一.前端二.后端总结提示:以下是本篇文章正文内容,下面案例可供参考一.前端 1.首先进入页面打开摄像头 2.点击手动 ...
h5+ 调用本地摄像头拍照
<html> <div id="form"><div class="name-box"><span>姓名< ...
js调用本地摄像头demo
效果: html <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...

JS调用本地摄像头拍照（兼容各大浏览器及IE8+）

解决方案

方案一

方案二

JS调用本地摄像头拍照（兼容各大浏览器及IE8+）相关推荐

最新文章

热门文章