Function collectVisualArtifactSample

scripts/e2e-webrtc-reliability.mjs:1042–1137

(cdp, udid)

}

async function collectVisualArtifactSample(cdp, udid) {
  const referenceDataUrl = await fetchReferenceScreenshotDataUrl(udid);
  const screenshotPath = `${apiRootPath}/api/simulators/${encodeURIComponent(
    udid,
  )}/screenshot.png`;
  return evaluate(
    cdp,
    `
    (async () => {
      const video = document.querySelector("video.stream-video");
      if (!video || video.readyState < 2 || !video.videoWidth || !video.videoHeight) {
        throw new Error("live video is not ready for visual comparison");
      }

      const source = await loadReferenceScreenshot();
      const width = Math.min(240, video.videoWidth, source.width);
      const height = Math.max(1, Math.round(width * (video.videoHeight / video.videoWidth)));
      const canvas = document.createElement("canvas");
      canvas.width = width;
      canvas.height = height;
      const videoCanvas = document.createElement("canvas");
      videoCanvas.width = width;
      videoCanvas.height = height;
      const sourceContext = canvas.getContext("2d", { willReadFrequently: true });
      const videoContext = videoCanvas.getContext("2d", { willReadFrequently: true });
      sourceContext.imageSmoothingEnabled = true;
      videoContext.imageSmoothingEnabled = true;
      sourceContext.drawImage(source, 0, 0, width, height);
      videoContext.drawImage(video, 0, 0, width, height);

      const sourceData = sourceContext.getImageData(0, 0, width, height).data;
      const videoData = videoContext.getImageData(0, 0, width, height).data;
      const tileSize = 16;
      const tileColumns = Math.ceil(width / tileSize);
      const tileRows = Math.ceil(height / tileSize);
      const tileSums = new Float64Array(tileColumns * tileRows);
      const tileCounts = new Uint32Array(tileColumns * tileRows);
      let badPixels = 0;
      let sum = 0;
      let maxPixelDiff = 0;
      for (let y = 0; y < height; y += 1) {
        for (let x = 0; x < width; x += 1) {
          const offset = (y * width + x) * 4;
          const diff = (
            Math.abs(sourceData[offset] - videoData[offset]) +
            Math.abs(sourceData[offset + 1] - videoData[offset + 1]) +
            Math.abs(sourceData[offset + 2] - videoData[offset + 2])
          ) / 3;
          sum += diff;
          maxPixelDiff = Math.max(maxPixelDiff, diff);
          if (diff > 48) {
            badPixels += 1;
          }
          const tileIndex = Math.floor(y / tileSize) * tileColumns + Math.floor(x / tileSize);
          tileSums[tileIndex] += diff;
          tileCounts[tileIndex] += 1;
        }
      }