前端获取电脑摄像头权限并拍照进行人脸识别
生活随笔
收集整理的這篇文章主要介紹了
前端获取电脑摄像头权限并拍照进行人脸识别
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
為什么要做這個呢？
不同用戶具有不同的權限 如果管理員用戶被別人知曉了怎么辦？ 為了解決該用戶 賬號密碼泄露導致的誤操作。
前端實現思路是什么呢？
前端思想是獲取攝像頭權限 通過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>總結
以上是生活随笔為你收集整理的前端获取电脑摄像头权限并拍照进行人脸识别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 大咖们都在用的三大引流拓客方案，学会一个
- 下一篇： 如何用html布天猫页面,天猫前端系列教