小程序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] : 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-高级功能-文档中心-腾讯云