uni-app之camera组件-人脸拍摄

<template>
    <view class="camera-position">
        <camera device-position="front" flash="auto" @error="onCameraError"
            :style="'width: 100%; height: '+ screenHeight +'px;'">
            <!-- 人脸轮廓-图片 -->
            <image src="../../static/face/face-avater.png" style="width: 100%; height: 55vh; margin:22vh 0 0 0;"
                v-if="!achieveShow"></image>
        </camera>

        <!-- 顶部提示信息 -->
        <view class="camera-top text-center" v-show="!achieveShow">
            <view class="text-lg text-red">
                请面向屏幕
            </view>
            <view class="text-xl text-white margin-tb-xs">
                <text class="text-lg">用普通话大声读</text>
                <text class="text-red text-bold margin-left-xs">123456</text>
            </view>
            <view class="text-xxl text-red">
                <text class="text-df text-white">倒计时</text>
                <text class="text-red text-bold margin-lr-xs">{{totalSeconds}}</text>
                <text class="text-df text-white">S</text>
            </view>
        </view>

        <!-- 完成拍摄 -->
        <view class="achieve-shade" :style="'width: 100%; height: '+ screenHeight +'px;'" v-if="achieveShow">
            <view class="" style="font-size: 120rpx;color: #1977FF;">
                <text class="cuIcon-roundcheck"></text>
            </view>
            <view class="text-xl text-white margin-tb-sm">
                已完成人脸识别
            </view>
            <button class="cu-btn line-blue round lg" @click="confirmBut">确定</button>
        </view>
    </view>
</template>

<style lang="scss" scoped> .camera-position {position:relative; .camera-top { position:absolute;left:0;top:50rpx;width:100%; }.camera-bottom{position:absolute;left:0;bottom:0;width:100%; }.achieve-shade{position:absolute;left:0;top:0;background-color: rgba(222, 222, 222, 0.9);display:flex;flex-direction:column;align-items:center;justify-content:center; button { width:300rpx; } } }</style>

<script>exportdefault { data() { return { cameraContext: null,//计时器timer:null,//录制时长 totalSeconds: 10,//屏幕高度 screenHeight:"",//是否显示-完成遮罩achieveShow:false } }, onLoad() { let that =this uni.getSystemInfo({ success: (res) => { console.log('屏幕宽度,单位为px：', res.windowWidth); console.log('屏幕高度,单位为px：', res.windowHeight); that.screenHeight = res.windowHeight; }, }); setTimeout(() =>{this.startShoot() }, 500) }, onReady() { // 创建 camera 上下文 CameraContext 对象this.cameraContext = uni.createCameraContext() }, methods: { //开始拍摄 startShoot() { this.cameraContext.startRecord({ timeoutCallback: () => { console.error('超出限制时长',this.totalSecond); }, timeout: this.totalSeconds, success: (res) =>{//开启计时器this.timer = setInterval(() =>{this.totalSeconds--},1000) console.log(res, '开始拍摄'); }, fail: (err) =>{this.errToast('摄像头启动失败，请重新打开') } }) }, //结束拍摄 stopShoot() { // 接触 计时器if(this.timer) clearInterval(this.timer)this.cameraContext.stopRecord({ compressed: true, success: (res) =>{//显示遮罩this.achieveShow = true// TODO 获取数据帧 console.log(res, '结束拍摄'); }, fail: (err) =>{this.errToast('视频保存失败，请重新录制') }, }) }, //摄像头错误 onCameraError(error) { console.error('摄像头错误: ', error.detail); }, //摄像头-失败操作 errToast(e) { this.$operate.toast({ title: e }) setTimeout(() =>{this.confirmBut() }, 500) }, //确定-返回上一页 confirmBut() { uni.navigateBack() }, }, watch: { //监听倒计时 totalSeconds: { handler(newVal) { // console.log(newVal, '倒计时');//倒计时 = 1 的时候结束拍摄 if (newVal == 1) { //结束拍摄this.stopShoot() } } } } }</script>