dom/canvas/test/webgl-conf/checkout/extra/texture-from-camera-stress.html

   1 <!--
   2 Copyright (c) 2019 The Khronos Group Inc.
   3 Use of this source code is governed by an MIT-style license that can be
   4 found in the LICENSE.txt file.
   5 -->
   6
   7 <!DOCTYPE html>
   8 <html>
   9 <head>
  10 <meta charset="utf-8">
  11 <title>Stresses the camera-to-texture upload path.</title>
  12 <link rel="stylesheet" href="../resources/js-test-style.css"/>
  13 <script src="../js/js-test-pre.js"></script>
  14 <script src="../js/webgl-test-utils.js"> </script>
  15 </head>
  16 <body>
  17 <div id="description"></div>
  18 <div id="console"></div>
  19 <canvas id="canvas" width="640" height="360">
  20 </canvas>
  21 <script>
  22 "use strict";
  23 description();
  24
  25 debug("Repeatedly uploads from a camera video element to a texture, many times per frame.")
  26
  27 const wtu = WebGLTestUtils;
  28 const gl = wtu.create3DContext(document.getElementById('canvas'));
  29 const video = document.createElement('video');
  30 video.src = '';
  31 video.loop = false;
  32 video.muted = true;
  33 video.setAttribute('playsinline', '');
  34
  35 const program = wtu.setupTexturedQuad(gl);
  36 const textureLoc = gl.getUniformLocation(program, "tex");
  37 gl.uniform1i(textureLoc, 0);
  38
  39 const texture = gl.createTexture();
  40 gl.bindTexture(gl.TEXTURE_2D, texture);
  41 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  42 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  43 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  44 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  45 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
  46
  47 navigator.mediaDevices.getUserMedia({
  48         audio: false,
  49         video: {
  50             facingMode: 'environment',
  51             width: 1280,
  52             height: 720,
  53         }
  54     })
  55     .then(mediaStream => {
  56         video.srcObject = mediaStream;
  57         video.onloadedmetadata = () => {
  58             wtu.startPlayingAndWaitForVideo(video, startTestLoop);
  59         };
  60     });
  61
  62 const urlOptions = wtu.getUrlOptions();
  63 const uploadsPerFrame = urlOptions.uploadsPerFrame ? urlOptions.uploadsPerFrame : 400;
  64 debug('');
  65 debug(`Testing with ${uploadsPerFrame} uploads per frame`);
  66
  67 function startTestLoop() {
  68     requestAnimationFrame(startTestLoop);
  69     for (let i = 0; i < uploadsPerFrame; ++i) {
  70         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, video);
  71     }
  72     wtu.clearAndDrawUnitQuad(gl);
  73 }
  74
  75 var successfullyParsed = true;
  76 </script>
  77
  78 </body>
  79 </html>