小程式錄制影片；10-30秒；需要拍攝人臉，大聲朗讀數字（123456）這種。
1.camera元件
camera頁面內嵌的區域相機元件。注意這不是點選後全屏開啟的相機
camera只支援小程式使用；
1.3 頁面佈局
camera 設定寬100%，高度透過uni.getSystemInfo獲取，全屏展示。在透過定位把提示文字等資訊放上去；
錄製完畢，遮罩提示,完成錄製,確認返回；
<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>
注：行內css text-xl text-white margin-tb-xs使用了 ColorUI-UniApp 外掛內容
css樣式
<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>
js程式碼
<script> export default { 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>
注：第一次進入頁面，有時候攝像頭會啟動失敗，需要重新點選開啟；
案例地址： https://gitee.com/jielov/uni-app-tabbar
微信小程式中需要使用手機拍攝照片以及影片;使用wx.chooseMediaAPI來實現;
該API用於拍攝或從手機相簿中選擇圖片或影片，官網連結為：
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)
}
})