lottie-web-perf.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. /**
  2. * Command line application to run Lottie-Web perf on a Lottie file in the
  3. * browser and then exporting that result.
  4. *
  5. */
  6. const puppeteer = require('puppeteer');
  7. const express = require('express');
  8. const fs = require('fs');
  9. const commandLineArgs = require('command-line-args');
  10. const commandLineUsage= require('command-line-usage');
  11. const fetch = require('node-fetch');
  12. const opts = [
  13. {
  14. name: 'input',
  15. typeLabel: '{underline file}',
  16. description: 'The Lottie JSON file to process.'
  17. },
  18. {
  19. name: 'output',
  20. typeLabel: '{underline file}',
  21. description: 'The perf file to write. Defaults to perf.json',
  22. },
  23. {
  24. name: 'use_gpu',
  25. description: 'Whether we should run in non-headless mode with GPU.',
  26. type: Boolean,
  27. },
  28. {
  29. name: 'port',
  30. description: 'The port number to use, defaults to 8081.',
  31. type: Number,
  32. },
  33. {
  34. name: 'lottie_player',
  35. description: 'The path to lottie.min.js, defaults to a local npm install location.',
  36. type: String,
  37. },
  38. {
  39. name: 'backend',
  40. description: 'Which lottie-web backend to use. Options: canvas or svg.',
  41. type: String,
  42. },
  43. {
  44. name: 'help',
  45. alias: 'h',
  46. type: Boolean,
  47. description: 'Print this usage guide.'
  48. },
  49. ];
  50. const usage = [
  51. {
  52. header: 'Lottie-Web Perf',
  53. content: 'Command line application to run Lottie-Web perf.',
  54. },
  55. {
  56. header: 'Options',
  57. optionList: opts,
  58. },
  59. ];
  60. // Parse and validate flags.
  61. const options = commandLineArgs(opts);
  62. if (options.backend != 'canvas' && options.backend != 'svg') {
  63. console.error('You must supply a lottie-web backend (canvas, svg).');
  64. console.log(commandLineUsage(usage));
  65. process.exit(1);
  66. }
  67. if (!options.output) {
  68. options.output = 'perf.json';
  69. }
  70. if (!options.port) {
  71. options.port = 8081;
  72. }
  73. if (!options.lottie_player) {
  74. options.lottie_player = 'node_modules/lottie-web/build/player/lottie.min.js';
  75. }
  76. if (options.help) {
  77. console.log(commandLineUsage(usage));
  78. process.exit(0);
  79. }
  80. if (!options.input) {
  81. console.error('You must supply a Lottie JSON filename.');
  82. console.log(commandLineUsage(usage));
  83. process.exit(1);
  84. }
  85. // Start up a web server to serve the three files we need.
  86. let lottieJS = fs.readFileSync(options.lottie_player, 'utf8');
  87. let lottieJSON = fs.readFileSync(options.input, 'utf8');
  88. let driverHTML;
  89. if (options.backend == 'svg') {
  90. console.log('Using lottie-web-perf.html');
  91. driverHTML = fs.readFileSync('lottie-web-perf.html', 'utf8');
  92. } else {
  93. console.log('Using lottie-web-canvas-perf.html');
  94. driverHTML = fs.readFileSync('lottie-web-canvas-perf.html', 'utf8');
  95. }
  96. // Find number of frames from the lottie JSON.
  97. let lottieJSONContent = JSON.parse(lottieJSON);
  98. const totalFrames = lottieJSONContent.op - lottieJSONContent.ip;
  99. console.log('Total frames: ' + totalFrames);
  100. const app = express();
  101. app.get('/', (req, res) => res.send(driverHTML));
  102. app.get('/res/lottie.js', (req, res) => res.send(lottieJS));
  103. app.get('/res/lottie.json', (req, res) => res.send(lottieJSON));
  104. app.listen(options.port, () => console.log('- Local web server started.'))
  105. // Utility function.
  106. async function wait(ms) {
  107. await new Promise(resolve => setTimeout(() => resolve(), ms));
  108. return ms;
  109. }
  110. const targetURL = "http://localhost:" + options.port + "/#" + totalFrames;
  111. const viewPort = {width: 1000, height: 1000};
  112. // Drive chrome to load the web page from the server we have running.
  113. async function driveBrowser() {
  114. console.log('- Launching chrome for ' + options.input);
  115. let browser;
  116. let page;
  117. const headless = !options.use_gpu;
  118. let browser_args = [
  119. '--no-sandbox',
  120. '--disable-setuid-sandbox',
  121. '--window-size=' + viewPort.width + ',' + viewPort.height,
  122. ];
  123. if (options.use_gpu) {
  124. browser_args.push('--ignore-gpu-blacklist');
  125. browser_args.push('--enable-gpu-rasterization');
  126. }
  127. console.log("Running with headless: " + headless + " args: " + browser_args);
  128. try {
  129. browser = await puppeteer.launch({headless: headless, args: browser_args});
  130. page = await browser.newPage();
  131. await page.setViewport(viewPort);
  132. } catch (e) {
  133. console.log('Could not open the browser.', e);
  134. process.exit(1);
  135. }
  136. console.log("Loading " + targetURL);
  137. try {
  138. // Start trace.
  139. await page.tracing.start({
  140. path: options.output,
  141. screenshots: false,
  142. categories: ["blink", "cc", "gpu"]
  143. });
  144. await page.goto(targetURL, {
  145. timeout: 60000,
  146. waitUntil: 'networkidle0'
  147. });
  148. console.log('- Waiting 60s for run to be done.');
  149. await page.waitForFunction('window._lottieWebDone === true', {
  150. timeout: 60000,
  151. });
  152. // Stop trace.
  153. await page.tracing.stop();
  154. } catch(e) {
  155. console.log('Timed out while loading or drawing. Either the JSON file was ' +
  156. 'too big or hit a bug in the player.', e);
  157. await browser.close();
  158. process.exit(1);
  159. }
  160. await browser.close();
  161. // Need to call exit() because the web server is still running.
  162. process.exit(0);
  163. }
  164. driveBrowser();