前端获取电脑摄像头权限并拍照进行人脸识别

为什么要做这个呢？

不同用户具有不同的权限如果管理员用户被别人知晓了怎么办？为了解决该用户账号密码泄露导致的误操作。

前端实现思路是什么呢？

前端思想是获取摄像头权限通过canvas 获取base64图片然后转为二进制文件流通过FormData（form表单提交）和后端交互的方式进行识别

后端的实现思路呢？

创建一个sql 里面存一些有权限的人员信息包含照片等用上传的照片和sql里面的数据进行对比人脸识别进而知道进入当前系统的人是否具有某些权限当然为了界面友好还需要有权限人员库用于展示

会遇到什么问题？

中间遇到了低版本浏览器无法使用canvas的问题所以此方法只支持最新的浏览器

代码在哪里啊？(只是一个demo 下个文章我会发项目中的部分代码基于vue的啊)

就在下面了哈哈


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>摄像头拍照</title>
</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>#capture{position: absolute;right: 190px;bottom: -40px;}#video{position: absolute;right: 0;top: 0;}#img{position: absolute;left: 0;top: 0;}.auto{position: absolute;left: 50%;top: 50%;height: 320px;margin-top: -160px;}#sure{position: absolute;left: 210px;bottom: -40px;}button{cursor: pointer;margin: 0 auto;border: 1px solid #f0f0f0;background: #5CACEE;color: #FFF;width: 100px;height: 36px;line-height: 36px;border-radius: 8px;text-align: center;/*禁止选择*/-webkit-touch-callout: none; /* iOS Safari */-webkit-user-select: none; /* Chrome/Safari/Opera */-khtml-user-select: none; /* Konqueror */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* Internet Explorer/Edge */user-select: none; /* Non-prefixed version, currently not supported by any browser */}</style>
<body><div class="auto"><video id="video" width="480" height="320" autoplay></video><canvas id="canvas" width="480" height="320" style="display: none;"></canvas><img src="./body_default.png" id="img" width="480" height="320" style="margin-left: 20px;"><div><button id="capture" title="点击进行拍照">拍照</button></div><div><button id="sure" title="是否用这张图片进行验证">确认</button></div></div><script>var file ,stream;//访问用户媒体设备的兼容方法function getUserMedia(constraints, success, error) {if (navigator.mediaDevices.getUserMedia) {//最新的标准APInavigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);} else if (navigator.webkitGetUserMedia) {//webkit核心浏览器navigator.webkitGetUserMedia(constraints,success, error)} else if (navigator.mozGetUserMedia) {//firfox浏览器navigator.mozGetUserMedia(constraints, success, error);} else if (navigator.getUserMedia) {//旧版APInavigator.getUserMedia(constraints, success, error);}}let video = document.getElementById('video');let canvas = document.getElementById('canvas');let context = canvas.getContext('2d');function success(stream) {//兼容webkit核心浏览器let CompatibleURL = window.URL || window.webkitURL;//将视频流设置为video元素的源console.log(stream);stream = stream;//video.src = CompatibleURL.createObjectURL(stream);video.srcObject = stream;video.play();}function error(error) {console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);}if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {//调用用户媒体设备, 访问摄像头getUserMedia({video : {width: 480, height: 320}}, success, error);} else {alert('不支持访问用户媒体');}// base64转文件document.getElementById('capture').addEventListener('click', function () {context.drawImage(video, 0, 0, 480, 320);      // 获取图片base64链接var image = canvas.toDataURL('image/png');// 定义一个imgvar img = document.getElementById("img");//设置属性和src//img.id = "imgBoxxx";img.src = image;//将图片添加到页面中//document.body.appendChild(img);function dataURLtoFile(dataurl, filename) {var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}file = new File([u8arr], filename, {type: mime});return new File([u8arr], filename, {type: mime});}console.log(dataURLtoFile(image, 'aa.png'));})document.getElementById('sure').addEventListener('click', function () {var formData = new FormData();formData.append("file",file);$.ajax({type: "POST", // 数据提交类型url: "***********", // 发送地址data: formData, //发送数据async: true, // 是否异步processData: false, //processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用datacontentType: false,success:function(data){if(data.code === 200){console.log(`${data.message}`);}else{console.log(`${data.message}`);}},error:function(e){self.$message.warning(`${e}`);//console.log("不成功"+e);}});stream.getTracks()[0].stop();//结束关闭流})</script>
</body>
</html>

前端获取电脑摄像头权限并拍照进行人脸识别相关推荐

JAVA 调用摄像头拍照实现人脸识别
JAVA 调用摄像头拍照实现人脸识别今天想试试百度的api 实现一下近年的热点,人脸识别,虽然咱不会,百度会呀,还免费给我无限用呀. 注册百度云账号等:略. Java中调用摄像头,网上搜到两种方 ...
C#打开摄像头后获取图片，调用face_recognition进行人脸识别
运行效果如截图:左边和保存的图片做对比,打印相似度,部分打印内容为python中的打印输出,可以用来做结果判断.右边打开摄像头后,可以单张图片进行人脸识别,或者一直截图镜头中的图片进行比对.期中pyt ...
ios识别人脸自动拍照_iOS12人脸识别测颜值捷径安装使用教程 iPhone怎么测颜值
iPhone怎么测颜值?要实现这个功能,以往我们一般需要借助一些相机APP或在线工具来实现,不过今天小编发现了一个很有意思的捷径,通过"人脸识别测颜值"捷径,可以一键人脸识别测照片 ...
js获取摄像头权限实现拍照功能
首先说一下js打开摄像头的流程: 使用getUserMedia打开摄像头然后将获取到的流媒体转成url放在video标签中的src中: 使用canvas的drawImage方法将video的内容绘至c ...
vue基于face-api.js实现人脸识别
一.face-api.js Face-api.js 是一个 JavaScript API,是基于 tensorflow.js 核心 API 的人脸检测和人脸识别的浏览器实现.它实现了一系列的卷积神经网 ...
vue 拍照人脸识别_安排上了！PC人脸识别登录，出乎意料的简单
推荐阅读: 微服务实战文档分享,阿里内部的Spring cloud微服务精髓都在里面去面试3W月薪的Java岗位,被虐哭了,原来是我这些技术点还有欠缺春招失厉,狂刷200+面试文档,终斩获头条,阿 ...
Python+OpenCv实现AI人脸识别身份认证系统(2)——人脸数据采集、存储
原 Python+OpenCv实现AI人脸识别身份认证系统(2)--人脸数据采集.存储 2019年07月02日 08:47:52 不脱发的程序猿阅读数 602更多所属专栏: 人脸识别身份认证系统设 ...
PC人脸识别登录，出乎意料的简单
之前不是做了个开源项目嘛,在做完GitHub登录后,想着再显得有逼格一点,说要再加个人脸识别登录,就我这佛系的开发进度,过了一周总算是抽时间安排上了. 源码在文末其实最近对写文章有点小抵触,写的东西 ...
java人脸识别_自从加了PC人脸识别登录功能，网站立马显得高大上
之前不是做了个开源项目嘛,在做完GitHub登录后,想着再显得有逼格一点,说要再加个人脸识别登录,就我这佛系的开发进度,过了一周总算是抽时间安排上了. 源码在文末其实最近对写文章有点小抵触,写的东西 ...