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