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

此篇幅主要介绍，关于人脸取景框的摄像功能，如何实现及实现代码，以及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的时候遇到这个问题