小程序实现人脸取景框摄像-uniapp版

最新推荐文章于 2025-10-06 02:52:29 发布

原创最新推荐文章于 2025-10-06 02:52:29 发布 · 6k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

uniapp 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用uni-app实现人脸识别摄像功能，包括页面布局、UI设计及createCameraContext对象的应用。针对使用过程中遇到的问题，如暂停拍摄视频时报错等，提供了相应的解决方案。

此篇幅主要介绍，关于人脸取景框的摄像功能，如何实现及实现代码，以及createCameraContext使用时遇到的坑，使用到的组件有camera、cover-view、cover-image

代码已开源

uniapp-componentshttps://github.com/wz930206/uniapp-components

期望效果

实现逻辑

首先是当做一个页面而不是组件，需要在pages.json中注册（作为组件时有各种坑，目前还没爬出来）

接下来就是要劳烦UI小姐姐的地方了，作图和切图

最后就是对于createCameraContext对象的了解了

具体代码如下

<template>
	<view class="container" :style="{width: 100%;height: windowHeight + 'px'}">
		<camera 
			mode="normal" 
			device-position="front" 
			flash="off"  
			:style="{width: 100%;height:cameraHeight + 'px'}"
			>
			<cover-image class="controls take-video-back-img" src="https://img-blog.csdnimg.cn/20210126152753150.png"/>
		</camera>
		<view class="bottom">
			<view class="wrap">
				<view class="back" @click="backTwoStep">
					<image class="icon-w55-h49" :src="backIcon"></image>
				</view>
				<view class="take" @click="takeVideo">
					<image class="icon-w100-h100" :src="takeBtnIcon"></image>
				</view>
				<view class="switch" @click="switchCamera">
					<image class="icon-w69-h56" :src="switchCameraIcon"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
        onLoad() {
			if(uni.createCameraContext) {
				setTimeout(() => {
					this.cameraContext = uni.createCameraContext();
				},200)
			}else {
				// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
				uni.showModal({
					title: '提示',
					content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
				})
			}
		},
        
</script>

逻辑是这个逻辑，样式大家根据自己的需求进行调整就可以了

爬坑

偶尔会出现以下情况，目前解决方案是：写一个定时器，点击摄像，一秒之后再运行这个api

电脑开发工具上显示正常，手机上多点几次报错
1.调用暂停拍摄视频时报错：errMsg:"operateCamera:fail operate fail"
2.在使用this.cameraContext.startRecord这个api的时候遇到这个问题