uni-app之camera元件-人臉拍攝i6

ocenwimtaegrad發表於2024-08-30
APP元件

小程式錄制影片；10-30秒；需要拍攝人臉，大聲朗讀數字（123456）這種。

1.camera元件

camera頁面內嵌的區域相機元件。注意這不是點選後全屏開啟的相機

camera只支援小程式使用；官網連結

1.2 效果圖

1.3 頁面佈局

camera 設定寬100%，高度透過uni.getSystemInfo獲取，全屏展示。在透過定位把提示文字等資訊放上去；

錄製完畢，遮罩提示,完成錄製,確認返回；

copy

<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">123456text>
            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">Stext>
            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>

View
注：行內css text-xl text-white margin-tb-xs使用了 ColorUI-UniApp 外掛內容

css樣式

copy

css
js程式碼

copy

js
注：第一次進入頁面，有時候攝像頭會啟動失敗，需要重新點選開啟；

2.微信官方api

微信小程式中需要使用手機拍攝照片以及影片;使用wx.chooseMediaAPI來實現;

該API用於拍攝或從手機相簿中選擇圖片或影片，官網連結為：wx.chooseMedia-微信開放文件:飛數機場

?

12345678910111213141516171819 wx.chooseMedia({``//數量 1-9``count: 1,``//時長``maxDuration: '10'``,``// 檔案型別 image 圖片 video影片 mix同時選擇圖片和影片``mediaType: [``'video'``],``// 圖片和影片選擇的來源: album 相簿 camera相機拍攝``sourceType: [``'camera'``],``//攝像頭: back 前置 front 後置攝像頭 camera: 'back'``,``success(res) {``console.log(res)``console.log(res.tempFiles[0].tempFilePath)``},``fail(err) {``console.log(err)``}``})

　　

相關文章