浏览器调取摄像头人脸抓拍实现

基于juqery-webcam 实现摄像头调取

uqery-webcam 插件下载地址：https://www.xarg.org/project/jquery-webcam-plugin/

人脸识别 jquery.facedetection.js下载 https://github.com/jaysalvat/jquery.facedetection

<html><div id="webcam"></div><input id="snapBtn" type="button" value="capture" />
<script src="jquery-1.11.3.js"></script>
<script src="jquery.webcam.js"></script>
<script src="jquery.facedetection.js"></script>
<canvas id="canvas" width="320" height="240"></canvas>
<img id="picture" src="">
</html><script> var w = 320, h = 240;
var pos = 0, ctx = null, saveCB, image;var canvas =  document.getElementById('canvas');
//canvas.setAttribute('width', w);
//canvas.setAttribute('height', h);
var ctx=canvas.getContext("2d");
image = ctx.createImageData(320,240);
jQuery("#webcam").webcam({width: 320,height: 240,mode: "stream",swffile: "jscam_canvas_only.swf", // canvas only doesn't implement a jpeg encoder, so the file is much smalleronTick: function(remain) {if (0 == remain) {jQuery("#status").text("Cheese!");} else {jQuery("#status").text(remain + " seconds remaining...");}},onSave: 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) {// 将图片显示到canvas中ctx.putImageData(img, 0, 0);// 取得图片的base64码pos = 0;}// Work with the picture. Picture-data is encoded as an array of arrays... Not really nice, though =/},onCapture: function () {webcam.save();// Show a flash for example},debug: function (type, string) {// Write debug information to console.log() or a div, ...},onLoad: function () {// Page loadvar cams = webcam.getCameraList();for(var i in cams) {jQuery("#cams").append("<li>" + cams[i] + "</li>");}}
});
setInterval (function () {try {webcam.capture();}catch(e){console.log(e);}$('#canvas').faceDetection({complete: function (faces) {ctx.strokeStyle = "#DC143C";for (var i = 0; i < faces.length; i++) {ctx.strokeRect(faces[i].x,  faces[i].y , faces[i].width, faces[i].height);}},error:function (code, message) {alert('Error: ' + message);}});},1000);$('#snapBtn').on('click',function () {webcam.capture();$('#picture').faceDetection({complete: function (faces) {if (faces.length >0) {console.log("this has "+ faces.length )}}});});</script>

后台图片识别服务采用python

代码放在百度链接：https://pan.baidu.com/s/14ZT3dCALYHa7wzlJ97Cr8A
提取码：1111
web_service_two_picture.exe 为打包好的服务程序

浏览器调取摄像头人脸抓拍实现相关推荐

浏览器调取摄像头拍照并有遮罩层
近来在写一个公众号的项目,因为开发需求,需要调取手机摄像头拍照.最重要的是要有遮罩层,这就限制了不能调用手机自带的摄像头. 项目框架是vue-cli,中间查了很多资料,有用原生js写的(虽然就是用na ...
IE11怎么调取摄像头并拍照
2021/01/31最近公司需求做一个人脸识别系统,但是前端需要使用IE11浏览器,我们从网上搜集了很多资料证明,IE只能使用flash才行(此时flash已经宣布停止维护,但是它的ActiveX依旧 ...
_ISD-SMG518L2CT-F 海康威视测温人脸安检门温度精度±0.5℃ 人脸抓拍金属探测
ISD-SMG518L2CT-F 海康威视测温人脸安检门无感测温:可对通过安检门的人员进行脸部温度测试并进行人员准确匹配, 温度精度:±℃, 搭配黑体精度可达 ±℃ 人脸抓拍: 可对通过安检门的人员 ...
hwd分别是长宽高_DS-2CD7A87HWD-XZS 海康威视800万AI人脸抓拍比对筒型网络摄像机
DS-2CD7A87HWD-XZS 海康威视800万AI筒型网络摄像机支持人脸抓拍人脸前端比对车辆抓拍车牌识别支持H.265编码内置电动变焦2.8-12mm或者8-32mm镜头 DS-2C ...
普通IPC接入神目爱买系统操作说明（智能人脸抓拍盒利旧方案）
1.神目智能人脸抓拍盒介绍智能人脸抓拍盒是一款内嵌领先深度学习人脸抓拍算法,针对人像工程升级改造而开发的智能运算前置设备.产品采用高性能处理器和嵌入式Linux操作系统,支持抓拍机.普通IPC或视频 ...
【166】VS2022调试通过海康人脸抓拍SDK的C++代码
具体的开发环境配置方法可以参考 [160]VS2022调试通过海康摄像头烟火识别SDK 下面是人脸抓拍的C++代码,把原来示例中的CreateFile函数改成了CreateFileA函数,避免出现无法 ...
将数字标牌平板变成爱买AISHOP人脸抓拍机
pcDuino 7寸平板门禁设备内嵌一个pcDuino9,设备配有一个高清液晶显示屏,一个带有8兆高清宽动态传感器摄像头,摄像头镜头为6毫米,以及一个液晶条,用来照亮屏幕前面的人脸.设备内嵌神目人脸识 ...
php调取摄像头实现拍照功能
最近做的商户后台要实现调取摄像头拍摄用户打卡照片的功能,找资料研究了下,终于黄天不负有心人,成功了,下面我分步骤将代码贴出来,希望能有帮助代码有点多,但是每一步都很好理解,首先是HTML代码,写一个 ...
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码。单纯的h5网页不涉及真机
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码. 单纯的h5网页不涉及真机 demo链接前端同学可以加我一起交流一起进步案例描述:需求是生成条形码并且在vue项目中实现扫一扫功能 ...

浏览器调取摄像头人脸抓拍实现

浏览器调取摄像头人脸抓拍实现相关推荐

最新文章

热门文章