cms网站系统,旅游网站的设计与制作html,微信小程序前端开发工具,建筑工程管理局官网使用前提#xff1a; 已经在微信公众平台的用户隐私协议#xff0c;已经选择配置“摄像头#xff0c;录像”等权限 开发背景#xff1a;客户需要使用带有拍摄边框的摄像头 #xff0c;微信小程序的方法无法支持#xff0c;使用camera修改 身份证正反面#xff1a;
… 使用前提 已经在微信公众平台的用户隐私协议已经选择配置“摄像头录像”等权限 开发背景客户需要使用带有拍摄边框的摄像头 微信小程序的方法无法支持使用camera修改 身份证正反面
templateview :style{ height: windowHeight px }cameramodenormal:device-positiondevicePositionflashoff:style{ height: cameraHeight px }cover-view classcontrols stylewidth: 100%;height: 100%;!-- 国徽面 --cover-imagev-show!idcardFrontSideclassw569-h828src/static/images/index/camera_module_side.png//cover-view!-- 国徽面 --cover-imagev-show!idcardFrontSideclassw569-h828src/static/images/index/camera_module_side.png//cover-view/cameraview classbottom font-36-fffview classwrapview classback clickswitchBtn切换/viewview clicktakePhotoimage classw131-h131 src/static/images/index/take_camera_btn_icon.png/image/viewview clickchooseImage相册/view/view/view/view
/templatescriptexport 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}},}
/scriptstyle langless 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 classcontainer background-color-474747 :style{height: windowHeight px}view classvideo-wrap wpercent-100 text-align :style{height: takeVideoHeight px} v-iftipShowview classcontent-wrapview classfont-36-fff font-weight请保持声音清晰话术完整露出五官/viewview classpadding-top-20 font-36-fff font-weight不符合以上要求需重新拍摄/viewview classpadding-top-35 padding-bottom-30 font-24-FF2323 font-weight点击下方按钮开始拍摄/viewimage classtips-icon src/static/images/index/take_video_tips.png/imagetext classknow clickstartCenterCountDown知道了/text/view/viewview classvideo-wrap wpercent-100 v-ifcameraShow view v-if!centerCountDownShow classnumber{{ second }}s/viewcamera modenormalclasswpercent-100:device-positiondevicePosition :style{height: takeVideoHeight px}!-- 中间3,2,1倒计时 --cover-view classcenter-count-down-wrap v-ifcenterCountDownShow centerCountDownValue ! 4cover-view :classcenterCountDownValue 开始 ? center-count-down-start : center-count-down{{ centerCountDownValue }}/cover-view/cover-view!-- 正式拍照人面框 --cover-image v-if!centerCountDownShow classcontrols src/static/images/index/take_video_back.png/cover-view classfont-36-fff font-weight absolute-one-font v-if!centerCountDownShow正视镜头录制一段匀速朗读下方数字的视频/cover-viewcover-view classfont-36-fff font-weight absolute-two-font v-if!centerCountDownShow1234/cover-view/camera/viewtransition namefade :duration{ enter: 500, leave: 800 }view classbottom v-ifshowBottomview classwrapview classback clickbackTwoStepimage classw55-h49 src/static/images/index/back_before_icon.png/image/view!-- 开始倒计时 --view classtake clickstartCenterCountDown v-iftipShow image classw100-h100 src/static/images/index/take_btn_icon.png/image/view!-- 点击就暂停 --view classtake clickstopRecord v-ifcameraShow !centerCountDownShowimage classw100-h100 src/static/images/index/take_btn_icon.png/image/viewview classswitch clickswitchCameraimage classw69-h56 src/static/images/index/switch_camera_icon.png/image/view/view/view/transition/view
/templatescriptexport 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},}}
/scriptstyle langless 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记录一下如何使用
