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

前言

微信小程序想要实现拍照和拍小视频功能，就得使用camera组件以及配合一些api来完成。

提示：以下是本篇文章正文内容，下面案例可供参考

HTML:

<camerav-if="isAuth"style="height:60%;"class="camera"device-position="back"flash="off"></camera><!-- 拍照按钮 --><viewclass="image_btn"v-if="show"@click="takePhoto"><image:src="imageIcon + 'takephoto_btn.png'"class="image"mode=""></image></view><!-- 拍小视频按钮 --><viewclass="time"v-if="showTime"><textclass="point">·</text><text>00:</text><textv-if="timingSum < 10">0</text>{{ timingSum }}</text></view><viewclass="image_btn bottom_btn"@longpress="startShootVideo"@touchstart="handleTouchStart"@touchend="handleTouchEnd"><image:src="imageIcon + 'takeVideo_btn.png'"class="image"mode=""></image></view>

JS:

// 先校验用户是否授权使用摄像头，麦克风onLoad(){const_this=this;uni.getSetting({success:res=>{if(res.authSetting['scope.camera']){// 用户已经授权_this.isAuth=true;}else{// 用户还没有授权，向用户发起授权请求uni.authorize({scope:'scope.camera',success(){// 用户同意授权_this.isAuth=true;},fail(){// 用户不同意授权_this.openSetting('camera').then(res=>{_this.isAuth=true;});}});}},fail:res=>{console.log('获取用户授权信息失败');}});uni.getSetting({success:res=>{if(res.authSetting['scope.record']){// 用户已经授权_this.isAuth=true;}else{// 用户还没有授权，向用户发起授权请求uni.authorize({scope:'scope.record',success(){// 用户同意授权_this.isAuth=true;},fail(){// 用户不同意授权_this.openSetting('record').then(res=>{_this.isAuth=true;});}});}},fail:res=>{console.log('获取用户授权信息失败');}});},methods:{// 拍照takePhoto(){if(this.sum==3){// 只能拍3张照片showToast({title:'只能添加3张照片',icon:'none'});return;}constctx=uni.createCameraContext();ctx.takePhoto({quality:'normal',// 成像质量 high-高质量 normal-普通质量 low-低质量 original-原图success:res=>{uni.showLoading({title:'图片处理中'});// res.tempImagePath 拍摄的照片地址this.arr[this.sum].url=res.tempImagePath;this.sum++;uni.hideLoading();}});}}

// 开始录像startShootVideo(){uni.showLoading({title:'正在处理中'});this.ctx.startRecord({success:res=>{this.videoShow=true;this.showTime=true;uni.hideLoading();// 计时this.timing=setInterval(()=>{this.timingSum++;},1000);},fail(){uni.hideLoading();}});},// 结束录像stopShootVideo(e){if(this.stopContienr){if(this.timing){clearInterval(this.timing);}this.videoShow=false;uni.showLoading({title:'正在处理中'});this.ctx.stopRecord({compressed:true,success:res=>{this.timingSum=0;this.showTime=false;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.startTime=e.timeStamp;},//touch end 手指触摸结束handleTouchEnd(e){this.endTouch=false;if(this.timing){clearInterval(this.timing);}this.videoShow=false;this.endTime=e.timeStamp;//判断是点击还是长按，长按 触发结束录像if(this.endTime-this.startTime>350){if(this.timingSum<5){this.ctx.stopRecord({success:res=>{showToast({title:'录制时间过短！',icon:'none'});},fail(){}});this.timingSum=0;}else{this.stopShootVideo();}}}

注意：首页确保授权了相关权限，其次拍的小视频最好限制时长，过长会有性能问题。调试以真机为准。