feat: implement screencasting

puppeteer · Oct 6, 2023 · d0d3b9f · d0d3b9f
1 parent 28c1c26
commit d0d3b9f
Show file tree

Hide file tree

Showing 9 changed files with 563 additions and 17 deletions.
diff --git a/docs/api/index.md b/docs/api/index.md
@@ -122,8 +122,10 @@ sidebar_label: API
 | [Point](./puppeteer.point.md)                                               |                                                                                                                                                                                     |
 | [PuppeteerErrors](./puppeteer.puppeteererrors.md)                           |                                                                                                                                                                                     |
 | [PuppeteerLaunchOptions](./puppeteer.puppeteerlaunchoptions.md)             |                                                                                                                                                                                     |
+| [Rectangle](./puppeteer.rectangle.md)                                       |                                                                                                                                                                                     |
 | [RemoteAddress](./puppeteer.remoteaddress.md)                               |                                                                                                                                                                                     |
 | [ResponseForRequest](./puppeteer.responseforrequest.md)                     | Required response data to fulfill a request with.                                                                                                                                   |
+| [ScreencastOptions](./puppeteer.screencastoptions.md)                       |                                                                                                                                                                                     |
 | [ScreenshotClip](./puppeteer.screenshotclip.md)                             |                                                                                                                                                                                     |
 | [ScreenshotOptions](./puppeteer.screenshotoptions.md)                       |                                                                                                                                                                                     |
 | [SerializedAXNode](./puppeteer.serializedaxnode.md)                         | Represents a Node and the properties of it that are relevant to Accessibility.                                                                                                      |

diff --git a/docs/api/puppeteer.page.md b/docs/api/puppeteer.page.md
@@ -127,6 +127,7 @@ page.off('request', logRequest);
 | [reload(options)](./puppeteer.page.reload.md)                                                              |           | Reloads the page.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | [removeExposedFunction(name)](./puppeteer.page.removeexposedfunction.md)                                   |           | The method removes a previously added function via $[Page.exposeFunction()](./puppeteer.page.exposefunction.md) called <code>name</code> from the page's <code>window</code> object.                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | [removeScriptToEvaluateOnNewDocument(identifier)](./puppeteer.page.removescripttoevaluateonnewdocument.md) |           | Removes script that injected into page by Page.evaluateOnNewDocument.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| [screencast(options)](./puppeteer.page.screencast.md)                                                      |           | Captures a screencast of this [page](./puppeteer.page.md).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
 | [screenshot(options)](./puppeteer.page.screenshot.md)                                                      |           | Captures a screenshot of this [page](./puppeteer.page.md).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
 | [screenshot(options)](./puppeteer.page.screenshot_1.md)                                                    |           |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 | [select(selector, values)](./puppeteer.page.select.md)                                                     |           | Triggers a <code>change</code> and <code>input</code> event once all the provided options have been selected. If there's no <code>&lt;select&gt;</code> element matching <code>selector</code>, the method throws an error.                                                                                                                                                                                                                                                                                                                                                                             |

diff --git a/docs/api/puppeteer.page.screencast.md b/docs/api/puppeteer.page.screencast.md
@@ -0,0 +1,58 @@
+---
+sidebar_label: Page.screencast
+---
+
+# Page.screencast() method
+
+Captures a screencast of this [page](./puppeteer.page.md).
+
+#### Signature:
+
+```typescript
+class Page {
+  screencast(options?: Readonly<ScreencastOptions>): Promise<ScreenRecorder>;
+}
+```
+
+## Parameters
+
+| Parameter | Type                                                                  | Description                                  |
+| --------- | --------------------------------------------------------------------- | -------------------------------------------- |
+| options   | Readonly&lt;[ScreencastOptions](./puppeteer.screencastoptions.md)&gt; | _(Optional)_ Configures screencast behavior. |
+
+**Returns:**
+
+Promise&lt;ScreenRecorder&gt;
+
+## Remarks
+
+All recordings will be \[WebM\](https://www.webmproject.org/) format using the \[VP9\](https://www.webmproject.org/vp9/) video codec. The FPS is 30.
+
+You must have \[ffmpeg\](https://ffmpeg.org/) installed on your system.
+
+## Example
+
+Recording a [page](./puppeteer.page.md):
+
+```
+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();
+```
diff --git a/docs/api/puppeteer.rectangle.md b/docs/api/puppeteer.rectangle.md
@@ -0,0 +1,20 @@
+---
+sidebar_label: Rectangle
+---
+
+# Rectangle interface
+
+#### Signature:
+
+```typescript
+export interface Rectangle extends Point
+```
+
+**Extends:** [Point](./puppeteer.point.md)
+
+## Properties
+
+| Property | Modifiers | Type   | Description | Default |
+| -------- | --------- | ------ | ----------- | ------- |
+| height   |           | number |             |         |
+| width    |           | number |             |         |
diff --git a/docs/api/puppeteer.screencastoptions.md b/docs/api/puppeteer.screencastoptions.md
@@ -0,0 +1,21 @@
+---
+sidebar_label: ScreencastOptions
+---
+
+# ScreencastOptions interface
+
+#### Signature:
+
+```typescript
+export interface ScreencastOptions
+```
+
+## Properties
+
+| Property   | Modifiers             | Type                                  | Description                                                                                                                                                                                            | Default        |
+| ---------- | --------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
+| crop       | <code>optional</code> | [Rectangle](./puppeteer.rectangle.md) | Specifies the region of the viewport to crop.                                                                                                                                                          |                |
+| ffmpegPath | <code>optional</code> | string                                | <p>Path to the \[ffmpeg\](https://ffmpeg.org/).</p><p>Required if <code>ffmpeg</code> is not in your PATH.</p>                                                                                         |                |
+| path       | <code>optional</code> | \`${string}.webm\`                    | File path to save the screencast to.                                                                                                                                                                   |                |
+| scale      | <code>optional</code> | number                                | <p>Scales the output video.</p><p>For example, <code>0.5</code> will shrink the width and height of the output video by half. <code>2</code> will double the width and height of the output video.</p> | <code>1</code> |
+| speed      | <code>optional</code> | number                                | <p>Specifies the speed to record at.</p><p>For example, <code>0.5</code> will slowdown the output video by 50%. <code>2</code> will double the speed of the output video.</p>                          | <code>1</code> |
diff --git a/docs/api/puppeteer.screenshotclip.md b/docs/api/puppeteer.screenshotclip.md
@@ -7,15 +7,13 @@ sidebar_label: ScreenshotClip
 #### Signature:
 
 ```typescript
-export interface ScreenshotClip
+export interface ScreenshotClip extends Rectangle
 ```
 
+**Extends:** [Rectangle](./puppeteer.rectangle.md)
+
 ## Properties
 
 | Property | Modifiers             | Type   | Description | Default        |
 | -------- | --------------------- | ------ | ----------- | -------------- |
-| height   |                       | number |             |                |
 | scale    | <code>optional</code> | number |             | <code>1</code> |
-| width    |                       | number |             |                |
-| x        |                       | number |             |                |
-| y        |                       | number |             |                |