从 HTML5 视频元素同步加载 WebGL 纹理答案

【问题标题】：Load WebGL texture from HTML5 video element in sync从 HTML5 视频元素同步加载 WebGL 纹理
【发布时间】：2016-02-06 02:53:15
【问题描述】：

如果从 HTML5 视频元素重复加载 WebGL 纹理，我如何同步加载过程，例如。为每个视频帧加载纹理并仅渲染一次 WebGL 场景？

【问题讨论】：

您可以尝试使用timeupdate 事件，或者在更新纹理之前检查currentTime 属性。

标签： html5-video webgl

【解决方案1】：

Chrome 中现在有 requestVideoFrameCallback

规范中的示例：

<body>
  <video controls></video>
  <canvas width="640" height="360"></canvas>
  <span id="fps_text"/>
</body>

<script>
  function startDrawing() {
    var video = document.querySelector('video');
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');

    var paint_count = 0;
    var start_time = 0.0;

    var updateCanvas = function(now) {
      if(start_time == 0.0)
        start_time = now;

      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

      var elapsed = (now - start_time) / 1000.0;
      var fps = (++paint_count / elapsed).toFixed(3);
      document.querySelector('#fps_text').innerText = 'video fps: ' + fps;

      video.requestVideoFrameCallback(updateCanvas);
    }

    video.requestVideoFrameCallback(updateCanvas);

    video.src = "http://example.com/foo.webm"
    video.play()
  }
</script>

用您的 WebGL 代码替换 ctx.drawImage

【讨论】：

+1 在此用例中使用 requestVideoFrameCallback()。这是article，其中包含有关此 API 的更多详细信息。