uniapp?app?人臉識(shí)別的實(shí)現(xiàn)示例
由于 小程序端 有camera組件 直接就可以調(diào)起攝像頭 但是 app端是不支持這個(gè)標(biāo)簽的 所以只能用其他的方法 使用 nvue 中 live-pusher 組件
子組件
<template> <div> <div class="livefater"> <div style="width: 300px;height: 300px;border-radius: 150px;overflow: hidden;"> <!-- orientation="horizontal" //設(shè)置垂直水平方向 --> <live-pusher id='livePusher' ref="livePusher" class="livePusher" url="" mode="SD" :muted="true" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2" aspect="1:1" @statechange="statechange" @netstatus="netstatus" @error="error"></live-pusher> </div> <cover-image src="/static/image/gai1.png" class="gaiimg"></cover-image> </div> <view class="message" style="color: #fff;"> <text class="info">{{message}}</text> </view> </div> </template> <script> export default { props: { time: { default: 5000, type: Number }, message: { default: '識(shí)別中,請(qǐng)稍后...', type: String } }, data() { return {} }, mounted() { // 注意:需要在onReady中 或 onLoad 延時(shí) this.context = uni.createLivePusherContext("livePusher", this); var that = this uni.getSystemInfo({ success: function(e) { // 計(jì)算導(dǎo)航欄高度 that.statusBar = e.statusBarHeight // #ifndef MP if (e.platform == 'android') { that.CustomBar = e.statusBarHeight + 50 } else { that.CustomBar = e.statusBarHeight + 45 } console.log(that.statusBar) // #endif // #ifdef MP-WEIXIN let custom = wx.getMenuButtonBoundingClientRect() that.CustomBar = custom.bottom + custom.top - e.statusBarHeight // #endif // #ifdef MP-ALIPAY that.CustomBar = e.statusBarHeight + e.titleBarHeight // #endif } }) setTimeout(() => { this.startPreview() }) }, methods: { // 拍照事件 snapshot: function() { var that = this this.context.snapshot({ success: (e) => { console.log(e.message, '拍照信息'); this.$emit('faceImg', e.message) } }); }, // 開(kāi)啟攝像頭 startPreview() { console.log("1") var that = this this.context.startPreview({ success: (a) => { console.log("livePusher.startPreview:" + JSON.stringify(a)); that.Timer = setInterval(function() { that.snapshot() }, that.time) }, fail(err) { console.log(err); } }); }, }, } </script> <style> <style lang="less">page { background: #0c8cf9; } .u-navbar__content__left { display: flex !important; align-items: center; } .u_nav_slot { display: flex; align-items: center; flex-direction: row; color: rgba(0, 0, 0, 0.9); font-size: 14.4rpx; font-weight: 700; } .text { margin-left: 1rpx; color: #fff; font-size: 16rpx; } .box { z-index: 99; position: absolute; left: 35%; top: 25%; width: 250rpx; height: 250rpx; background: pink; } .message { flex: 1; justify-content: center; align-items: center; font-weight: 700; } .info { color: #fff !important; font-size: 20rpx; } .livePusher { width: 300px; height: 300px; } .livefater { display: -ms-flex; display: -webkit-flex; display: flex; justify-content: center; flex-direction: column; align-items: center; margin-top: 10rpx; margin-bottom: 50rpx; height: 350px; } .gaiimg { width: 300px; height: 300px; margin-top: -300px; } </style> </style>
由于 人臉一般是 原型 樣式 但是默認(rèn)的live-pusher 是正方形 而且層級(jí)是比較高的 其他普通元素標(biāo)簽是無(wú)法壓住他的 但是 cover-imgae的圖片是可以壓上去的
父組件
<TestingFace :time="5000" @faceImg="faceImg" :message="message"></TestingFace>
faceImg 就是子組件傳過(guò)來(lái)的 圖片 message 是傳過(guò)去的內(nèi)容 time是倒計(jì)時(shí)的拍照時(shí)間,具體內(nèi)容可以根據(jù)內(nèi)容去加邏輯 注意 子父組件都是 nvue
到此這篇關(guān)于uniapp app 人臉識(shí)別的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)uniapp app 人臉識(shí)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)圖片橫向滾動(dòng)效果示例代碼
圖片橫向滾動(dòng)效果,大家可能都已經(jīng)很熟悉了,本文為大家介紹下使用js實(shí)現(xiàn)橫向滾動(dòng)效果,喜歡的朋友可以參考下,希望對(duì)大家有所幫助2013-09-09js菜單點(diǎn)擊顯示或隱藏效果的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)js菜單點(diǎn)擊顯示或隱藏效果的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01對(duì)Layer彈窗使用及返回?cái)?shù)據(jù)接收的實(shí)例詳解
今天小編就為大家分享一篇對(duì)Layer彈窗使用及返回?cái)?shù)據(jù)接收的實(shí)例詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09Angularjs手動(dòng)解析表達(dá)式($parse)
這篇文章主要介紹了Angularjs手動(dòng)解析表達(dá)式($parse)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10純編碼實(shí)現(xiàn)微信小程序彈幕效果(非視頻底)
這篇文章主要介紹了微信小程序彈幕純編碼實(shí)現(xiàn),這種效果是非視頻底,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-05-05IE下雙擊checkbox反應(yīng)延遲問(wèn)題的解決方法
這篇文章主要介紹了IE下雙擊checkbox反應(yīng)延遲問(wèn)題的解決方法,需要的朋友可以參考下2014-03-03