canvas-drawImage-live-video.html | Explore in Territory

<html>
<head>
  <style type="text/css">
  video {
    display: none;
  }
  </style>
</head>
<body>
<canvas id="canvas"></canvas>
<video id="video">
  <source src="../../media/resources/test-live.webm" type='video/webm' />
</video>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
async_test(t => {
  var canvas = document.getElementById("canvas");
  canvas.width = 100;
  canvas.height = 100;
  var ctx = canvas.getContext("2d");

    var video = document.getElementById("video");
    video.addEventListener("canplaythrough", drawFirstFrame, true);

    function drawFirstFrame() {
      video.removeEventListener("canplaythrough", drawFirstFrame, true);
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      video.requestVideoFrameCallback(t.step_func(processFirstFrame));
      video.play();
    }

    var referenceImageData;

    function processFirstFrame() {
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      referenceImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      video.requestVideoFrameCallback(t.step_func_done(processSecondFrame));
    }

    function processSecondFrame() {
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      var imagesAreTheSame = true;
      for(var i = 0; i < imageData.data.length; ++i) {
        if (imageData.data[i] != referenceImageData.data[i]) {
          imagesAreTheSame = false;
          break;
        }
      }
      assert_false(imagesAreTheSame);
    }
}, 'Verify that consecutive drawImage from a live video correctly propagates frame updates.');
</script>
</body>
chromium/third_party/blink/web_tests/fast/canvas/canvas-drawImage-live-video.html
