调试莫名其妙的重新渲染 / 分析视频流黑屏的问题

2022-07-26 · 周二一般

继续处理 Bug 清单,其中有一个问题根据产品经理的意思,需要在点击「创建会议」的条件下,进入会议中页面时自动弹出“会议详情”弹窗,实现「会议链接复制和分享」的功能。

要弹窗的那个组件有一个 visible 属性,我起初是想要通过识别 URLSearchParams(又称 URL Query)的方式传给接收的那个页面,初始化 State 的时候应该会默认是 true 然后弹窗。结果发现效果并非是我想的那样。

给弹窗组件打印出了 visible 属性,只要重新渲染就都会打印出来。发现打印的值时而是 true 时而是 false。一番研究后发现主要有两个原因,第一个其实是在同一个父下有两个相同弹窗组件被同时挂载到了不同的组件层级上,所以会同时输出两个不同的 visible 状态。而实际我需要默认弹出来的那个弹窗的 visible 其实有过为 true 的输出,之后呈现效果被改变,大概率是因为出现了「重新渲染」的情况(@Innei 提醒我的)。

仔细检查多个组件后发现地址栏的 URL 有变化,有处 Context 组件执行了路由的 navigate 函数进行了路由切换,这下子就真相大白了。尽管两个地址最终访问的路由组件是同一个,但依旧会重新挂载所有子组件。(我小窝后台的 React Router 5 改变了 URL,相同路由组件的情况下为什么会保留之前的值,只能检测路由的 params 手动还原 State,而不是重新初始化呢)

最后这个功能的解决办法和其他同事的一样,改成了 sessionStorage 的方式传过去,确实简单粗暴做出来了,但还是感觉这样的实现蛮诡异的。

下午和测试校对 Bug 清单的其他问题,有多数无法再次复现都关闭了,有一部分我可以正常修改,还有一部分需要我继续分析下具体呈现效果和背后的原因。其中有一个 iPad 摄像头画面出现黑屏,而还能开启虚拟背景的 Bug 我比较感兴趣。用自己的 MacBook 和 iPhone 都可以轻松复现,在这种情况下摄像头权限确实正常授权使用,只是画面黑了。具体复现方式就是打开摄像头,点击左下角「大小」按钮,点击「停止使用相机」。

我认为这种情况应该和设备授权没有关系,得从媒体流这方面去探索。又去查询了相关接口,MediaStreamTrack 这个对象貌似比较符合上述问题。可能是因为 Safari 浏览器可以直接将视频轨道“禁用”,而不像 Chrome 那样只能“一刀切”取消摄像头权限授权。具体情况是不是这样,还是明天再试试看吧!

把握时间 掌握方向 1

把握时间 掌握方向 1

林生祥
Paul

Paul

特立独行的一只前端菜狗。这篇日记编写大概耗时了 0 分钟,内容均为个人原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!如本站内容对你有所帮助的话,不妨 捐助支持 一下?

近期评论

鲍小螺: 前辈多多指教!ahu: 后生可畏寻梦xunm: 真不错,板子很好看。timochan: 太惨了( ,更新暴毙,如果恢复没成功,数据也 dump 不出来鲍小螺: 在这部分对话中,广树和保罗继续讨论生活的不同方面。保罗提到了技术更新和国内的优秀 IT 技术。广树解释了在国内积累的经验如何在日本产生穿越的感觉,并表达了对于日本生活节奏的喜爱。他还提到了医疗水平的差异和对于生活方式的感受。保罗表示,通过动漫和现实的对比,艺术来源于现实,日本生活的确有着独特之处。他们讨论了国内的生活节奏和就医等方面的压力,以及个人选择的自由。最后,他们也谈到了不结婚不买房的选择和对于房价的困扰。鲍小螺: 该对话进一步讨论了房地产和税收的问题。保罗提到了国内的房地产税和增值税以及日本的固定资产税。广树解释了日本房地产税的收取方式,以及房产税对于国内房产的影响。他认为,与国内相比,日本的房子质量和服务更好。保罗提出疑问,为什么自己拥有的地也要交税。广树解释了类似增值税的原理,并指出在日本拥有房产是稳定安全的。最后,保罗表示从广树的角度来看,情况确实是如此。鲍小螺: 这篇文章的聊天记录也尝试过用 GPT 总结,结果并不是太好,不知道是不是 Prompt 的问题,实际出来的内容过于简练了,于是又耗费了半小时写完,呼~
奇趣音乐盒技术源于 Kico Player
Emmm,这里是歌词君