微信小程序（uniapp）拍照和拍视频

前言微信小程序想要实现拍照和拍小视频功能就得使用camera组件以及配合一些api来完成。提示以下是本篇文章正文内容下面案例可供参考HTML:camerav-ifisAuthstyleheight:60%;classcameradevice-positionbackflashoff/camera!-- 拍照按钮 --viewclassimage_btnv-ifshowclicktakePhotoimage:srcimageIcon takephoto_btn.pngclassimagemode/image/view!-- 拍小视频按钮 --viewclasstimev-ifshowTimetextclasspoint·/texttext00:/texttextv-iftimingSum 100/text{{ timingSum }}/text/viewviewclassimage_btn bottom_btnlongpressstartShootVideotouchstarthandleTouchStarttouchendhandleTouchEndimage:srcimageIcon takeVideo_btn.pngclassimagemode/image/viewJS:// 先校验用户是否授权使用摄像头麦克风onLoad(){const_thisthis;uni.getSetting({success:res{if(res.authSetting[scope.camera]){// 用户已经授权_this.isAuthtrue;}else{// 用户还没有授权向用户发起授权请求uni.authorize({scope:scope.camera,success(){// 用户同意授权_this.isAuthtrue;},fail(){// 用户不同意授权_this.openSetting(camera).then(res{_this.isAuthtrue;});}});}},fail:res{console.log(获取用户授权信息失败);}});uni.getSetting({success:res{if(res.authSetting[scope.record]){// 用户已经授权_this.isAuthtrue;}else{// 用户还没有授权向用户发起授权请求uni.authorize({scope:scope.record,success(){// 用户同意授权_this.isAuthtrue;},fail(){// 用户不同意授权_this.openSetting(record).then(res{_this.isAuthtrue;});}});}},fail:res{console.log(获取用户授权信息失败);}});},methods:{// 拍照takePhoto(){if(this.sum3){// 只能拍3张照片showToast({title:只能添加3张照片,icon:none});return;}constctxuni.createCameraContext();ctx.takePhoto({quality:normal,// 成像质量 high-高质量 normal-普通质量 low-低质量 original-原图success:res{uni.showLoading({title:图片处理中});// res.tempImagePath 拍摄的照片地址this.arr[this.sum].urlres.tempImagePath;this.sum;uni.hideLoading();}});}}// 开始录像startShootVideo(){uni.showLoading({title:正在处理中});this.ctx.startRecord({success:res{this.videoShowtrue;this.showTimetrue;uni.hideLoading();// 计时this.timingsetInterval((){this.timingSum;},1000);},fail(){uni.hideLoading();}});},// 结束录像stopShootVideo(e){if(this.stopContienr){if(this.timing){clearInterval(this.timing);}this.videoShowfalse;uni.showLoading({title:正在处理中});this.ctx.stopRecord({compressed:true,success:res{this.timingSum0;this.showTimefalse;uni.saveFile({tempFilePath:res.tempVideoPath,success:res{uni.hideLoading();// res.savedFilePath 视频地址uni.setStorageSync(videoUrl,JSON.stringify(res.savedFilePath));}});},fail(){uni.hideLoading();}});}},//touch start 手指触摸开始handleTouchStart(e){this.startTimee.timeStamp;},//touch end 手指触摸结束handleTouchEnd(e){this.endTouchfalse;if(this.timing){clearInterval(this.timing);}this.videoShowfalse;this.endTimee.timeStamp;//判断是点击还是长按长按 触发结束录像if(this.endTime-this.startTime350){if(this.timingSum5){this.ctx.stopRecord({success:res{showToast({title:录制时间过短,icon:none});},fail(){}});this.timingSum0;}else{this.stopShootVideo();}}}注意首页确保授权了相关权限其次拍的小视频最好限制时长过长会有性能问题。调试以真机为准。