覆写video元素：显示自定义解码帧并兼容WebGL

我正在开发一个用于精准录制任意JavaScript动画的库，即使在低速设备或高帧率（如120fps，用于后续添加运动模糊）场景下也能正常工作。目前已通过重定义requestAnimationFrame、setTimeout、performance.now等核心API（例如window.Date.prototype.getTime = function(){return myfaketime;}），让它们返回伪造时间或仅在我准备就绪时调用目标函数（调用时机可能早于或晚于实际时间，取决于设备性能或调度需求），该方案参考并扩展了Ccapture.js的实现，目前效果符合预期。

现在需要将视频和音频纳入处理范围，当前先聚焦视频。核心问题是：通过myvideo.currentTime = foo跳转视频无法实现帧级精准度（所有浏览器偶尔会随机偏差几帧），因此希望通过钩子覆写<video>元素，用自定义生成的帧（例如通过Web Codec API解码的帧）替换其显示内容。

需要通过编程方式覆写<video>元素，满足以下两个要求：

• 为<video>元素添加myvideo.setContent(mybuffer)方法，mybuffer是包含目标显示帧的缓冲区或canvas。曾尝试用Shadow Root实现，但<video>元素不兼容该方案。希望避免将<video>替换为canvas，因为用户动画可能会遍历所有<video>标签控制播放/暂停，且新增/移除视频时适配代码繁琐，同时该方案也无法满足第二个需求；
• 该覆写方案需兼容WebGL：当WebGL从<video>生成纹理时，获取的是自定义帧而非视频原始帧。目前找到的方案是修改WebGL2RenderingContext.prototype.texImage2D等函数，虽能拦截调用，但存在大量边缘情况（WebGL/WebGL2、texImage2D/texSubImage等），希望找到简洁的通用解决方案。

注：库最终会使用Puppeteer，必要时可依赖浏览器扩展，但优先纯JavaScript方案以保持浏览器无关性。

核心思路 #

可通过代理<video>元素的属性和方法，结合自定义纹理源拦截WebGL采样实现需求：

1. 对<video>元素创建代理，保留原有API的同时注入setContent方法，用隐藏的canvas替代视频的实际显示内容；
2. 拦截WebGL中所有从视频采样纹理的操作，将源替换为自定义canvas。

具体实现 #

在页面第一个<script>标签中插入以下代码即可，无需修改用户动画代码：

// 1. 全局拦截video元素的实例化，为现有和新创建的video添加代理
(function() {
  const originalCreateElement = document.createElement;
  document.createElement = function(tagName) {
    const element = originalCreateElement.call(this, tagName);
    if (tagName.toLowerCase() === 'video') {
      return wrapVideoElement(element);
    }
    return element;
  };

  // 为已存在的video元素添加代理
  document.querySelectorAll('video').forEach(video => {
    wrapVideoElement(video);
  });

  function wrapVideoElement(video) {
    // 避免重复代理
    if (video._isWrapped) return video;

    // 创建隐藏的canvas作为自定义帧的载体
    const canvas = document.createElement('canvas');
    canvas.style.display = 'none';
    document.body.appendChild(canvas);
    const ctx = canvas.getContext('2d');

    // 代理video元素，覆盖显示相关行为
    const videoProxy = new Proxy(video, {
      get(target, prop) {
        // 注入setContent方法
        if (prop === 'setContent') {
          return function(buffer) {
            // 根据输入类型处理：canvas或ImageData
            if (buffer instanceof HTMLCanvasElement) {
              canvas.width = buffer.width;
              canvas.height = buffer.height;
              ctx.drawImage(buffer, 0, 0);
            } else if (buffer instanceof ImageData) {
              canvas.width = buffer.width;
              canvas.height = buffer.height;
              ctx.putImageData(buffer, 0, 0);
            }
            // 更新video的显示尺寸匹配canvas
            target.style.width = `${canvas.width}px`;
            target.style.height = `${canvas.height}px`;
          };
        }

        // 拦截获取视频尺寸的属性，返回canvas的尺寸
        if (prop === 'videoWidth') return canvas.width;
        if (prop === 'videoHeight') return canvas.height;

        // 其他属性和方法直接返回原对象的内容
        const value = target[prop];
        return typeof value === 'function' ? value.bind(target) : value;
      },
      set(target, prop, value) {
        // 忽略对currentTime的设置（我们用自定义帧控制）
        if (prop === 'currentTime') return true;
        target[prop] = value;
        return true;
      }
    });

    // 用canvas覆盖video的显示
    Object.defineProperty(videoProxy, 'style', {
      get() {
        return {
          ...target.style,
          get display() {
            return 'none'; // 隐藏原视频
          },
          set display(val) {
            // 同步显示状态到canvas
            canvas.style.display = val === 'none' ? 'none' : 'inline-block';
          }
        };
      }
    });

    // 替换DOM中的原video为代理对象（保持节点引用）
    if (video.parentNode) {
      video.parentNode.replaceChild(videoProxy, video);
    }

    videoProxy._isWrapped = true;
    videoProxy._canvas = canvas;
    return videoProxy;
  }

  // 2. 拦截WebGL纹理创建方法，替换视频源为自定义canvas
  function interceptWebGLTextureMethods(contextPrototype) {
    const originalTexImage2D = contextPrototype.texImage2D;
    contextPrototype.texImage2D = function(target, level, internalformat, format, type, source) {
      // 如果源是我们代理的video，替换为对应的canvas
      if (source instanceof HTMLVideoElement && source._isWrapped) {
        source = source._canvas;
      }
      return originalTexImage2D.call(this, target, level, internalformat, format, type, source);
    };

    const originalTexSubImage2D = contextPrototype.texSubImage2D;
    contextPrototype.texSubImage2D = function(target, level, xoffset, yoffset, format, type, source) {
      if (source instanceof HTMLVideoElement && source._isWrapped) {
        source = source._canvas;
      }
      return originalTexSubImage2D.call(this, target, level, xoffset, yoffset, format, type, source);
    };
  }

  // 同时拦截WebGL和WebGL2
  if (window.WebGLRenderingContext) {
    interceptWebGLTextureMethods(WebGLRenderingContext.prototype);
  }
  if (window.WebGL2RenderingContext) {
    interceptWebGLTextureMethods(WebGL2RenderingContext.prototype);
  }

  // 3. 测试用例：生成自定义帧并设置给video
  setTimeout(() => {
    const video = document.getElementById('video');
    // 创建测试帧
    const testCanvas = document.createElement('canvas');
    testCanvas.width = 500;
    testCanvas.height = 281;
    const testCtx = testCanvas.getContext('2d');
    testCtx.fillStyle = '#fff';
    testCtx.fillRect(0, 0, testCanvas.width, testCanvas.height);
    testCtx.beginPath();
    testCtx.arc(250, 140, 100, 0, 2 * Math.PI);
    testCtx.strokeStyle = '#ff0000';
    testCtx.lineWidth = 5;
    testCtx.stroke();
    // 设置自定义帧
    video.setContent(testCanvas);
  }, 1000);
})();

方案说明 #

• 视频元素代理：通过Proxy包装<video>元素，注入setContent方法，同时隐藏原视频的显示，用自定义canvas替代显示内容，保留原有play()、pause()等API的行为，确保用户代码无需修改；
• WebGL拦截：覆盖texImage2D和texSubImage2D方法，当检测到源是代理后的视频时，自动替换为对应的canvas，保证WebGL采样的是自定义帧；
• 兼容性：同时支持WebGL和WebGL2，覆盖所有常见的纹理更新方法，无需处理复杂的边缘情况；
• 无侵入性：用户的动画代码（包括ThreeJS的VideoTexture）完全不需要修改，即可正常使用自定义帧。

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