小程序web-view嵌套H5对AR特效canvas用MediaRecorder录屏踩坑记录

没有iPhone手机，都是找别人测和云真机，但云真机调ar也不方便，微信也难登，真的很难搞。

AR场景下，在播放视频或音频前，一般只有一次点击按钮的机会，然后就是一段用户拍摄目标的空窗期，因此必须在用户点击按钮的时候解锁声音bgm.muted = false，此时播放空白音频或视频成为基本操作，等到识别到目标物体再替换音视频路径即可（如用AudioContext也可通过代码产生音频解锁，如JSMpeg中的player.audioOut.unlock方法）。
有苹果手机同时播放多个声音时出现各种怪异的声响...
部分苹果手机在同时播放多个有声媒体时存在限制，在上例中如果同时解锁video和audio，会出现audio自动暂停播放的情况，AudioContext也受影响，可能莫名其妙播放几秒就自动停了，排查老半天，搜索总算找到一个类似介绍：Safari Play Multiple Video Restrictions at the Same Time | ZEGOCLOUD Documentation
IOS下测试中出现一例navigator.mediaDevices获取不到undefined的情况，怀疑是摄像头麦克风被其它应用占用了。
IOS下使用getUserMedia进行录音时，如果同时在使用AudioContext播放音乐，会出现音乐前几秒走调变音的情况，怎么调整先后顺序加timeout都不好使，可能与autoGainControl参数有关，关了试试。但是用audio标签播放的不受影响，但部分机型好像也不行？
使用getUserMedia进行录音时会影响其它声音的音量，实际上手机的音量从媒体音量变成了系统音量，同时音乐还会出现卡顿的情况。
虽然微信小程序文档说web-view页面可以使用onPageStateChange监听前后台事件，但是在安卓上res.active返回的是字符串类型，苹果手机有的事件无效，有的是bool类型，一塌糊涂。还是用visibilitychange吧。
部分苹果手机下拉屏幕会自动暂停音视频播放，上述事件无法被监听到。只好用 setInterval不停的监测了。
canvas.captureStream()在iphone 13 pro (IOS 15.3)上webkit出现了崩溃现象，canvas是webgl的，2d的测试正常。日志为com.apple.WebKit.WebContent[10688] exceeded mem limit: ActiveSoft 1536 MB (non-fatal) MobileSafari(WebKit)[10670] <Error>: 0x106ac3600 - [PID=10688] WebProcessProxy::didClose: (web process 0 crash)
MediaRecorder苹果支持video/mp4，兼容性挺好谁都能播。安卓微信里支持video/webm;codecs=h264，最终输出格式为video/x-matroska;codecs=avc1,opus，兼容性不佳，只能h5里安卓自己看。安卓指定录制格式为h264时性能不及默认格式VP8，实际录制时长会有丢失。低端安卓录制分辨率大于600宽时就会丢失时长。webm格式在播放器里不播完似乎是不知道最终时长的，可以通过durationchange事件获取，loadedmetadata事件则不行。
阿里云文档里声称支持webm转mp4但实际测试是失败的，提交工单自己也说不支持...使用函数计算ffmpeg能转mkv，但VP8是失败的；腾讯云虽然界面里没说支持webm，但实际却是可以转的...虽然也有客户端用ffmpeg.js转mp4的方案，但文件太大，转换太慢，而且微信里也不支持。最快的转换方案还是用webrtc边直播边录制。阿里云直播文档里没有搜到，似乎是不支持canvas做为视频流；而腾讯云实测是支持的，然后使用实时音视频旁路直播录制即可。实时音视频 Web-高级功能-文档中心-腾讯云

小程序web-view嵌套H5对AR特效canvas用MediaRecorder录屏踩坑记录相关推荐

微信小程序中嵌套html_微信小程序：web-view嵌套H5实现微信支付功能解决方案及填坑...
ab7117c7d4947210c39e126a01d23ede.jpg 最近一个多月加班比较严重,偶尔休息一天也是在补睡眠+陪家人,比较长时间没有来进行总结记录了.今天不加班,开始为这段时间做的东西 ...
小程序实现语音识别歌曲的功能，对接讯飞的api，踩坑篇！！
最近公司要求在小程序里实现识别搜索歌曲的功能,然后对接的是讯飞的api,本来我一个做前端的,对接第三方的文档这些应该留给后端做才对的,前端就上传一个录音给后端让他去调接口返回数据给我就好了.可是当我对 ...
控制微信小程序web view的返回按钮
需求:点击web-view页面的左上角返回按钮时,显示弹窗,点击取消或确认后才能返回.(实际上点击返回按钮会直接返回上一页) 解决方法:由于webview使用的是微信浏览器打开的,我们可以使用js的H ...
微信小程序跳转到H5网页
小程序是一种不用下载就能使用的应用,也是一项门槛非常高的创新,经过将近两年的发展,已经构造了新的小程序开发环境和开发者生态.小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果,现 ...
实现微信小程序web-view内嵌H5中的下载功能(大文件切片下载)
实现微信小程序内嵌H5中的下载功能一.项目场景: 难点解决方案: 1.H5微信小程序: a.首先必不可少的是安装jweixin-module模块: b.在main.js中将依赖绑定: c.H5对应 ...
小程序跳转到另一个小程序,参数传递以及调试,H5跳转小程序,小程序内嵌H5,
业务场景:企业A的小程序内嵌了企业B的H5 问题:企业A内嵌企业B的H5发起微信支付的时候,绕不过微信的限制.总是支付失败. 问题解决思路:企业B新建一个小程序,让企业A调用企业B的小程序, B内嵌H ...
[微信小程序]WebView内嵌H5实现本地文件上传
[官方文档] 小程序与H5如何互相跳转小程序与H5交互以上传文件为例微信小程序开放能力web-view使用之h5页面与小程序页面交互传值快速小程序开发之微信小程序内嵌 H5 微信小程序web-v ...
uniapp微信小程序外壳内联H5实现支付
业务场景:用户有现成的微信H5应用(有微信支付).用户想要一个一摸一样的小程序版本,但是又不想高成本去重新开发,所以可以考虑采用小程序的web-view组件内联现有的微信H5应用(哇简直不要再偷懒了! ...
小程序 | 微信小程序实现循环嵌套数据选择
小程序 | 微信小程序实现循环嵌套数据选择一.效果展示二.代码实现在.wxml文件中,有时从后台传来的数据可能会出现数组嵌套数组的情况,需要利用wx:for嵌套实现数据的展示.这时,外层循环正常 ...

小程序web-view嵌套H5对AR特效canvas用MediaRecorder录屏踩坑记录

小程序web-view嵌套H5对AR特效canvas用MediaRecorder录屏踩坑记录相关推荐

最新文章

热门文章