收藏
回答

微信内置浏览器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乱序。重复进行三次,现象均一致。

实验录屏:


最后一次编辑于  2023-04-07
回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容