华为 Mate X6 折叠屏微信浏览器 Video 黑屏排查实录一场涉及 CSS 渲染、X5 内核特性、Promise 竞态的多层问题排查一、问题的样子项目里做人脸识别活体检测，调用getUserMedia获取摄像头视频流。测试同学反馈：华为 Mate X6 展开态视频正常，折叠态黑屏。展开态正常，折叠态异常——这种「大屏OK小屏翻车」的问题，听起来像是适配问题，但实际排查下来远比想象中复杂。二、环境项目值设备华为 Mate X6 折叠屏浏览器微信内置浏览器（X5 内核）展开态约 7.9 英寸，2224×2496折叠态约 6.4 英寸，1080×2376视频 APInavigator.mediaDevices.getUserMedia三、排查之路排查过程经历了四个阶段，从"换个方案试试"到"逐行代码对找"，思路逐步收敛。🔍 第一阶段：Canvas 降级假设：video 元素本身渲染异常，用 canvas 逐帧绘制代替。video（隐藏）→ requestAnimationFrame → canvas.drawImage()结果：展开态正常，折叠态仍然黑屏。这个阶段有一个意外发现：visibility: hidden会让 X5 停止 video 帧解码，drawImage拿到的全是黑帧。改用opacity: 0才能保持帧数据可访问。💡 教训：X5 下 video 隐藏方式的选择会影响帧解码行为。🔍 第二阶段：加诊断日志在 video 初始化的每个关键节点加日志，看流程断在哪：① 摄像头流获取成功 ② srcObject 已设置 ③ loadedmetadata 事件 ④ play() Promise 结果 ⑤ playing 事件 ⑥ 帧检测（像素求和）发现：步骤 ④⑤ 没有执行——video.play()的 Promise 既没 resolve 也没 reject。这说明 X5 在折叠态下，Promise 处理本身出了问题。🔍 第三阶段：最小化测试关键转折：创建一个最简页面camera_test.html，只有 video + getUserMedia，不加载任何外部 CSS/JS。折叠态正常显示！这证明 video API 本身没问题，黑屏是页面代码造成的。接下来的思路就是：逐项对比camera_test.ht