IE11怎么调取摄像头并拍照

2023-01-22 03:30| 来源: 网络整理| 查看: 265

2021/01/31最近公司需求做一个人脸识别系统，但是前端需要使用IE11浏览器，我们从网上搜集了很多资料证明，IE只能使用flash才行（此时flash已经宣布停止维护，但是它的ActiveX依旧可以使用）。

需要的jar包和swf和flash：

名称用途 bluebird.js IE不兼容promis可以引入这个 webcammin.js 兼容IE调取摄像头 jquery-182.js 使用jquery的webcam函数 jscam.swf 兼容IE调取摄像头 jscam_canvas_only.swf 兼容IE调取摄像头 Adobe Flash Player 29 ActiveX 必须使用29或以下版本，最新的34版本不管用！

以上文件如果需要可以找我，发我私信即可。

授人以鱼不如授人以渔，网上很多方案都是半半拉拉的，我在这里整合一下，弄一套完整的粘贴即用的方案，第一次写可能不完整，若出现问题欢迎及时指正和联系。

以上文件全部引入后，编写jsp：只要以上文件成功引入，以下代码应该是粘贴即用（代码里有对用户的是否登录的校验需要删减以下）拍照后，生成base64的编码传到后台调用接口进行人脸识别。

修改用户姓名人脸采集 ; ; 摄像区域截图区域 ; //var canvas = document.createElement("canvas"); //canvas.setAttribute('width', 320); //canvas.setAttribute('height', 240); var videow = document.getElementById('cam').clientWidth; var videoh = document.getElementById('cam').clientHeight; var canvas = document.getElementById("canvas");//注意不要直接使用css设置画布的宽高 canvas.setAttribute('width', videow);//通过代码设置宽高属性，避免图片无法自适应画布的问题 canvas.setAttribute('height', videoh); // canvas.width=320; // canvas.height=240; var image = new Array(); var ctx = null; var pos = 0; var w = 320;//图片的宽高，无论图片的尺寸是否大于画布的尺寸都能自适应 var h = 240; //getContext("2d") 对象内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 //可理解为返回一个用于在画布上绘图的环境，并获得画布的绘图方法对象 var ctx = canvas.getContext("2d"); image = ctx.getImageData(0, 0, 500, 400);//复制画布上指定矩形的像素数据,width,height,data,这样不需要自己手动设置 var img = image;//设置img的属性和值，拍照时重新给data赋值 //解释Canvas 的ImageData对象，width:图片宽度，height:高度，单位都为像素 //data Uint8ClampedArray类型的一维数组，包含着RGBA格式的整型数据，范围是0-255 //rgba(red, green, blue, alpha),前三个红绿蓝，范围0-255整数或0%-100%，alpha透明度，0.0-1.0 $(document).ready(function () { $("#webcam").webcam({ width: 500, height: 400, mode: "callback", swffile: "js/jscam.swf", onTick: function (remain) { }, onSave: function (data) { //图片处理 var col = data.split(";"); //x轴上的每一个像素的rgba for (var i = 0; i > 16) & 0xff;//red img.data[pos + 1] = (tmp >> 8) & 0xff;//green img.data[pos + 2] = tmp & 0xff;//blue img.data[pos + 3] = 0xff;//Alpha pos += 4; } //post>= 4 * 320(x轴像素) * 240(y轴像素) 表示读取图像数据完毕 if (pos >= 4 * 500 * 400) { ctx.putImageData(img, 0, 0);//将图像显示到画布 image = new Array(); pos = 0; } }, onCapture: function () { //拍照，处理图片 webcam.save(); }, onLoad: function () { var cams = webcam.getCameraList();//获取本机摄像头设备 for (var i in cams) { jQuery("#cams").append("" + cams[i] + ""); } } }); //点击拍照按钮 $("#cli").click(function () { window.webcam.capture(); }) $("#sc").click(function () { var base64Img = canvas.toDataURL('image/jpg'); form1.base64img.value = base64Img; var qweqew= $('form1').serialize(); console.log(qweqew); console.log('base64Img',base64Img); new Ajax.Request(//清除ajax缓存的***方法就是让他每次访问的url都不同，那就加个随机数喽 'login.do?method=rlcj',{ method:'post', parameters: { 'base64img':base64Img }, onComplete:showSucess } ); }) function showSucess(response){ alert("用户姓名修改成功，请重新登录！"); } });

【本文地址】

公司简介

联系我们