? ??????? puppeteer? ???? ?? ????? ????/??? ??? ????. Bun? Nitro? ?? ?? API ??? ??? ??? ?????.

?? ??:

• ???? ??? ??
• ?(??? ??? ?? ??? ??? ?? ??? ????? ??? ??? ?? ??)

?? ????? ????

Puppeteer? ?? ????? ????? ?? ?? ?? ? ??? ??? ?? ?????? ?? ??? ???? ?? ??? ? ?? ??? ?? ???? API? ??????. ??? ?? ????? ???? ????? ???? ???? API? ???? ????? ??? ?? ?? ??? ??? ???? ?????.

shadcn ui? ?? ???? ?????? ??? ??? ????.

import puppeteer from 'puppeteer'

const url = 'https://ui.shadcn.com'

const browser = await puppeteer.launch()

const page = await browser.newPage()

await page.goto(url, {
    waitUntil: 'networkidle2',
})

const data = await page.screenshot({ fullPage: true })

await browser.close()

??

???? ???? ?? ??

Puppeteer?? ??? ???? ???? ????. https://pptr.dev/api/puppeteer.page.screencast? ?????. ??? webm ??? 30fps? ?????. ??? ??? ? ??? ??? ?? puppeteer-screen-record ???? ??? ????.

???? ???? ???? ?? ??? ??? ?? ?? ???? ??????????.

?? ??? shadcn ui? ?? ??? ???? ???? ?? video.mp4? ?????.

import puppeteer from 'puppeteer'
import { PuppeteerScreenRecorder } from 'puppeteer-screen-recorder'

const browser = await puppeteer.launch()

const page = await browser.newPage()

await page.goto(url, {
    waitUntil: 'networkidle2',
})

const recorderOptions = {
    fps: 60,
}

const recorder = new PuppeteerScreenRecorder(page, recorderOptions)

await recorder.start('video.mp4')

const height = await page.evaluate(() => {
    return document.body.scrollHeight
})

// simulating touch scroll
const session = await page.createCDPSession()

await session.send('Input.synthesizeScrollGesture', {
    x: 0,
    y: 0,
    yDistance: -height,
    speed: 400,
})

await recorder.stop()

await browser.close()

?? ?? ??

import puppeteer from 'puppeteer'

const url = 'https://ui.shadcn.com'

const browser = await puppeteer.launch()

const page = await browser.newPage()

// dark mode
await page.emulateMediaFeatures([
    {
        name: 'prefers-color-scheme',
        value: 'dark',
    },
])

await page.goto(url, {
    waitUntil: 'networkidle2',
})

const data = await page.screenshot({ fullPage: true })

await browser.close()

??

?? ????. ? github?? ? ?? ????? ??? ???. ?? ???? ???? ???? ? ??? ?? ??? ???? ? ??? ???? ?? ?????.

? ??? ?? ????? png? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!