微信内置浏览器webgl2中使用VideoElement出现视频画面乱序
问题描述：【稳定复现】华为手机微信内置浏览器内，使用webgl2加载模型，将一个mp4文件通过HTMLVideoElement处理后交给webgl2渲染，HTMLVideoElement的画面会出现异常抖动。（经验证，该抖动是由于得到的帧画面乱序导致的，即应该以1-2-3-4-5的预期顺序逐一出现的画面，实际是以1-2-3-5-4的错误顺序出现的） 实验设备：HUAWEI Mate 30 Pro 5G（在许多华为手机上可稳定复现，例如HUAWEI Mate 30 Pro，Nova 6等） 微信版本号8.0.33，内置浏览器userAgent如下 [图片] 实验设置：Webgl2设置preserveDrawingBuffer为true [图片] 实验链接：https://beta-h5.xverse.cn/bug-report/obj/index.html 复现方式：使用华为手机微信打开实验链接，等待资源加载完毕，即左侧canvas出现蓝色模型后，点击屏幕开始视频播放，观察视频流即可。 实验结果：微信内置浏览器观察到明显的视频乱序，企业微信内置浏览器正常。（当preserveDrawingBuffer为false时，微信内置浏览器和企业微信内置浏览器都正常） 实验视频： 微信内置浏览器异常 [视频] 企业微信内置浏览器正常 [视频] --------------------------------------------------------------------------------------------------------------------------------------------- 补充一下微信内置浏览器视频中明显乱序的时间点：0:24、0:29 ------------------------------------------------2023/04/06----------------------------------------------------------------------------- 在webgl2的延伸使用场景（即如下链接：https://uat-h5.xverse.cn/finance/dev/finance/index.html），上面提到的规避措施preserveDrawingBuffer=false失效，依然出现了严重的乱序的问题。在企业微信和华为内置浏览器中依然正常。 [视频] ------------------------------------2023/04/07------------------------------------------------------------ 接昨日，经排查是由于前端的div中css设置了backdrop-filter导致的。将这个改动放到webgl2的demo中也出现了同样的现象。 对照组：https://beta-h5.xverse.cn/bug-report/obj/index_raf.html 实验组：https://beta-h5.xverse.cn/bug-report/obj/index_raf_backdrop.html 实验方式：微信中打开链接，等待加载（时间可能比较长），加载完成后屏幕上会出现蓝色的球，此时点击屏幕任意位置即可开始播放视频。 实验描述： 对照组： 加载一个58w面的模型，使用requestAnimationFrame渲染。创建一个VideoElement，将src设置为一个视频，放到webgl2中渲染，同时在屏幕右上角显示该VideoElement查看画面。 视频文件：https://beta-h5.xverse.cn/bug-report/sample_25fps.mp4 实验组：在对照组的基础上，在<body>中增加了一行带有backdrop-filter的div。增加后body代码如下：[图片] 实验结果： 对照组没有出现VideoElement乱序，实验组出现了VideoElement乱序。重复进行三次，现象均一致。 实验录屏： [视频]
