tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

captureStream_common.js (9984B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 "use strict";
      6 
      7 /*
      8 * Util base class to help test a captured canvas element. Initializes the
      9 * output canvas (used for testing the color of video elements), and optionally
     10 * overrides the default `createAndAppendElement` element |width| and |height|.
     11 */
     12 function CaptureStreamTestHelper(width, height) {
     13  if (width) {
     14    this.elemWidth = width;
     15  }
     16  if (height) {
     17    this.elemHeight = height;
     18  }
     19 
     20  /* cout is used for `getPixel`; only needs to be big enough for one pixel */
     21  this.cout = document.createElement("canvas");
     22  this.cout.width = 1;
     23  this.cout.height = 1;
     24 }
     25 
     26 CaptureStreamTestHelper.prototype = {
     27  /* Predefined colors for use in the methods below. */
     28  black: { data: [0, 0, 0, 255], name: "black" },
     29  blackTransparent: { data: [0, 0, 0, 0], name: "blackTransparent" },
     30  white: { data: [255, 255, 255, 255], name: "white" },
     31  green: { data: [0, 255, 0, 255], name: "green" },
     32  red: { data: [255, 0, 0, 255], name: "red" },
     33  blue: { data: [0, 0, 255, 255], name: "blue" },
     34  grey: { data: [128, 128, 128, 255], name: "grey" },
     35 
     36  /* Default element size for createAndAppendElement() */
     37  elemWidth: 100,
     38  elemHeight: 100,
     39 
     40  /*
     41   * Perform the drawing operation on each animation frame until stop is called
     42   * on the returned object.
     43   */
     44  startDrawing(f) {
     45    var stop = false;
     46    var draw = () => {
     47      if (stop) {
     48        return;
     49      }
     50      f();
     51      window.requestAnimationFrame(draw);
     52    };
     53    draw();
     54    return { stop: () => (stop = true) };
     55  },
     56 
     57  /* Request a frame from the stream played by |video|. */
     58  requestFrame(video) {
     59    info("Requesting frame from " + video.id);
     60    video.srcObject.requestFrame();
     61  },
     62 
     63  /*
     64   * Returns the pixel at (|offsetX|, |offsetY|) (from top left corner) of
     65   * |video| as an array of the pixel's color channels: [R,G,B,A].
     66   */
     67  getPixel(video, offsetX = 0, offsetY = 0) {
     68    // Avoids old values in case of a transparent image.
     69    CaptureStreamTestHelper2D.prototype.clear.call(this, this.cout);
     70 
     71    var ctxout = this.cout.getContext("2d");
     72    ctxout.drawImage(
     73      video,
     74      offsetX, // source x coordinate
     75      offsetY, // source y coordinate
     76      1, // source width
     77      1, // source height
     78      0, // destination x coordinate
     79      0, // destination y coordinate
     80      1, // destination width
     81      1
     82    ); // destination height
     83    return ctxout.getImageData(0, 0, 1, 1).data;
     84  },
     85 
     86  /*
     87   * Returns true if px lies within the per-channel |threshold| of the
     88   * referenced color for all channels. px is on the form of an array of color
     89   * channels, [R,G,B,A]. Each channel is in the range [0, 255].
     90   *
     91   * Threshold defaults to 0 which is an exact match.
     92   */
     93  isPixel(px, refColor, threshold = 0) {
     94    return px.every((ch, i) => Math.abs(ch - refColor.data[i]) <= threshold);
     95  },
     96 
     97  /*
     98   * Returns true if px lies further away than |threshold| of the
     99   * referenced color for any channel. px is on the form of an array of color
    100   * channels, [R,G,B,A]. Each channel is in the range [0, 255].
    101   *
    102   * Threshold defaults to 127 which should be far enough for most cases.
    103   */
    104  isPixelNot(px, refColor, threshold = 127) {
    105    return px.some((ch, i) => Math.abs(ch - refColor.data[i]) > threshold);
    106  },
    107 
    108  /*
    109   * Behaves like isPixelNot but ignores the alpha channel.
    110   */
    111  isOpaquePixelNot(px, refColor, threshold) {
    112    px[3] = refColor.data[3];
    113    return this.isPixelNot(px, refColor, threshold);
    114  },
    115 
    116  /*
    117   * Returns a promise that resolves when the provided function |test|
    118   * returns true, or rejects when the optional `cancel` promise resolves.
    119   */
    120  async waitForPixel(
    121    video,
    122    test,
    123    {
    124      offsetX = 0,
    125      offsetY = 0,
    126      width = 0,
    127      height = 0,
    128      cancel = new Promise(() => {}),
    129    } = {}
    130  ) {
    131    let aborted = false;
    132    cancel.then(e => (aborted = true));
    133 
    134    while (true) {
    135      await Promise.race([
    136        new Promise(resolve =>
    137          video.addEventListener("timeupdate", resolve, { once: true })
    138        ),
    139        cancel,
    140      ]);
    141      if (aborted) {
    142        throw await cancel;
    143      }
    144      if (test(this.getPixel(video, offsetX, offsetY, width, height))) {
    145        return;
    146      }
    147    }
    148  },
    149 
    150  /*
    151   * Returns a promise that resolves when the top left pixel of |video| matches
    152   * on all channels. Use |threshold| for fuzzy matching the color on each
    153   * channel, in the range [0,255]. 0 means exact match, 255 accepts anything.
    154   */
    155  async pixelMustBecome(
    156    video,
    157    refColor,
    158    { threshold = 0, infoString = "n/a", cancel = new Promise(() => {}) } = {}
    159  ) {
    160    info(
    161      "Waiting for video " +
    162        video.id +
    163        " to match [" +
    164        refColor.data.join(",") +
    165        "] - " +
    166        refColor.name +
    167        " (" +
    168        infoString +
    169        ")"
    170    );
    171    var paintedFrames = video.mozPaintedFrames - 1;
    172    await this.waitForPixel(
    173      video,
    174      px => {
    175        if (paintedFrames != video.mozPaintedFrames) {
    176          info(
    177            "Frame: " +
    178              video.mozPaintedFrames +
    179              " IsPixel ref=" +
    180              refColor.data +
    181              " threshold=" +
    182              threshold +
    183              " value=" +
    184              px
    185          );
    186          paintedFrames = video.mozPaintedFrames;
    187        }
    188        return this.isPixel(px, refColor, threshold);
    189      },
    190      {
    191        offsetX: 0,
    192        offsetY: 0,
    193        width: 0,
    194        height: 0,
    195        cancel,
    196      }
    197    );
    198    ok(true, video.id + " " + infoString);
    199  },
    200 
    201  /*
    202   * Returns a promise that resolves after |time| ms of playback or when the
    203   * top left pixel of |video| becomes |refColor|. The test is failed if the
    204   * time is not reached, or if the cancel promise resolves.
    205   */
    206  async pixelMustNotBecome(
    207    video,
    208    refColor,
    209    { threshold = 0, time = 5000, infoString = "n/a" } = {}
    210  ) {
    211    info(
    212      "Waiting for " +
    213        video.id +
    214        " to time out after " +
    215        time +
    216        "ms against [" +
    217        refColor.data.join(",") +
    218        "] - " +
    219        refColor.name
    220    );
    221    let timeout = new Promise(resolve => setTimeout(resolve, time));
    222    let analysis = async () => {
    223      await this.waitForPixel(
    224        video,
    225        px => this.isPixel(px, refColor, threshold),
    226        {
    227          offsetX: 0,
    228          offsetY: 0,
    229          width: 0,
    230          height: 0,
    231        }
    232      );
    233      throw new Error("Got color " + refColor.name + ". " + infoString);
    234    };
    235    await Promise.race([timeout, analysis()]);
    236    ok(true, video.id + " " + infoString);
    237  },
    238 
    239  /* Create an element of type |type| with id |id| and append it to the body. */
    240  createAndAppendElement(type, id) {
    241    var e = document.createElement(type);
    242    e.id = id;
    243    e.width = this.elemWidth;
    244    e.height = this.elemHeight;
    245    if (type === "video") {
    246      e.autoplay = true;
    247    }
    248    document.body.appendChild(e);
    249    return e;
    250  },
    251 };
    252 
    253 /* Sub class holding 2D-Canvas specific helpers. */
    254 function CaptureStreamTestHelper2D(width, height) {
    255  CaptureStreamTestHelper.call(this, width, height);
    256 }
    257 
    258 CaptureStreamTestHelper2D.prototype = Object.create(
    259  CaptureStreamTestHelper.prototype
    260 );
    261 CaptureStreamTestHelper2D.prototype.constructor = CaptureStreamTestHelper2D;
    262 
    263 /* Clear all drawn content on |canvas|. */
    264 CaptureStreamTestHelper2D.prototype.clear = function (canvas) {
    265  var ctx = canvas.getContext("2d");
    266  ctx.clearRect(0, 0, canvas.width, canvas.height);
    267 };
    268 
    269 /* Draw the color |color| to the source canvas |canvas|. Format [R,G,B,A]. */
    270 CaptureStreamTestHelper2D.prototype.drawColor = function (
    271  canvas,
    272  color,
    273  {
    274    offsetX = 0,
    275    offsetY = 0,
    276    width = canvas.width / 2,
    277    height = canvas.height / 2,
    278  } = {}
    279 ) {
    280  var ctx = canvas.getContext("2d");
    281  var rgba = color.data.slice(); // Copy to not overwrite the original array
    282  rgba[3] = rgba[3] / 255.0; // Convert opacity to double in range [0,1]
    283  info("Drawing color " + rgba.join(","));
    284  ctx.fillStyle = "rgba(" + rgba.join(",") + ")";
    285 
    286  // Only fill top left corner to test that output is not flipped or rotated.
    287  ctx.fillRect(offsetX, offsetY, width, height);
    288 };
    289 
    290 /* Test that the given 2d canvas is NOT origin-clean. */
    291 CaptureStreamTestHelper2D.prototype.testNotClean = function (canvas) {
    292  var ctx = canvas.getContext("2d");
    293  var error = "OK";
    294  try {
    295    var data = ctx.getImageData(0, 0, 1, 1);
    296  } catch (e) {
    297    error = e.name;
    298  }
    299  is(
    300    error,
    301    "SecurityError",
    302    "Canvas '" + canvas.id + "' should not be origin-clean"
    303  );
    304 };
    305 
    306 /* Sub class holding WebGL specific helpers. */
    307 function CaptureStreamTestHelperWebGL(width, height) {
    308  CaptureStreamTestHelper.call(this, width, height);
    309 }
    310 
    311 CaptureStreamTestHelperWebGL.prototype = Object.create(
    312  CaptureStreamTestHelper.prototype
    313 );
    314 CaptureStreamTestHelperWebGL.prototype.constructor =
    315  CaptureStreamTestHelperWebGL;
    316 
    317 /* Set the (uniform) color location for future draw calls. */
    318 CaptureStreamTestHelperWebGL.prototype.setFragmentColorLocation = function (
    319  colorLocation
    320 ) {
    321  this.colorLocation = colorLocation;
    322 };
    323 
    324 /* Clear the given WebGL context with |color|. */
    325 CaptureStreamTestHelperWebGL.prototype.clearColor = function (canvas, color) {
    326  info("WebGL: clearColor(" + color.name + ")");
    327  var gl = canvas.getContext("webgl");
    328  var conv = color.data.map(i => i / 255.0);
    329  gl.clearColor(conv[0], conv[1], conv[2], conv[3]);
    330  gl.clear(gl.COLOR_BUFFER_BIT);
    331 };
    332 
    333 /* Set an already setFragmentColorLocation() to |color| and drawArrays() */
    334 CaptureStreamTestHelperWebGL.prototype.drawColor = function (canvas, color) {
    335  info("WebGL: drawArrays(" + color.name + ")");
    336  var gl = canvas.getContext("webgl");
    337  var conv = color.data.map(i => i / 255.0);
    338  gl.uniform4f(this.colorLocation, conv[0], conv[1], conv[2], conv[3]);
    339  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    340 };