CODEWITHSUNDEEP
html5-videowebgl
dronus
dronus

Reputation: 11272

Load WebGL texture from HTML5 video element in sync

If a WebGL texture is loaded from an HTML5 video element repeatedly, how can I sync the load procedure, eg. load the texture and render the WebGL scene exactly once for every video frame?

Upvotes: 1

Views: 910

Answers (1)

user128511
user128511

Reputation:

In Chrome there is now requestVideoFrameCallback

Example from the spec:

<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>

replace ctx.drawImage with your WebGL code

Upvotes: 1

Related Questions