- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
小程序录制视频;10-30秒;需要拍摄人脸,大声朗读数字(123456)这种.
camera页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机 。
camera只支持小程序使用;官网链接 。
。
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-微信开放文档 。
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) } })
最后此篇关于uni-app之camera组件-人脸拍摄的文章就讲到这里了,如果你想了解更多关于uni-app之camera组件-人脸拍摄的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
老是碰到初版制作完成没多久,就整一出说什么要更改整个项目的色彩体系。真的是宝宝心里苦啊. 起初都是通过uni项目自带的uni.scss中定义,在替换页面上对应的css。以便于达到一次性修改整体布局的
小程序录制视频;10-30秒;需要拍摄人脸,大声朗读数字(123456)这种。 1.camera组件 camera页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机 camera只支持小程序
小程序录制视频;10-30秒;需要拍摄人脸,大声朗读数字(123456)这种。 1.camera组件 camera页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机 camera只支持小程序
在实践运用中,经常需要在路由跳转时判断是否需要登录权限,页面跳转时,添加加在if判断。 插件市场也有一些这种插件,配置也稍微复制,大部分朝向vue-router。 注:本次路由封装,只是单纯的判断是否
已经用 uni-app+vue3+ts 开发了一段时间,记录一下日常遇见的问题和解决办法 。 uni-app 中的单端代码 uni-app 是支持多端,如果你想让你的代码,只在部分平台使
微信小程序的订阅消息是小程序的重要能力之一,为实现服务的闭环提供更优的体验。订阅消息我们应该经常见到,比如下单成功之后的 服务通知 ,支付成功后的 支付成功通知 ,都属于小程序的订阅消息。
这是我目前发现较好的uni-app 自定义底部导航栏方法,其他方法的缺点主要是在切换时,要么会闪烁,要么会每点击一下,都会请求一次数据。如果有其他更好的方法,欢迎评论留言,最近才开始用uni-app
一、前言 应用uni-app跨端框架开发APP过程中,遇到以下新增需求: 应用在闪崩或异常退出时,用户希望正在填写的大量信息可以得以保存。当用户再次打开APP时,之前未提交的信息可回显。 刚开始会考虑
一、资源下载 APP应用开发过程中,资源下载是一种常见应用场景。uni-app中应用uni.downloadFile实现文件下载功能。示例代码如下: downLoadFile() { cons
一、问题描述 Guideline 5.1.1 - Legal - Privacy - Data Collection and Storage We noticed that your app requ
一、资源下载 APP应用开发过程中,资源下载是一种常见应用场景。uni-app中应用uni.downloadFile实现文件下载功能。示例代码如下: downLoadFile() { cons
一、问题描述 Guideline 5.1.1 - Legal - Privacy - Data Collection and Storage We noticed that your app requ
到目前为止,我已经在 Quarkus 中使用 smallrye Mutiny 完成了非常基本的工作。基本上,我有一个或两个非常小的网络服务,它们只与网络应用程序交互。这些服务返回 Uni . 现在我正
到目前为止,我已经在 Quarkus 中使用 smallrye Mutiny 完成了非常基本的工作。基本上,我有一个或两个非常小的网络服务,它们只与网络应用程序交互。这些服务返回 Uni . 现在我正
我正在开发一个使用 C++ 库的 java 应用程序。我的应用程序类型是客户端/服务器 RCP(基于 eclipse 插件)。问题是当我尝试将 2 个以上客户端连接到我的服务器时,它总是卡住。奇怪的是
来自The Java® Language Specification:的声明 An exception parameter of a uni-catch clause is never implici
在嵌入式系统中,由于各种合理的原因,趋势仍然没有完全转向多核处理器。 因此,了解单处理器系统使用各种机制和多线程功能的同步行为仍然很重要。此外,每当我接受采访时,他们都会问我有关特定 C 程序在 un
我编写了一个函数,目的是为字符串中的每个字母填充一个带有 uni 代码字符的数组。 但是我返回的结果是一个空值数组。 function rot13(str) { var splitString =
我在尝试在 .sql 数据库中获取数据源时遇到了 mySQL 问题。我正在运行 Ubuntu 15.10 并通过终端使用 mySQL。这是我获取数据库的过程: mysql -u root - p 输入
大家好 今年我们的 uni coursenotes 有一些错误,我只是在考试前复习小测验,附图显示了“不能作为非成员运算符重载实现”的正确答案。 在这里发帖可能无法及时从 uni 论坛得到答案。是我误
我是一名优秀的程序员,十分优秀!