uniapp?app?人臉識別的實現(xiàn)示例
由于 小程序端 有camera組件 直接就可以調(diào)起攝像頭 但是 app端是不支持這個標簽的 所以只能用其他的方法 使用 nvue 中 live-pusher 組件
子組件
<template> <div> <div class="livefater"> <div style="width: 300px;height: 300px;border-radius: 150px;overflow: hidden;"> <!-- orientation="horizontal" //設置垂直水平方向 --> <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: '識別中,請稍后...', type: String } }, data() { return {} }, mounted() { // 注意:需要在onReady中 或 onLoad 延時 this.context = uni.createLivePusherContext("livePusher", this); var that = this uni.getSystemInfo({ success: function(e) { // 計算導航欄高度 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) } }); }, // 開啟攝像頭 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>
由于 人臉一般是 原型 樣式 但是默認的live-pusher 是正方形 而且層級是比較高的 其他普通元素標簽是無法壓住他的 但是 cover-imgae的圖片是可以壓上去的
父組件
<TestingFace :time="5000" @faceImg="faceImg" :message="message"></TestingFace>
faceImg 就是子組件傳過來的 圖片 message 是傳過去的內(nèi)容 time是倒計時的拍照時間,具體內(nèi)容可以根據(jù)內(nèi)容去加邏輯 注意 子父組件都是 nvue
到此這篇關(guān)于uniapp app 人臉識別的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)uniapp app 人臉識別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
對Layer彈窗使用及返回數(shù)據(jù)接收的實例詳解
今天小編就為大家分享一篇對Layer彈窗使用及返回數(shù)據(jù)接收的實例詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09