在uni-app的app項目中使用live-pusher實現人臉識別

• 前言
• 一、環境
• 二、使用步驟
• 三、permission.js源代碼
• 四、face.vue源代碼
• 五、代碼效果
• 總結

---

前言

在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实现人脸识别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。