前言

在uni-app项目中实现人脸识别，既使用uni-app中的live-pusher开启摄像头，创建直播推流。通过快照截取和压缩图片，以base64格式发往后端。

一、环境

操作系统：win10
开发工具：HBuider X3.6.4
模拟器：mumu模拟器

二、使用步骤

新建util文件夹，将permission.js放到util文件中，将face.vue放入需要运行的文件中。运行代码打印出人脸图片的base64信息。然后就可以将信息传到对应的后端进行识别了。

三、permission.js源代码

/*** 本模块封装了Android、iOS的应用权限判断、打开应用权限设置界面、以及位置系统服务是否开启*/var isIos
// #ifdef APP-PLUS
isIos = (plus.os.name == "iOS")
// #endif// 判断推送权限是否开启
function judgeIosPermissionPush() {var result = false;var UIApplication = plus.ios.import("UIApplication");var app = UIApplication.sharedApplication();var enabledTypes = 0;if (app.currentUserNotificationSettings) {var settings = app.currentUserNotificationSettings();enabledTypes = settings.plusGetAttribute("types");console.log("enabledTypes1:" + enabledTypes);if (enabledTypes == 0) {console.log("推送权限没有开启");} else {result = true;console.log("已经开启推送功能!")}plus.ios.deleteObject(settings);} else {enabledTypes = app.enabledRemoteNotificationTypes();if (enabledTypes == 0) {console.log("推送权限没有开启!");} else {result = true;console.log("已经开启推送功能!")}console.log("enabledTypes2:" + enabledTypes);}plus.ios.deleteObject(app);plus.ios.deleteObject(UIApplication);return result;
}// 判断定位权限是否开启
function judgeIosPermissionLocation() {var result = false;var cllocationManger = plus.ios.import("CLLocationManager");var status = cllocationManger.authorizationStatus();result = (status != 2)console.log("定位权限开启：" + result);// 以下代码判断了手机设备的定位是否关闭，推荐另行使用方法 checkSystemEnableLocation/* var enable = cllocationManger.locationServicesEnabled();var status = cllocationManger.authorizationStatus();console.log("enable:" + enable);console.log("status:" + status);if (enable && status != 2) {result = true;console.log("手机定位服务已开启且已授予定位权限");} else {console.log("手机系统的定位没有打开或未给予定位权限");} */plus.ios.deleteObject(cllocationManger);return result;
}// 判断麦克风权限是否开启
function judgeIosPermissionRecord() {var result = false;var avaudiosession = plus.ios.import("AVAudioSession");var avaudio = avaudiosession.sharedInstance();var permissionStatus = avaudio.recordPermission();console.log("permissionStatus:" + permissionStatus);if (permissionStatus == 1684369017 || permissionStatus == 1970168948) {console.log("麦克风权限没有开启");} else {result = true;console.log("麦克风权限已经开启");}plus.ios.deleteObject(avaudiosession);return result;
}// 判断相机权限是否开启
function judgeIosPermissionCamera() {var result = false;var AVCaptureDevice = plus.ios.import("AVCaptureDevice");var authStatus = AVCaptureDevice.authorizationStatusForMediaType('vide');console.log("authStatus:" + authStatus);if (authStatus == 3) {result = true;console.log("相机权限已经开启");} else {console.log("相机权限没有开启");}plus.ios.deleteObject(AVCaptureDevice);return result;
}// 判断相册权限是否开启
function judgeIosPermissionPhotoLibrary() {var result = false;var PHPhotoLibrary = plus.ios.import("PHPhotoLibrary");var authStatus = PHPhotoLibrary.authorizationStatus();console.log("authStatus:" + authStatus);if (authStatus == 3) {result = true;console.log("相册权限已经开启");} else {console.log("相册权限没有开启");}plus.ios.deleteObject(PHPhotoLibrary);return result;
}// 判断通讯录权限是否开启
function judgeIosPermissionContact() {var result = false;var CNContactStore = plus.ios.import("CNContactStore");var cnAuthStatus = CNContactStore.authorizationStatusForEntityType(0);if (cnAuthStatus == 3) {result = true;console.log("通讯录权限已经开启");} else {console.log("通讯录权限没有开启");}plus.ios.deleteObject(CNContactStore);return result;
}// 判断日历权限是否开启
function judgeIosPermissionCalendar() {var result = false;var EKEventStore = plus.ios.import("EKEventStore");var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(0);if (ekAuthStatus == 3) {result = true;console.log("日历权限已经开启");} else {console.log("日历权限没有开启");}plus.ios.deleteObject(EKEventStore);return result;
}// 判断备忘录权限是否开启
function judgeIosPermissionMemo() {var result = false;var EKEventStore = plus.ios.import("EKEventStore");var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(1);if (ekAuthStatus == 3) {result = true;console.log("备忘录权限已经开启");} else {console.log("备忘录权限没有开启");}plus.ios.deleteObject(EKEventStore);return result;
}// Android权限查询
function requestAndroidPermission(permissionID) {return new Promise((resolve, reject) => {plus.android.requestPermissions([permissionID], // 理论上支持多个权限同时查询，但实际上本函数封装只处理了一个权限的情况。有需要的可自行扩展封装function(resultObj) {var result = 0;for (var i = 0; i < resultObj.granted.length; i++) {var grantedPermission = resultObj.granted[i];console.log('已获取的权限：' + grantedPermission);result = 1}for (var i = 0; i < resultObj.deniedPresent.length; i++) {var deniedPresentPermission = resultObj.deniedPresent[i];console.log('拒绝本次申请的权限：' + deniedPresentPermission);result = 0}for (var i = 0; i < resultObj.deniedAlways.length; i++) {var deniedAlwaysPermission = resultObj.deniedAlways[i];console.log('永久拒绝申请的权限：' + deniedAlwaysPermission);result = -1}resolve(result);// 若所需权限被拒绝,则打开APP设置界面,可以在APP设置界面打开相应权限// if (result != 1) {// gotoAppPermissionSetting()// }},function(error) {console.log('申请权限错误：' + error.code + " = " + error.message);resolve({code: error.code,message: error.message});});});
}// 使用一个方法，根据参数判断权限
function judgeIosPermission(permissionID) {if (permissionID == "location") {return judgeIosPermissionLocation()} else if (permissionID == "camera") {return judgeIosPermissionCamera()} else if (permissionID == "photoLibrary") {return judgeIosPermissionPhotoLibrary()} else if (permissionID == "record") {return judgeIosPermissionRecord()} else if (permissionID == "push") {return judgeIosPermissionPush()} else if (permissionID == "contact") {return judgeIosPermissionContact()} else if (permissionID == "calendar") {return judgeIosPermissionCalendar()} else if (permissionID == "memo") {return judgeIosPermissionMemo()}return false;
}// 跳转到**应用**的权限页面
function gotoAppPermissionSetting() {if (isIos) {var UIApplication = plus.ios.import("UIApplication");var application2 = UIApplication.sharedApplication();var NSURL2 = plus.ios.import("NSURL");// var setting2 = NSURL2.URLWithString("prefs:root=LOCATION_SERVICES");     var setting2 = NSURL2.URLWithString("app-settings:");application2.openURL(setting2);plus.ios.deleteObject(setting2);plus.ios.deleteObject(NSURL2);plus.ios.deleteObject(application2);} else {// console.log(plus.device.vendor);var Intent = plus.android.importClass("android.content.Intent");var Settings = plus.android.importClass("android.provider.Settings");var Uri = plus.android.importClass("android.net.Uri");var mainActivity = plus.android.runtimeMainActivity();var intent = new Intent();intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);intent.setData(uri);mainActivity.startActivity(intent);}
}// 检查系统的设备服务是否开启
// var checkSystemEnableLocation = async function () {function checkSystemEnableLocation() {if (isIos) {var result = false;var cllocationManger = plus.ios.import("CLLocationManager");var result = cllocationManger.locationServicesEnabled();console.log("系统定位开启:" + result);plus.ios.deleteObject(cllocationManger);return result;} else {var context = plus.android.importClass("android.content.Context");var locationManager = plus.android.importClass("android.location.LocationManager");var main = plus.android.runtimeMainActivity();var mainSvr = main.getSystemService(context.LOCATION_SERVICE);var result = mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER);console.log("系统定位开启:" + result);return result}
}module.exports = {judgeIosPermission: judgeIosPermission,requestAndroidPermission: requestAndroidPermission,checkSystemEnableLocation: checkSystemEnableLocation,gotoAppPermissionSetting: gotoAppPermissionSetting
}

四、face.vue源代码

<template><view><button style="margin-top: 500px;background-color: #3c96f3" @click="snapshotPusher">拍照</button></view>
</template><script>import permission from '../util/permission.js'export default {data() {return {imgData: '',pusher: null,scanWin: null,faceInitTimeout: null,snapshTimeout: null,uploadFileTask: null,cilckSwitch: false, //防止多次点击};},methods: {//初始化faceInit() {this.faceInitTimeout = setTimeout(async () => {//创建livepusherif (uni.getSystemInfoSync().platform === 'android') {const data1 = await permission.requestAndroidPermission("android.permission.RECORD_AUDIO")const data2 = await permission.requestAndroidPermission("android.permission.CAMERA")if (data1 == 1 && data2 == 1) {this.pusherInit();}} else {this.pusherInit();}// 覆盖在视频之上的内容，根据实际情况编写// 利用plus.webview.create将扫描框页面及扫描动画（xxx.html）覆盖在视频之上；// this.scanWin = plus.webview.create('/static/456.html', '', {//  background: 'transparent'// });// //新引入的webView显示// this.scanWin.show();}, 2000);},//初始化播放器pusherInit() {// 获取当前窗口const currentWebview = this.$mp.page.$getAppWebview();// 创建推流，url不填写代表不上传this.pusher = plus.video.createLivePusher('livepusher', {url: '',top: '10%',left: '20%',width: '300px',height: '300px',position: 'absolute',aspect: '9:16',muted: false,'z-index': 999,});// 将推流对象加到当前页面中currentWebview.append(this.pusher);//反转摄像头this.pusher.switchCamera();//开始预览this.pusher.preview();},//快照snapshotPusher() {if (this.cilckSwitch) {uni.showToast({title: '请勿频繁点击',icon: 'none'})return}this.cilckSwitch = truelet that = thisthis.snapshTimeout = setTimeout(() => {this.pusher.snapshot(e => {//拿到本地文件路径var src = e.tempImagePath;console.log(src)//获取图片base64this.getMinImage(src);that.cilckSwitch = false},function(e) {plus.nativeUI.alert('snapshot error: ' + JSON.stringify(e));that.cilckSwitch = false});}, 3000);},//使用plus.zip.compressImage压缩图片getMinImage(imgPath) {plus.zip.compressImage({src: imgPath,dst: imgPath,overwrite: true,quality: 40},zipRes => {setTimeout(() => {var reader = new plus.io.FileReader();reader.onloadend = res => {//获取图片base64  var speech = res.target.result; //base64图片console.log(speech)this.imgData = speech;};//一定要使用plus.io.convertLocalFileSystemURL将target地址转换为本地文件地址，否则readAsDataURL会找不到文件reader.readAsDataURL(plus.io.convertLocalFileSystemURL(zipRes.target));}, 1000);},function(error) {console.log('Compress error!', error);});},},onLoad(option) {//#ifdef APP-PLUSthis.faceInit();//#endif},onHide() {console.log('hide')this.faceInitTimeout && clearTimeout(this.faceInitTimeout);this.snapshTimeout && clearTimeout(this.snapshTimeout);//this.scanWin.hide();},};
</script><style lang="scss" scoped></style>

五、代码效果

总结

实现了在uni-app项目中实现人脸识别，那么能不能使用tracking.js在uni-app中进行人脸识别呢，我们知道tracking.js在web端是可以进行人脸识别的，那么在uni-app中是否可以呢？博主下一篇就要在uni-app中使用tracking.js。

在uni-app的app项目中使用live-pusher实现人脸识别相关推荐

.NET（C#、VB）APP开发——Smobiler平台控件介绍：ArcFace人脸识别
本文简述如何在Smobiler中使用ArcFace(虹软人脸识别). Step 1. 新建一个SmobilerForm窗体,再拖入Button,Label,TextBox和AcrFace,布局如下在 ...
cordova 更改app版本_ionic项目中使用cordova-hot-code-push插件
例子源码参见我的github:zhangzhaojun/chcp-manual-demo 使用cordova-hot-code-push插件的方法如下: 1.如下命令创建一个项目: $ ionic s ...
扫描二维码下载APP文件在项目中的实现
实现思路现在的很多项目都拥有web网页端和APP端,一般都是同时使用,当使用APP时则需要下载,常用的方式则是扫描二维码下载.现在来分享一下自己在工作中具体是如何实现扫描二维码进行下载的. 生成二维 ...
用AndroidSDK中的Face Detector实现人脸识别
很多手机图片管理应用都开始集成人脸识别功能.一提到人脸识别,模式识别,滤波,BlahBlah 一堆复杂的技术名字戳入脑海中,立刻觉得这玩意儿没法碰,太玄乎了.其实Android SDK从1.0版本中( ...
在python中利用OpenCV包实现人脸识别
一.实验环境 1.python3.6环境,numpy包,OpenCV包,pillow包 2.联想T470笔记本电脑,win10系统 3.在测试目录下新建两个文件夹,一个是Facedata用于存放采集的 ...
您的首个 App 内购买项目必须以新的 App 版本提交
您的首个 App 内购买项目必须以新的 App 版本提交.请从 App 的"App 内购买项目"中选择然后点击"提交". 在上传二进制文件并提交首个 App 内 ...
vue 项目中自动生成二维码
vue 项目中自动生成二维码最近在写一个vue项目,要求根据卡号可以自动生成一个二维码,并渲染在指定位置,因为第一次做类似业务,小编在网上找了找,发现了很多,具体起来主要用的就两种: QRc ...
2018苹果App上架App Store审核指南要求
苹果APP审核很严格,有一套他们自己的标准,我们上架经常收到拒绝条款2.1.5.1这些就是因为不符合他们的审核要求,下面是苹果APP的审核指南.对APP的基本要求,在开发APP的时候参考这个指南,争取 ...
2018苹果App上架App Store审核指南要求
苹果APP审核很严格,有一套他们自己的标准,我们上架经常收到拒绝条款2.1.5.1这些就是因为不符合他们的审核要求,下面是苹果APP的审核指南.对APP的基本要求,在开发APP的时候参考这个指南,争取 ...
java人脸识别_Python 实现在 App 端的人脸识别！手机解锁人脸识别
最近闲来无事,研究研究在安卓上跑 Python,想起以前玩过的 kivy 技术,kivy 是一个跨平台的 UI 框架,当然对我们最有用的是,kivy 可以把 Python 代码打包成安卓应用. 但是由 ...

在uni-app的app项目中使用live-pusher实现人脸识别