开头先BB两句
之前做的一个小程序,需求迭代,要增加一个活体检测的功能。
前端,拍摄一段视频,转成base64格式,传给后台,后台返回校验结果。
这个小程序的项目是用uni-app框架做的。为了实现这个需求,需要用到unia-pp的组件camera
以及API相机组件控制
的相关方法。
uni-app组件camera
国际惯例,先看文档
camera组件,官方文档传送门:
页面内嵌的区域相机组件。
微信小程序支持,App 和 H5 端不支持。
代码示例:
<template>
<view>
<camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" @click="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" :src="src"></image>
</view>
</template>
复制代码
Tips:
camera 组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。可使用 cover-view cover-image
覆盖在上面。
cover-view
和cover-image
的使用:
代码示例:
<camera
mode="normal"
:device-position="device"
flash="off"
>
<cover-view style="height: 50rpx; position: absolute; top: 40rpx;">
点击下方录制按钮,用普通话朗读数字:
</cover-view>
<cover-image style="height: 700rpx; position: absolute; top: 150rpx;"
src="https://img-blog.csdnimg.cn/20210126152753150.png"/>
</camera>
复制代码
相关属性说明:
-
mode有效值为 normal, scanCode
-
可以通过 device-position 属性设置 前置或后置摄像头,值为front, back
-
flash闪光灯,值为auto, on, off
后来,又加上了返回的按钮,拍摄的按钮,以及切换前置或后置摄像头的功能;
页面效果:
uni.createCameraContext()
创建并返回 camera 组件的上下文 cameraContext 对象。
本API为 camera 组件配套的js API,与 camera 组件的平台兼容性相同,可实现非全屏摄像头。
官方文档,传送门: uniapp.dcloud.io/api/media/c…
创建对象
创建cameraContext
对象,我是onLoad钩子函数中创建的。
if(uni.createCameraContext) {
setTimeout(() => {
this.cameraContext = uni.createCameraContext();
},200)
}else {
// 如果希望用户在最新版本的客户端上体验您的小程序,可以这样子提示
uni.showModal({
title: '提示',
content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
})
}
复制代码
拍照 cameraContext.takePhoto
示例
this.cameraContext.takePhoto({
quality: 'normal',
success: (res) => {
//返回照片文件的临时路径
var url =res.tempImagePath
},
fail: (err) => {
uni.showToast({
title:'拍照失败,请检查系统是否授权',
icon: 'none',
duration: 1200
})
}
})
复制代码
如果拍摄的照片需要转换成base64格式,可以使用如下方法:
uni.getFileSystemManager().readFile
编码格式 encoding 参数传 base64
this.cameraContext.takePhoto({
quality: 'normal',
success: (res) => {
var url =res.tempImagePath
uni.getFileSystemManager().readFile({
filePath: url, //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: res => { //成功的回调
let base64 = res.data
console.log('data:image/jpeg;base64,' + base64)
},fail: (e) => {
console.log("图片转换失败");
}
})
},
fail: (err) => {
uni.showToast({
title:'拍照失败,请检查系统是否授权',
icon: 'none',
duration: 1200
})
}
})
复制代码
开始录像 cameraContext.startRecord()
this.cameraContext.startRecord({
quality:'low',
success: function(res){
},
fail: (err) => {
console.log(err)
}
})
复制代码
录像结束 cameraContext.stopRecord()
this.cameraContext.stopRecord({
//compressed 是否启动视频压缩
compressed: true,
success: function(res){
uni.showToast({
title: '停止录制视频',
icon: 'none',
mask: true,
duration: 2000
})
//返回结果 size 字段 是btye单位
console.log(res)
// byte单位转换为 kb 单位
let fileSize = res.size / 1024;
let videoFile = res.tempVideoPath
},
fail: (err) => {
console.log(err)
}
})
复制代码
压缩视频 uni.compressVideo()
uni.compressVideo({
// videoFile 就是 cameraContext.stopRecord() 返回结果中的 tempVideoPath
src:videoFile,
quality:'low',//'low':低,'medium':中,'high':高
success: function (csRes){
// tempFilePath string 压缩后的临时文件地址
let tempFilePath = csRes.tempFilePath
// size string 压缩后的大小,单位 kB
let size = csRes.size;
console.log('压缩后大小:单位 kB')
console.log(csRes)
},
fail: function (cfRes) {
uni.hideLoading();
uni.showToast({
title:'视频压缩失败',
icon:'none'
})
}
});
复制代码