解决微信小程序录制视频存在的问题

此篇文章主要针对微信小程序如下两个api :

CameraContext.startRecord(Object object) CameraContext.stopRecord(Object object)

使用场景：当我在开发一个小程序，它的需求是需要用户拍摄视频来上传，但是产品经理要求相机上需要有文字提示，所以就不能用原生的wx.chooseVideo，于是乎选择小程序提供的camera组件，可以通过<cover-view>提示文字</cover-view>来实现需求。

过程中出现过的问题：

当频繁点击按钮，stopRecord会失效，不会进入任何回调，而且也不会抛错，最后通过3秒禁用点击停止录制视频按钮解决了频繁点击的问题。
之前有参考其他博主的代码，在倒计时30s后自己调用了stopRecord，但是这个不能很好的清除倒计时和有效停止录视频
在两个api中都wx.createCameraContext()创建 camera 上下文 CameraContext 对象，出现了第一次录视频20多秒，第二次再录制的时候只有几秒视频就自动停止录制了的情况

在此主要附上js代码一一解决上面踩过的坑～～～

1、startRecord: false, //目前是否在拍摄
2、isclick:true, //默认一开始是不禁用的，在点击录制视频后就禁用这个按钮，3秒后放开可以有效控制重复点击的问题
3、在这里，将点击录制视频和停止录制视频分开做，而且停止视频用button，这样可以使用disabled属性
<view wx:if="{{!startRecord}}" bindtap="startShootVideo" ></view>
<button wx:if="{{startRecord}}" disabled='{{!isclick}}' bindtap="stopShootVideo"></button>

data: {//计时time: 0,timeLoop: "",startRecord: false, //目前是否在拍摄isclick:true,},ctx:{},ready(){this.ctx=wx.createCameraContext()  //注意这里创建就可以了，不要重复在API中创建}

   // 开始录像的方法startShootVideo() {let that = this;console.log("开始录视频");that.setData({startRecord: true});// 30秒倒计时--自己页面上需要展示所以写的let t1 = 0;that.data.timeLoop = setInterval(() => {t1++;that.setData({time: t1,})}, 1000);this.ctx.startRecord({timeoutCallback:(e)=>{ //在官方提供的API中做30秒后清空计时器和赋值视频路径的事情clearInterval(this.data.timeLoop)that.setData({videoSrc: e.tempVideoPath,startRecord: false,time: 0})},success: (res) => {},fail(e) {},complete(e){ //这里处理按钮禁用3秒的问题if(that.data.isclick){that.setData({isclick:false,})//定时器setTimeout(function(){ that.setData({isclick:true,})}, 3000);}}})},

function debounce(fn, interval) {var timer;var gapTime = interval || 1000;//间隔时间，如果interval不传，则默认1000msreturn function () {clearTimeout(timer);var context = this;let args = arguments[0];//保存此处的arguments，因为setTimeout是全局的，arguments不是防抖函数需要的。timer = setTimeout(function () {fn.call(context, args);}, gapTime);};
}module.exports = {debounce
}

//结束录制视频 ，要引用上面的一个防抖方法，此处省略代码stopShootVideo: debounce(function (e) {let that = this;console.log("停止录视频");clearInterval(this.data.timeLoop)wx.showLoading({title: '视频处理中',mask: true})this.ctx.stopRecord({compressed: true, //压缩视频success: (res) => {console.log(res);},fail: function (e) {console.log(e);},complete: function (res) {wx.hideLoading()that.setData({videoSrc: res.tempVideoPath,startRecord: false,time: 0})}})}, 300)

以上是我目前面临的问题以及解决办法，欢迎大家一起讨论交流吖～

解决微信小程序录制视频存在的问题相关推荐

微信小程序录制视频方法踩坑总结
** 工作中需要微信小程序实现录制15s视频上传,部分用户反馈无法录制视频的问题,所以在此总结一下经验 ** 下面这张图片这是问题的表现,部分机型用户松开拍摄时提示未完成拍摄,导致无法上传视频. 上面 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
微信小程录制视频上传服务器,微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器nodejs版接收-微信小程序视频上传功能-微信小程序视频上传...
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid-后端为nodejs代码封装是在上文添加的.本文知识点:1. ...
微信小程序——获取视频的URL地址【已解决】
微信小程序--获取视频的URL地址[已解决] 如何获取音乐MV的URL地址虾米音乐试了很多音乐网站发现"虾米音乐"的MV的URL地址是可以获取的,并且在微信小程序播放视频的时候 ...
腾讯技术分享：微信小程序音视频与WebRTC互通的技术思路和实践
概述本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebRTC ...
微信小程序 RTMP 音视频通话 ffmpeg_WebRTC与微信小程序音视频互通方案设计与实现...
背景在之前的WebRTC实时音视频通话之语音通话设计与实践中介绍了58 TEG部门基于 WebRTC 的实时音视频通话解决方案. 考虑到腾讯微信的小程序平台提供了音视频通话与直播的支持,如果能打通基 ...
技术分享：微信小程序音视频与WebRTC互通的技术思路和实践
1.概述本文内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebRTC互通的实现思路以及技术方案.希望能带给你启发. 分别介绍 ...
解决微信小程序的video元素层级太高无法遮盖问题
解决微信小程序的video元素层级太高无法遮盖和show-play-btn属性失效问题今天在项目中遇到了这个问题,需要在微信小程序中用视频作为背景,微信开发者工具中模拟的没问题,真机调试就发现vid ...
腾讯技术分享：微信小程序音视频技术背后的故事
1.引言微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富.而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过. ...

解决微信小程序录制视频存在的问题

解决微信小程序录制视频存在的问题相关推荐

最新文章

热门文章