1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86


content / test / data / gpu / pixel_webgpu_canvas_capture_to_video.html [blame]

<!DOCTYPE html>
<html>

<head>
  <title>WebGPU canvas' capture as video stream test</title>
  <style type="text/css">
    .nomargin {
      margin: 0px auto;
    }
  </style>
  <script type="text/javascript" src="pixel_webgpu_util.js"></script>
  <script type="text/javascript">
    var g_swapsBeforeAck = 15;
    var g_videoFrameReceived = false;

    const parsedString = new URLSearchParams(window.location.search);

    async function main() {
      const has_alpha_string = parsedString.get('has_alpha');
      const hidden_string = parsedString.get('hidden');

      has_alpha = (has_alpha_string != null) ?
        has_alpha_string == 'true' : false;

      hidden = (hidden_string != null) ? hidden_string == 'true' : false;

      const gpuCanvas = document.getElementById('canvas_gpu');
      if (hidden) {
        gpuCanvas.style.display = 'none';
      }

      const [device, swapChain] = await webGpuUtils.init(gpuCanvas, has_alpha);
      if (!device || !swapChain) {
        console.error("Failed to initialize WebGPU - skipping test");
        domAutomationController.send("FAILURE");
        return;
      }

      const video = document.getElementById('video_player');
      video.srcObject = gpuCanvas.captureStream();

      function render() {
        const gpuContext = gpuCanvas.getContext('webgpu');

        webGpuUtils.fourColorsTest(device, swapChain, gpuCanvas.width,
          gpuCanvas.height);

        waitForFinish();
      }

      function videoFrameReceived() {
        g_videoFrameReceived = true;
      }

      function waitForFinish() {
        if (g_swapsBeforeAck == 0) {
          domAutomationController.send("SUCCESS");
        } else {
          // only start count down when a video frame has been received
          if (g_videoFrameReceived)
            g_swapsBeforeAck--;
          window.requestAnimationFrame(render);
        }
      }

      // Start rendering loop
      window.requestAnimationFrame(render);

      // register a callback to be invoked when a video frame has been received.
      if (video.requestVideoFrameCallback) {
        video.requestVideoFrameCallback(videoFrameReceived);
      }
      else {
        // requestVideoFrameCallback not available
        g_videoFrameReceived = true;
      }
    }
  </script>
</head>

<body onload="main()" class="nomargin" style="display: inline-flex">
  <video id="video_player" playsinline autoplay muted width="200" height="200" class="nomargin"></video>
  <canvas id="canvas_gpu" width="200" height="200" class="nomargin"></canvas>
</body>

</html>