前端获取电脑摄像头权限并拍照进行人脸识别
生活随笔
收集整理的這篇文章主要介紹了
前端获取电脑摄像头权限并拍照进行人脸识别
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
為什么要做這個(gè)呢？
不同用戶具有不同的權(quán)限 如果管理員用戶被別人知曉了怎么辦？ 為了解決該用戶 賬號(hào)密碼泄露導(dǎo)致的誤操作。
前端實(shí)現(xiàn)思路是什么呢？
前端思想是獲取攝像頭權(quán)限 通過(guò)canvas 獲取base64圖片 然后轉(zhuǎn)為二進(jìn)制文件流 通過(guò)FormData（form表單提交）和后端交互 的方式進(jìn)行識(shí)別
后端的實(shí)現(xiàn)思路呢？
創(chuàng)建一個(gè)sql 里面存一些有權(quán)限的人員信息包含照片等 用上傳的照片和sql里面的數(shù)據(jù)進(jìn)行對(duì)比人臉識(shí)別 進(jìn)而知道進(jìn)入當(dāng)前系統(tǒng)的人是否具有某些權(quán)限 當(dāng)然為了界面友好還需要有權(quán)限人員庫(kù)用于展示
會(huì)遇到什么問(wèn)題？
中間遇到了低版本瀏覽器無(wú)法使用canvas的問(wèn)題 所以此方法只支持最新的瀏覽器
代碼在哪里啊？(只是一個(gè)demo 下個(gè)文章我會(huì)發(fā)項(xiàng)目中的部分代碼基于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="點(diǎn)擊進(jìn)行拍照">拍照</button></div><div><button id="sure" title="是否用這張圖片進(jìn)行驗(yàn)證">確認(rèn)</button></div></div><script>var file ,stream;//訪問(wèn)用戶媒體設(shè)備的兼容方法function getUserMedia(constraints, success, error) {if (navigator.mediaDevices.getUserMedia) {//最新的標(biāo)準(zhǔn)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;//將視頻流設(shè)置為video元素的源console.log(stream);stream = stream;//video.src = CompatibleURL.createObjectURL(stream);video.srcObject = stream;video.play();}function error(error) {console.log(`訪問(wèn)用戶媒體設(shè)備失敗${error.name}, ${error.message}`);}if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {//調(diào)用用戶媒體設(shè)備, 訪問(wèn)攝像頭getUserMedia({video : {width: 480, height: 320}}, success, error);} else {alert('不支持訪問(wèn)用戶媒體');}// base64轉(zhuǎn)文件document.getElementById('capture').addEventListener('click', function () {context.drawImage(video, 0, 0, 480, 320); // 獲取圖片base64鏈接var image = canvas.toDataURL('image/png');// 定義一個(gè)imgvar img = document.getElementById("img");//設(shè)置屬性和src//img.id = "imgBoxxx";img.src = image;//將圖片添加到頁(yè)面中//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", // 數(shù)據(jù)提交類型url: "***********", // 發(fā)送地址data: formData, //發(fā)送數(shù)據(jù)async: true, // 是否異步processData: false, //processData 默認(rèn)為false，當(dāng)設(shè)置為true的時(shí)候,jquery ajax 提交的時(shí)候不會(huì)序列化 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();//結(jié)束關(guān)閉流})</script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的前端获取电脑摄像头权限并拍照进行人脸识别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 大咖们都在用的三大引流拓客方案，学会一个
- 下一篇： ROS2和ROS1启动launch的一些