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

最新推荐文章于 2024-05-09 11:06:54 发布

wen_binObject

最新推荐文章于 2024-05-09 11:06:54 发布

阅读量1w

点赞数 13

分类专栏： javascript 个人日记文章标签：前端获取电脑摄像头权限前端人脸识别 canvas转图片前端上传文件

本文链接：https://blog.csdn.net/wen_binobject/article/details/88814767

版权

为什么要做这个呢？

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

前端实现思路是什么呢？

前端思想是获取摄像头权限通过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

最低0.47元/天解锁文章

wen_binObject

关注

13
点赞
踩
48

收藏

觉得还不错? 一键收藏
4
评论
前端获取电脑摄像头权限并拍照进行人脸识别

为什么要做这个呢？为了解决账号密码泄露导致的误操作。前端实现思路是什么呢？前端思想是获取摄像头权限通过canvas 获取base64图片然后转为二进制文件流通过FormData（form表单提交）和后端交互的方式进行识别后端的实现思路呢？创建一个sql 里面存一些有权限的人员信息包含照片等用上传的照片和sql里面的数据进行对比人脸识别进而知道进入当前系统的人是否具有某些权限 ...
复制链接

扫一扫

专栏目录