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

Question

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

使用 a 执行此操作会更高效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
  );
}