做一个款短视频拍摄的微信小程序,看了下微信接口,以为很简单,大致步骤开始拍摄,停止拍摄,保存,就结束了,谁知道做的过程中发现一些问题。
先看下我做的大概样式
开发中遇到的问题
1,timeoutCallback重复触发
开始调用wx.startRecord()事件后,timeoutCallback方法好像并不会随着wx.stopRecord()的调用而销毁。具体情况复现流程为,拍摄15s中视频后,停止拍摄,在下次开始拍摄后,时间大于15s,其实是在同一个camera实例触发多次录像事件,会累计多次拍摄的时长,然后触发timeoutCallback事件,而造成后续触发stopRecord失效,导致录像保存失败。
timeoutCallback: 方法超过30s或页面 onHide 时会结束录像
解决方法,如果不是多次拍摄保存为一条视频,那么每次拍摄的时候创建一个新的camera实例
2,30s时长
微信小程序录像默认时长是30s,如果录像时长超过会触发timeoutCallback。但是有一种情况在录像时间达到27s~28s,自己触发wx.stopRecord()偶尔会保存失败,或者调用无反应。经过多次测试发现,在自己调用wx.stopRecord()保存视频的时候,先触发了timeoutCallback,所以要考虑视频保存到本地的时间。
解决方法,如果需要自己手动保存视频,建议安全时间为25s左右。
3,小程序授权时,touchend和touchcancel的触发时机
在小程序做录像功能要有三个授权,第一是摄像头授权,第二是相册授权(保存文件用),第三是录音授权。
因为抖音的操作习惯,一个按钮两个功能,单击为拍照,长按为拍摄视频。单击拍照因为打开小程序的时候,默认就强制要求开通权限,所以在长按按钮会弹出录音授权的系统弹窗。
长按按钮开始录像功能,手指松开录像结束,保存文件。但是在长按触发录音授权的系统弹窗,我以为会触发touchend或者touchcancel事件,但是测试后发现授权的系统弹窗弹出后,touchcancel并不会触发,而在关闭系统弹窗后会触发touchend。
解决方法,严格控制逻辑中的事件触发时间点和触发方式。
4,cover-view的动画效果问题
卡,实在是卡,不建议在cover-view中使用css动画
还有其他多少琐碎问题,就靠大家自行发觉了。
测试机型iPhone 6s, 三星note系列,小程序基础库2.8.0