feat: implement screencasting

[jrandolf]

Summary

Screencasting is a new, experimental feature that allows users to record their flows as that run!

This requires ffmpeg to be installed where you run Puppeteer.

Example

import puppeteer from 'puppeteer';

// Launch a browser
const browser = await puppeteer.launch();

// Create a new page
const page = await browser.newPage();

// Go to your site.
await page.goto("https://www.example.com");

// Start recording.
const recorder = await page.screencast({path: 'recording.webm'});

// Do something.

// Stop recording.
await recorder.stop();

browser.close();

You can also stream the recorder to somewhere else!

import fs from 'fs';
import puppeteer from 'puppeteer';

// Launch a browser
const browser = await puppeteer.launch();

// Create a new page
const page = await browser.newPage();

// Go to your site.
await page.goto("https://www.example.com");

// Start recording.
const recorder = await page.screencast();

// Piping into /dev/null for illustrative purposes.
recorder.pipe(fs.createWriteStream('/dev/null'));

// Do something.

// Stop recording.
await recorder.stop();

browser.close();

Options

For now, we have three options:

• crop - Specifies the region of the viewport to crop.
• scale - Scales the output video. For example, 0.5 will shrink the width and height of the output video by half. 2 will double the width and height of the output video.
• path - Specifies a .webm file path to save the recording to.
• speed - Specifies the speed to record at. For example, 0.5 will slowdown the video by 50%. 2 will double the speed of the output video.

Fixed: #478

[OrKoN]

@jrandolf could you please rebase?

[OrKoN]

LGTM

[campersau]

I guess the scond one should be crop.y ?