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

分类：iOS作者：犬莱八荒

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

前言

在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 () => {
                    //创建livepusher
                    if (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 = true
                let that = this
                this.snapshTimeout = setTimeout(() => {
                    this.pusher.snapshot(
                        e => {
                            //拿到本地文件路径
                            var src = e.tempImagePath;
                            console.log(src)
                            //获取图片base64
                            this.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-PLUS
			this.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。

原文地址：https://blog.csdn.net/weixin_37791679

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

10个常见的苹果iOS16问题及解决方法
当我们远离最新的 iOS 16 更新版本时，我们听到了困扰 Apple 最新软件的错误和性能问题。
怎么激活苹果手机？苹果手机激活步骤详解
欧版/美版 特别说一下，美版选错了 可能会永久丧失4G，不过只有5%的概率会遇到选择运营商界面且部分必须连接到iTunes才可以激活
借助辅助工具appuploader iOS应用上架流程
一般在接外包的时候, 通常第三方需要安装你的app进行测试(这时候你的app肯定是还没传到app store之前)。
Flutter中实现整个App变为灰色
前言为了让更多的人永远记住12月13日，各大厂都在这一天将应用变灰了。那么接下来我们看一下Flutter是如何实现的。Flutter中实现整个App变为灰色在Flutter中实现整个App变为灰色是非常简单的，只需要在最外层的控件上包裹ColorFiltered，用法如下：ColorFiltered（颜色过滤器）看名字就知道是增加颜色滤镜效果的，ColorFiltered( colorFilter:ColorFilter.mode(Colors.grey, BlendMode.
【Cocos creator】Cocos creator介绍和入门
Cocos creator介绍和入门
Vue3使用axios的配置教程详解
vue3.0 axios封装
flutter升级/版本切换
flutter升级/版本切换
【C++入门】文件流fstream介绍和使用
(1)在C++11标准时，open函数的文件路径可以传char指针也可以传string指针，而在C++98标准，open函数的文件路径只能传char指针；(2)open函数的第二个参数是打开文件的模式，从函数定义可以看出，如果调用open函数时省略mode模式参数，则默认按照可读可写(ios_base:in | ios_base::out)的方式打开；(3)打开文件时的mode的模式是从内存的角度来定义的，比如：in表示可读，就是从文件读数据往内存读写；out表示可写，就是把内存数据写到文件中；
iOS App页面置灰
文章目录方法一：分别将图片和文字置灰UIImage转成灰度图UIColor转成灰度颜色方法二：给App整体添加灰色滤镜参考App页面置灰，本质是将彩色图像转换为灰度图像，本文提供两种方法实现，一种是App整体置灰，一种是单个页面置灰，可结合具体的业务场景使用。方法一：分别将图片和文字置灰一般情况下，App页面的颜色深度是24bit，也就是RGB各8bit；如果算上Alpha通道的话就是32bit，RGBA(或者ARGB)各8bit。灰度图像的颜色深度是8bit，这8bit表示的颜色不是彩色，而是256
iOS黑(灰)白化实现方案---记录
领导让调研下黑(灰)白化实现方案，自己调研了两天，根据网上资料，做下记录只是学习过程中的记录，还是写作者牛逼
让学前端不再害怕英语单词二
让学前端不再害怕英语单词（二），通过本文，可以对css，js和es6的单词进行了在逻辑上和联想上的记忆，让初学者更快的上手前端代码
电视剧里的代码真能运行吗？
用Python送你一颗跳动的爱心
在uni-app的app项目中使用live-pusher实现人脸识别
在uni-app项目中实现人脸识别，既使用uni-app中的live-pusher开启摄像头，创建直播推流。通过快照截取和压缩图片，以base64格式发往后端。
vue支付项目-APP微信支付功能
商户APP调用微信提供的SDK调用微信支付模块，商户APP会跳转到微信中完成支付，支付完后跳回到商户APP内，最后展示支付结果。CSDN前端领域优质创作者，资深前端开发工程师，专注前端开发，在CSDN总结工作中遇到的问题或者问题解决方法以及对新技术的分享，欢迎咨询交流，共同学习。），验证通过打开选择支付方式弹窗页面，选择微信支付或者支付宝支付；4.可取消支付，放弃支付会返回会员页面，页面提示支付取消；2.判断支付方式，如果是1，则是微信支付方式。1.判断是否在微信内支付，需要在微信外支付。
U3D热更新技术
iOS修改ipa并重新签名打包
Mac命令行修改ipa并重新签名打包
UniApp 在 iOS 16 下真机自定义基座调试指南，可解决模拟器无法输出调试日志问题
首先在 iOS 设备中打开开发者模式。位于：设置 - 隐私&安全 - 开发者模式（需重启）
IOS开发之——Undefined symbol:_OBJC_CLASS
一 现象导入MBProgressHUD显示信息时，出现如下异常现象Undefined symbols for architecture x86_64: "_OBJC_CLASS_$_MBProgressHUD", referenced from: objc-class-ref in ViewController.old: symbol(s) not found for architecture x86_64clang: error: linker command failed wit
uni-app开发App上架Apple Store流程简略版
Profiles >> 加号添加 >> Distribution >> "App Store" >> 选择 2.1 创建的App ID >> 选择绑定 2.3 的发布证书（.cer）>> 输入描述文件名称 >> Generate 生成描述文件 >> Download。Certificates >> 加号添加 >> "App Store and Ad Hoc" >> “Choose File...” >> 选择上一步生成的证书请求文件 >> Continue >> Download。
Unity 分享 功能 用Unity Native Share Plugin 实现链接、图片、视频等文件的分享+ 安卓 Ios 都可以，代码图文详解
今天有需求，要实现的功能大致如下：在安卓和ios端实现分享功能可以分享链接，图片，文字，视频，文件，等欢迎大佬多多来给萌新指正，欢迎大家来共同探讨。如果各位看官觉得文章有点点帮助，跪求各位给点个“一键三连”，谢啦~声明：本博文章若非特殊注明皆为原创原文链接。
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot