Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to realize uniapp app face recognition function". In daily operation, I believe many people have doubts about how to realize uniapp app face recognition function. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to realize uniapp app face recognition function". Next, please follow the editor to study!

Since there is a camera component on the mini program side, you can directly adjust the camera, but the app side does not support this tag, so you can only use the live-pusher component in nvue in other ways.

Sub-component

{{message}} export default {props: {time: {default: 5000, type: Number} Message: {default: 'recognizing Please wait later.', type: String}}, data () {return {}} Mounted () {/ / Note: delay this.context = uni.createLivePusherContext ("livePusher", this) in onReady or onLoad Var that = this uni.getSystemInfo ({success: function (e) {/ / calculate navigation bar height 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: {/ / Photo event snapshot: function () {var that = this this.context.snapshot ({success: (e) = > { Console.log (e.message 'Photo message') This.$emit ('faceImg', e.message)}}) } / / enable camera 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) }});},},} 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;}

Because the face is generally prototype style, but the default live-pusher is square and the level is relatively high, other ordinary element tags cannot hold him down, but cover-imgae images can be pressed on.

Parent component

FaceImg is the picture passed by the child component message is the content passed time is the countdown to the photo time, the specific content can be logically noted that the child parent component is nvue

At this point, the study on "how to achieve uniapp app face recognition" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.