# @browserless/screencast 中文文档

规范地址：https://npmcn.com/package/%40browserless/screencast/

版本：14\.0\.22
npm 元数据更新时间：2026-10-13T15:39:25.635Z
中文译文更新时间：2026-11-08T16:37:04.390Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40browserless/screencast
原文对照：https://npmcn.com/package/%40browserless/screencast/?lang=original
项目主页：https://browserless.js.org/#/?id=screencasturl-options
源码仓库：https://github.com/microlinkhq/browserless#master

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：11.6 kB，4 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- Node.js 要求：\>= 24
- 运行依赖：1 个
- 首次发布：2023-06-24T21:32:22.268Z
- 最新版本发布：2026-10-13T15:39:25.431Z
- 近 30 天下载量：3050（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：79（近 12 个月 37 个）

## 中文简介

抓取网站交互架构逐帧创建视频和GIF. 适合演示、辅导和自动测试.

## 安装

```sh
npm install @browserless/screencast
```

也可以使用：`pnpm add @browserless/screencast`、`yarn add @browserless/screencast`、`bun add @browserless/screencast`

## README

![browserless](https://github.com/microlinkhq/browserless/raw/master/static/logo-banner.png#gh-light-mode-only) ![browserless](https://github.com/microlinkhq/browserless/raw/master/static/logo-banner-light.png#gh-dark-mode-only)  
  
[![Powered by microlink.io](https://img.shields.io/badge/powered_by-microlink.io-blue?style=flat-square&color=%23EA407B)](https://microlink.io/) ![Last version](https://img.shields.io/github/tag/microlinkhq/browserless.svg?style=flat-square) [![Coverage Status](https://img.shields.io/coveralls/microlinkhq/browserless.svg?style=flat-square)](https://coveralls.io/github/microlinkhq/browserless) [![NPM Status](https://img.shields.io/npm/dm/browserless.svg?style=flat-square)](https://www.npmjs.org/package/browserless)  
  

> @browserless/screencast:使用木偶机进行无浏览器录像.

见 [屏幕播放器区域](https://browserless.js.org/#/?id=screencast) 我们的网站有更多信息.

## 安装

使用 npm :

```sh
npm install @browserless/screencast --save
```

## 关于

此软件包提供 **逐帧视频捕获** 使用 Chrome DevTools 协议从浏览器页面导航。 它允许您在页面交互中捕捉单个帧,用于创建GIFs,视频,或逐帧分析.

### 这个软件包做什么

这个 `@browserless/screencast` 软件包允许您 :

-   **抓取帧** 浏览器导航和互动过程中
-   **控制记录** 开始/停止方法
-   **进程框架** 通过召回函数单独
-   **配置质量和格式** 用于捕获框架
-   **创建动画** 类似捕获框中的GIFs

### 使用量

```js
const createScreencast = require('@browserless/screencast')
const createBrowser = require('browserless')

const browser = createBrowser()
const browserless = await browser.createContext()
const page = await browserless.page()

// Create screencast instance
const screencast = createScreencast(page, { 
  maxWidth: 1280, 
  maxHeight: 800 
})

// Collect frames
const frames = []
screencast.onFrame((data, metadata) => {
  frames.push({ data, metadata })
})

// Record during navigation
screencast.start()
await browserless.goto(page, { url: 'https://example.com' })
await screencast.stop()

console.log(`Captured ${frames.length} frames`)
```

### API 密码

#### `createScreencast(page, options)`

为给定的 Puppeteer 页面创建屏幕播放器实例 .

**回返** 对象为:

| 方法 | 说明 |
| --- | --- |
| `start()` | 开始抓取框架 |
| `stop()` | 停止抓取帧 |
| `onFrame(callback)` | 注册帧处理器 |

### 选项

选项传递给 [页面. startScreencast](https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-startScreencast) 应用这些包默认后:

| 选项 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `format` | `string` | `'jpeg'` | 图像格式 : `'jpeg'` 或者说 `'png'` |
| `quality` | `number` | `80` | JPEG 质量 (0- 100), PNG 忽略 |
| `maxWidth` | `number` | —— 说 | 捕获框架的最大宽度 |
| `maxHeight` | `number` | —— 说 | 捕获框的最大高度 |
| `everyNthFrame` | `number` | `1` | 抓取每个 N 帧 |

### 框架召回

这个 `onFrame` callback 收到了两个参数:

```js
screencast.onFrame((data, metadata) => {
  // data: base64-encoded image string
  // metadata: { timestamp, ... }
})
```

如果回调返回承诺, 下一个 CDP 框架在此之后被确认 答应和解。 将帧写入到缓慢状态时使用此来应用后压 流或编码器.

| 参数 | 类型 | 说明 |
| --- | --- | --- |
| `data` | `string` | Base64-编码框架图像 |
| `metadata` | `object` | 框架元数据包括 `timestamp` |

### 实例

#### 从导航创建 GIF

```js
const { GifEncoder } = require('@skyra/gifenc')
const { createCanvas, Image } = require('canvas')
const sharp = require('sharp')

const width = 640
const height = 400

const canvas = createCanvas(width, height)
const ctx = canvas.getContext('2d')
const encoder = new GifEncoder(width, height)

const screencast = createScreencast(page, { 
  maxWidth: width, 
  maxHeight: height 
})

screencast.onFrame(async data => {
  const frame = Buffer.from(data, 'base64')
  const buffer = await sharp(frame).resize({ width, height }).toBuffer()
  
  const img = new Image()
  img.src = buffer
  ctx.drawImage(img, 0, 0)
  encoder.addFrame(ctx)
})

encoder.start()
screencast.start()

await browserless.goto(page, { url: 'https://example.com' })

encoder.finish()
await screencast.stop()
```

#### 抓取特定框架

```js
const screencast = createScreencast(page, {
  format: 'png',
  quality: 100,
  everyNthFrame: 5  // Capture every 5th frame
})

screencast.onFrame((data, metadata) => {
  console.log(`Frame at ${metadata.timestamp}`)
  // Save or process the frame
})
```

#### 将帧保存到磁盘

```js
const fs = require('fs/promises')

let frameCount = 0

screencast.onFrame(async data => {
  const buffer = Buffer.from(data, 'base64')
  await fs.writeFile(`frame-${frameCount++}.jpg`, buffer)
})

screencast.start()
await page.goto('https://example.com')
await screencast.stop()
```

### 如何适合在单体

这个 **扩展功能包** 视频/动画拍摄:

| 消费者 | 目的 |
| --- | --- |
| 用户应用程序 | 创建 GIF 、 录像、 视觉测试 |

### 依赖关系

| 软件包 | 目的 |
| --- | --- |
| `null-prototype-object` | 没有原型链的清洁物体 |

## 许可证

**@ 浏览器没有显示屏** © [微链接](https://microlink.io/),在 [麻省理工学院](https://github.com/microlinkhq/browserless/blob/master/LICENSE.md) 执照.  
作者和维护者 [微链接](https://microlink.io/) 由来自 [捐助者](https://github.com/microlinkhq/browserless/contributors)。 。 。 .

这个 [标志](https://thenounproject.com/term/browser/288309/) 设计由 [辛赫工作室](https://xinh.studio/)。 。 。 .

> [微链接.io](https://microlink.io/) • GitHub 软件 [微链克](https://github.com/microlinkhq) • X [@microlinkhq (英语)](https://x.com/microlinkhq)

## 常见问题

### @browserless/screencast 是什么？

抓取网站交互架构逐帧创建视频和GIF\. 适合演示、辅导和自动测试\.

### 如何安装 @browserless/screencast？

在项目目录运行 npm install @browserless/screencast，或使用 pnpm add / yarn add / bun add。

### @browserless/screencast 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/browserless\_\_screencast 是否存在。

### @browserless/screencast 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @browserless/screencast 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>= 24。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @browserless/screencast 可以商用吗？

@browserless/screencast 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @browserless/screencast 的下载量有多少？

根据 npm 官方下载统计，@browserless/screencast 在 2026/10/09 – 2026/11/07 这 30 天内被下载 3,050 次，日均约 102 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @browserless/screencast 还在维护吗？

最新版本 14\.0\.22 发布于 2026/10/13（26 天前）；至今共发布 79 个版本，其中过去 12 个月发布了 37 个；首次发布于 2023/06/25。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。