Chrome中屏幕捕获MediaStream转WebGL纹理格式异常求助

问题详情 #

• 异常表现：Chrome中原有功能失效，将屏幕捕获的MediaStream上传为WebGL视频纹理时，画面倾斜且带有绿色斜线；共享浏览器标签页时画面显示正常，Webcam的MediaStream输入无此问题。
• 受影响功能：前景叠加摄像头、背景为屏幕捕获纹理的组合功能无法正常运行，暂无法确定是缓冲区数组配置错误还是其他原因导致。
• 核心纹理上传代码：

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, screenVideo);

• 问题截图：
  

排查与修复建议 #

1. 通过Canvas中转视频帧
   屏幕捕获流的像素格式可能与WebGL的RGBA纹理不兼容，直接上传视频元素会导致解析异常。可以先将视频帧绘制到Canvas，再从Canvas上传纹理：

// 新增Canvas中转逻辑
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 确保Canvas尺寸与视频一致
canvas.width = screenVideo.videoWidth;
canvas.height = screenVideo.videoHeight;
// 绘制视频帧到Canvas
ctx.drawImage(screenVideo, 0, 0);
// 从Canvas上传纹理
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);

2. 检查纹理参数配置
   错误的纹理过滤或环绕模式可能导致画面扭曲，确认以下参数是否正确设置：

// 设置纹理环绕模式
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
// 设置纹理过滤模式
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

3. 验证视频尺寸与WebGL兼容性
   若使用WebGL 1.0，需确认是否开启OES_texture_non_power_of_two扩展，否则非2的幂次方尺寸的纹理可能出现显示异常：

// 检查并开启非2的幂次方纹理扩展
const ext = gl.getExtension('OES_texture_non_power_of_two');
if (!ext) {
  console.warn('不支持非2的幂次方纹理，可能导致显示异常');
}

4. 排查Chrome版本bug
   该现象可能是Chrome特定版本的兼容性bug，尝试更新Chrome至最新稳定版，或在Edge等其他Chromium内核浏览器中测试，确认是否为浏览器版本问题。

内容的提问来源于stack exchange，提问作者Dan Rossi