html - 用于渲染视频的 2d 上下文与 WebGL

Question

我目前正在使用 CanvasRenderingContext2D.drawImage() 将来自 RTC 媒体流的视频绘制到 Canvas 上。不幸的是，这占用了大量的 CPU 资源。

使用 WebGLRenderingContext 执行此操作会更高效吗？ (硬件加速？)如果是，具体如何处理这个问题，最好不要创建中间视频元素？

Answer 1

更新:

来源: https://github.com/mdn/dom-examples/blob/e9ee0e48efb6158878dbfe70878d3663f52ab6f7/webgl-examples/tutorial/sample8/webgl-demo.js#L374

function updateTexture(gl, texture, video) {
  const level = 0;
  const internalFormat = gl.RGBA;
  const srcFormat = gl.RGBA;
  const srcType = gl.UNSIGNED_BYTE;
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(
    gl.TEXTURE_2D,
    level,
    internalFormat,
    srcFormat,
    srcType,
    video
  );
}