JS调用本地摄像头拍照(兼容各大浏览器及IE8+)
2018-01-12 17:08
603 查看
最近做的项目遇到了个难题,使用video+canvas+getUserMedia()写的调用本地摄像头拍照不兼容IE。
原因:IE8及以下不支持HTML5标签:video和canvas;IE11及以下所有版本,包括Edge都不支持getUserMedia()。
所以,这几天在网上各种搜,发现想要兼容IE浏览器就只能使用Flash。
方案分析:
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 显示本地摄像头。
点击拍照按钮后,
(a) 针对 IE9 及以上:通过flash调用摄像头后,将图像直接输出到canvas画布中,再通过canvas中的方法 toDataURL()方法,生成图像的base64编码传到后台。
(b)针对 IE8 及以下:因为 IE8 无法用canvas.toDataURL() ,因此拍照后无法直接将图片进行显示。这时通过flash调用摄像头,将得到的像素点阵传到后台,让后台处理,生成图像的 base64 编码,再在前端进行显示。
base64图片在页面上显示参考:base64图片在各种浏览器的兼容性处理
原因: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>
相关文章推荐
- jquery.webcam.js实现调用摄像头拍照兼容各个浏览器
- HTML5调用摄像头实现拍照功能(兼容各大主流浏览器)
- FLASH 调用摄像头 JS中方法触发拍照,并将照片保存到本地文件夹
- HTML5调用摄像头实现拍照功能(兼容各大主流浏览器)
- js读取本地xml文件 兼容IE Firfox Chrome 等浏览器
- OpenCV011:调用本地左右摄像头拍照并保存到指定路径
- 利用html5调用本地摄像头拍照上传图片
- cocos2dx_js调用本地摄像头及相册
- 在PHP调用JS中的方法,以此来解决浏览器兼容问题
- Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
- js调用本地摄像头截图并用ajax上传至后台服务器完成交互
- js 调用本地摄像头报安全错误
- 微信浏览器内兼容android iOS调取手机摄像头进行拍照、打水印、压缩、预览
- 调用iframe 中的js[兼容各种浏览器]
- js调用exe文件 兼容所有浏览器
- 前台JS(type=‘file’)读取本地文件的内容,兼容各种浏览器 二
- 网页调用本地程序(Windows下浏览器全兼容)
- js判断上传文件的大小,及确认文件是否在本地存在,兼容firefox、chrome、ie等浏览器
- 能够正常使用的,经过测试的java+jquery+webcam调用本地摄像头拍照,然后将拍照结果上传数据库blob字段功能的实现(二)
- 利用html5调用本地摄像头拍照上传图片