uniapp 小程序 身份证 和人脸视频拍摄

 使用前提：

    已经在微信公众平台的用户隐私协议，已经选择配置“摄像头，录像”等权限

开发背景：客户需要使用带有拍摄边框的摄像头 ，微信小程序的方法无法支持，使用camera修改

   身份证正反面：

<template><view :style="{ height: windowHeight + 'px' }"><cameramode="normal":device-position="devicePosition"flash="off":style="{ height: cameraHeight + 'px' }"><cover-view class="controls" style="width: 100%;height: 100%;"><!-- 国徽面 --><cover-imagev-show="!idcardFrontSide"class="w569-h828"src="/static/images/index/camera_module_side.png"/></cover-view><!-- 国徽面 --><cover-imagev-show="!idcardFrontSide"class="w569-h828"src="/static/images/index/camera_module_side.png"/></cover-view></camera><view class="bottom font-36-fff"><view class="wrap"><view class="back" @click="switchBtn">切换</view><view @click="takePhoto"><image class="w131-h131" src="/static/images/index/take_camera_btn_icon.png"></image></view><view @click="chooseImage">相册</view></view></view></view>
</template><script>export default {data() {return {cameraContext: {},windowHeight: '',cameraHeight: '',idcardFrontSide: true,devicePosition: 'front',};},onLoad(options) {if(uni.createCameraContext) {this.cameraContext = uni.createCameraContext()}else {// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示uni.showModal({title: '提示',content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'})}},onShow() {const systemInfo = uni.getSystemInfoSync()this.windowHeight = systemInfo.windowHeightthis.cameraHeight = systemInfo.windowHeight - 80},methods: {// 拍照takePhoto() {uni.showLoading({title:'拍摄中'})this.cameraContext.takePhoto({quality: 'high',success: (res) => {uni.showToast({title:'拍照成功',icon: 'none',duration: 1200})},fail: (err) => {uni.showToast({title:'拍照失败，请检查系统是否授权',icon: 'none',duration: 1200})}})},// 从相册选取chooseImage() {uni.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album'],success: (res) =>  {},fail: (err) => {}});},},// 切换摄像头switchBtn() {if(this.devicePosition === 'back') {this.devicePosition = 'front'} else {this.devicePosition = 'back'}},}
</script><style lang="less" scoped>.icon-w569-h828 {width: 569rpx;height: 828rpx;}.controls {position: relative;display: flex;align-items: center;justify-content: center;}.bottom {width: 100%;background-color: #000;.wrap {display: flex;align-items: center;justify-content: space-between;height: 80px;padding: 0 73rpx;}}.w569-h828 {width: 569rpx;height: 828rpx;}.w131-h131 {width: 131rpx;height: 131rpx;}.font-36-fff {font-size: 36rpx;color: #fff;}
</style>

人脸视频：

<template><!-- 第三步上传视频 --><view class="container background-color-474747" :style="{height: windowHeight + 'px'}"><view class="video-wrap wpercent-100 text-align" :style="{height: takeVideoHeight + 'px'}" v-if="tipShow"><view class="content-wrap"><view class="font-36-fff font-weight">请保持声音清晰，话术完整，露出五官</view><view class="padding-top-20 font-36-fff font-weight">不符合以上要求，需重新拍摄</view><view class="padding-top-35 padding-bottom-30 font-24-FF2323 font-weight">点击下方按钮开始拍摄</view><image class="tips-icon" src="/static/images/index/take_video_tips.png"></image><text class="know" @click="startCenterCountDown">知道了</text></view></view><view class="video-wrap wpercent-100" v-if="cameraShow" ><view v-if="!centerCountDownShow" class="number">{{ second }}s</view><camera mode="normal"class="wpercent-100":device-position="devicePosition" :style="{height: takeVideoHeight + 'px'}"><!-- 中间3,2,1倒计时 --><cover-view class="center-count-down-wrap" v-if="centerCountDownShow && centerCountDownValue != 4"><cover-view :class="centerCountDownValue === '开始' ? 'center-count-down-start' : 'center-count-down'">{{ centerCountDownValue }}</cover-view></cover-view><!-- 正式拍照人面框 --><cover-image v-if="!centerCountDownShow" class="controls" src="/static/images/index/take_video_back.png"/><cover-view class="font-36-fff font-weight absolute-one-font" v-if="!centerCountDownShow">正视镜头录制一段匀速朗读下方数字的视频</cover-view><cover-view class="font-36-fff font-weight absolute-two-font" v-if="!centerCountDownShow">1234</cover-view></camera></view><transition name="fade" :duration="{ enter: 500, leave: 800 }"><view class="bottom" v-if="showBottom"><view class="wrap"><view class="back" @click="backTwoStep"><image class="w55-h49" src="/static/images/index/back_before_icon.png"></image></view><!-- 开始倒计时 --><view class="take" @click="startCenterCountDown" v-if="tipShow">		<image class="w100-h100" src="/static/images/index/take_btn_icon.png"></image></view><!-- 点击就暂停 --><view class="take" @click="stopRecord" v-if="cameraShow && !centerCountDownShow"><image class="w100-h100" src="/static/images/index/take_btn_icon.png"></image></view><view class="switch" @click="switchCamera"><image class="w69-h56" src="/static/images/index/switch_camera_icon.png"></image></view></view></view></transition></view>
</template><script>export default {data() {return {windowHeight: '',takeVideoHeight: '',tipShow: true,showBottom: true,centerCountDownShow: false,cameraShow: false,centerCountDownValue: 4,cameraContext: {},devicePosition: 'front',second: 9,setTimer: '',};},onLoad() {if(uni.createCameraContext) {setTimeout(() => {this.cameraContext = uni.createCameraContext();},200)}else {// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示uni.showModal({title: '提示',content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'})}},created() {const systemInfo = uni.getSystemInfoSync()this.windowHeight = systemInfo.windowHeightthis.computedHeight(80)},methods: {// 计算heightcomputedHeight (number) {const systemInfo = uni.getSystemInfoSync()this.takeVideoHeight = systemInfo.windowHeight - number},// 开始倒计时 3,2,1,开始startCenterCountDown () {this.computedHeight(0)this.setBoolean(false)this.centerCountDown()},// 中间倒计时centerCountDown() {let promise = new Promise((resolve, reject) => {let setTimer = setInterval(() => {if(this.centerCountDownValue === 1) {this.centerCountDownValue = '开始'resolve(setTimer)} else {this.centerCountDownValue = this.centerCountDownValue - 1}if(this.centerCountDownValue === 2) {			// this.cameraContext.startRecord 有延迟执行的问题，所以需要提前半秒执行setTimeout(() => {this.startRecord()}, 1200)}}, 1000)})promise.then((setTimer) => {clearInterval(setTimer)this.computedHeight(80)this.showBottom = truethis.centerCountDownShow = false})},// 开始录像startRecord() {this.cameraContext.startRecord({success: (res) => {this.rightTopCountDown()},fail: (err) => {uni.showToast({title: '录像失败，请重试',icon: 'none',duration: 1200})}})},// 右上角倒计时rightTopCountDown() {let promise = new Promise((resolve, reject) => {this.setTimer = setInterval(() => {this.second = this.second - 1if (this.second <= 0) {this.stopRecord()resolve(this.setTimer)}}, 1000)})promise.then((setTimer) => {clearInterval(setTimer)this.second = 9})},// 结束录像stopRecord() {uni.showToast({title: '结束录像，正在处理视频',icon: 'none',duration: 10000})clearInterval(this.setTimer)this.second = 9this.showBottom = falsethis.computedHeight(0)this.cameraContext.stopRecord({compressed: true,success: (res) => {uni.setStorageSync('taxCollectVideoPath',res.tempVideoPath)setTimeout(() => {this.stopRecordInitData()}, 500)},fail: (err) => {this.showBottom = truethis.computedHeight(80)uni.showToast({title: '操作失败，请重试',icon: 'none',duration: 1200})}})},// 切换摄像头switchCamera() {if(this.devicePosition === 'back') {this.devicePosition = 'front'} else {this.devicePosition = 'back'}},// 结束录像之后 初始数据stopRecordInitData () {this.computedHeight(80)this.setBoolean(true)this.centerCountDownValue = 4this.second = 9},// 设置 booleansetBoolean(boolean) {this.tipShow = booleanthis.showBottom = booleanthis.cameraShow = !booleanthis.centerCountDownShow = !boolean},}}
</script><style lang="less" scoped>.container {position: relative;.video-wrap {position: relative;.content-wrap {position: absolute;bottom: 150px;width: 100%;}.padding-bottom-40 {padding-bottom: 40rpx;}.tips-icon {position: absolute;left: 242rpx;width: 96rpx;height: 327rpx;}.know {position: relative;top: 210rpx;left: 155rpx;display: inline-block;width: 199rpx;height: 92rpx;line-height: 92rpx;text-align: center;border: 3rpx dashed #fff;border-radius: 5rpx;font-size: 48rpx;color: #fff;}.number {position: absolute;top: 15px;right: 20px;z-index: 11;color: #fff;width: 30px;height: 30px;background-color: #7a7a7a;border-radius: 50%;text-align: center;line-height: 30px;}.center-count-down-wrap {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;}.center-count-down {font-size: 330rpx;color: #fff;font-weight: bold;}.center-count-down-start {font-size: 220rpx;color: #fff;font-weight: bold;}}.controls {position: absolute;bottom: 200rpx;width: 100%;height: 753rpx;}.absolute-one-font {position: absolute;left: 4.5%;bottom: 130rpx;}.absolute-two-font {position: absolute;bottom: 30rpx;left: 44%;}.bottom {// position: fixed;// bottom: 0;width: 100%;background-color: #000;.wrap {display: flex;align-items: center;justify-content: space-between;height: 80px;padding: 0 73rpx;}}.fade-enter-active, .fade-leave-active {transition: opacity .5s;}.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {opacity: 0;}.background-color-474747 {background-color: #474747;}.wpercent-100 {width: 100%;}.text-align {text-align: center;}.font-36-fff {font-size: 36rpx;color: #fff;}.font-weight {font-weight: bold;}.w55-h49 {width: 55rpx;height: 49rpx;}.w100-h100 {width: 100rpx;height: 100rpx;}.w69-h56 {width: 69rpx;height: 56rpx;}}
</style>

效果图：

借鉴的是uniapp-components，记录一下如何使用