@browserless/screencast

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

见 屏幕播放器区域 我们的网站有更多信息.

安装

使用 npm :

npm install @browserless/screencast --save

关于

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

这个软件包做什么

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

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

使用量

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 页面创建屏幕播放器实例 .

回返 对象为:

选项

选项传递给 页面. startScreencast 应用这些包默认后:

框架召回

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

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

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

实例

从导航创建 GIF

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()

抓取特定框架

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
})

将帧保存到磁盘

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()

如何适合在单体

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

依赖关系

许可证

@ 浏览器没有显示屏 © 微链接,在 麻省理工学院 执照.
作者和维护者 微链接 由来自 捐助者。 。 。 .

这个 标志 设计由 辛赫工作室。 。 。 .

微链接.io • GitHub 软件 微链克 • X @microlinkhq (英语)