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

戒腥的猫 發表於 2024-8-30 15:17:00

小程序录制视频；10-30秒；需要拍摄人脸，大声朗读数字（123456）这种。
<h2 class="md-end-block md-heading">1.camera组件</h2>
camera页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机
camera只支持小程序使用；官网链接
<img src="https://img2024.cnblogs.com/blog/2237618/202408/2237618-20240830150416743-1945450748.png" alt="">
<h3 class="md-end-block md-heading md-focus">1.2 效果图</h3>
<img src="https://img2024.cnblogs.com/blog/2237618/202408/2237618-20240830151336818-874263568.png" alt="">
 
<h3 class="md-end-block md-heading md-focus">1.3 页面布局</h3>
camera 设置宽100%，高度通过uni.getSystemInfo获取，全屏展示。在通过定位把提示文字等信息放上去；
录制完毕，遮罩提示,完成录制,确认返回；
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_fe469369-bed6-4e3a-9ba8-f33ec6281cfd" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_fe469369-bed6-4e3a-9ba8-f33ec6281cfd" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_fe469369-bed6-4e3a-9ba8-f33ec6281cfd" class="cnblogs_code_hide">
<pre><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></pre>
</div>
View</div>
注：行内css <code>text-xl text-white margin-tb-xs</code>使用了 ColorUI-UniApp 插件内容
css样式
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_3314d2e9-c58c-4ca3-8be8-6d116689d5d5" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_3314d2e9-c58c-4ca3-8be8-6d116689d5d5" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_3314d2e9-c58c-4ca3-8be8-6d116689d5d5" class="cnblogs_code_hide">
<pre><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></pre>
</div>
css</div>
js代码
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_932a1d5b-87a5-4fff-bbd7-a9aaf0e7563d" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_932a1d5b-87a5-4fff-bbd7-a9aaf0e7563d" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_932a1d5b-87a5-4fff-bbd7-a9aaf0e7563d" class="cnblogs_code_hide">
<pre><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></pre>
</div>
js</div>
注：第一次进入页面，有时候摄像头会启动失败，需要重新点击打开；
案例地址： https://gitee.com/jielov/uni-app-tabbar
<h2 class="md-end-block md-heading">2.微信官方api</h2>
微信小程序中需要使用手机拍摄照片以及视频;使用<code>wx.chooseMedia</code>API来实现;
该API用于拍摄或从手机相册中选择图片或视频，官网链接为：wx.chooseMedia-微信开放文档
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">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.tempFilePath)
},
fail(err) {
console.log(err)
}
})
</pre>
</div>
　　

</div>
<div id="MySignature" role="contentinfo">
本文来自博客园，作者：虚乄，转载请注明原文链接：https://www.cnblogs.com/lovejielive/p/18388794 
来源：https://www.cnblogs.com/lovejielive/p/18388794

頁: [1]

琼殿技术论坛's Archiver

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