uniapp 自定义相机人脸和人脸识别
生活随笔
收集整理的這篇文章主要介紹了
uniapp 自定义相机人脸和人脸识别
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
uniapp 自定義相機人臉 和人臉識別
使用組件 live-pusher ，結合組件的預覽（startPreview）和快照（snapshot）實現相機功能，人臉識別使用的是tracking-min.js和face-min.js 使用h5和uniapp交互識別人臉，人臉識別android可以識別，但是ios 快照的圖片傳遞給h5 始終加載不出來，無法識別人臉，不知道為啥，若有好的方案感謝留言，整體代碼如下（人臉背景圖可以替換）：
<template><view class="container"><live-pusher id='livePusher' ref="livePusher" mode="FHD" :muted="true" :enable-camera="true" :auto-focus="true":beauty="1" whiteness="2" :aspect="aspect" :style="{ width: windowWidth, height: windowHeight}"></live-pusher><view class="menu-bg" :style="{ width: windowWidth, height: windowHeight }"><image src="../../static/camera_bg.png" :style="{ width: windowWidth, height: windowHeight }"></image><view class="take-photo-bg" :style="{ width: windowWidth}"><view class="take-photo" @click="takePhoto()"></view></view><view :style="{ width: windowWidth}" class="hint"><text style="color: #FFFFFF;font-size: 18px;padding: 15px;">{{hint}}</text></view></view><web-view ref="webview" src="/hybrid/html/face.html" :style="{ width: windowWidth, height: windowHeight}"@onPostMessage="handlePostMessage"></web-view></view> </template><script>export default {data() {return {livePusherContext: "",aspect: "3:2",windowWidth: '',windowHeight: '',hint: "",faceInterval: "",}},onLoad() {uni.getSystemInfo({success: (res) => {this.windowWidth = res.windowWidth;this.windowHeight = res.windowHeight;let zcs = this.aliquot(this.windowWidth, this.windowHeight);this.aspect = (this.windowWidth / zcs) + ':' + (this.windowHeight / zcs);}});},onReady() {this.livePusherContext = uni.createLivePusherContext("livePusher", this);setTimeout(() => {this.preview()}, 500)this.faceInterval = setInterval(() => {this.checkFace()}, 3000)},onUnload() {clearInterval(this.faceInterval)},methods: {//整除數計算aliquot(x, y) {if (x % y == 0) return y;return this.aliquot(y, x % y);},preview() {this.livePusherContext.startPreview({success: (res) => {console.log("livePusher.start:" + JSON.stringify(res));}});},takePhoto() {this.livePusherContext.snapshot({success: res => {if (res.errMsg == "snapshot:ok") {let pages = getCurrentPages(); //獲取所有頁面棧實例列表let nowPage = pages[pages.length - 1]; //當前頁頁面實例let prevPage = pages[pages.length - 2]; //上一頁頁面實例prevPage.$vm.imgPath = res.message.tempImagePath; //修改上一頁data里面的tagIndex 參數值prevPage.$vm.isImgPath = true; //修改上一頁data里面的tagIndex 參數值uni.navigateBack({ //uni.navigateTo跳轉的返回，默認1為返回上一級delta: 1});}}});},checkFace() {this.livePusherContext.snapshot({success: res => {if (res.errMsg == "snapshot:ok") {this.$refs.webview.evalJs("setFaceImg('" +res.message.tempImagePath +"')");}}});},handlePostMessage(e) {console.log(e)this.hint = e.detail.data[0].code == 0 ? "未檢測到人臉" : "人臉檢測完畢";// #ifdef APP-PLUSplus.io.resolveLocalFileSystemURL(e.detail.data[0].imgPath, (entry) => {if (entry.isFile) {entry.remove((entry) => {console.log("刪除成功")}, (err) => {console.log(err.message)});}}, (err) => {console.log(err.message)});// #endif}}} </script><style lang="scss" scoped>.menu-bg {position: fixed;left: 0;right: 0;top: 0;bottom: 0;z-index: 99;display: flex;}.take-photo-bg {position: fixed;bottom: 50px;display: flex;flex-direction: column;justify-content: center;align-items: center;}.take-photo {height: 100rpx;width: 100rpx;background-color: #cfd7db;border-radius: 50px;border: 5px solid #FFFFFF;}.hint {position: fixed;top: 0;display: flex;flex-direction: column;justify-content: center;align-items: center;}.take-photo:active {background-color: #239AFF;} </style>h5部分，建同級目錄hybrid/html/face.html,其中tracking-min.js和face-min.js 百度引入即可，代碼如下：
<!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><style type="text/css">.img {height: 200px;}</style></head><body><img id="img" src='' class="img" /><script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script><script src="./js/tracking-min.js"></script><script src="./js/face-min.js"></script><script type="text/javascript" charset="utf-8">var isReady = false// 待觸發 `UniAppJSBridgeReady` 事件后，即可調用 uni 的 API。document.addEventListener('UniAppJSBridgeReady', () => {isReady = true;});function setFaceImg(imgPath) {var img = document.getElementById("img");img.src = imgPath;var tracker = new tracking.ObjectTracker(['face']);tracker.setStepSize(1.7)tracking.track('#img', tracker);tracker.on('track', function(event) {if (isReady) {uni.postMessage({data: {code: event.data.length,imgPath: imgPath}});}});}</script></body> </html>總結
以上是生活随笔為你收集整理的uniapp 自定义相机人脸和人脸识别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 语言表达逻辑训练，让你说话更条理清晰
- 下一篇： 李宏毅深度学习基础