Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Puppeteerでつくる画像と動画 / images and videos made with puppeteer

mottox2
July 17, 2021

Puppeteerでつくる画像と動画 / images and videos made with puppeteer

mottox2

July 17, 2021
Tweet

More Decks by mottox2

Other Decks in Technology

Transcript

  1. Puppeteerͷίʔυྫ Const puppeteer = require(‘puppeteer’) const getScreenshot = async (html)

    => { const browser = await puppeteer.launch() const page = await browser.newPage(); await page.setContent(html); await page.setViewport({ width: 1200, height: 630 }); const file = await page.screenshot(); // await page.screenshot({ path: ‘dest/screenshot.png’ }); return file } const html = generateHTML(props) getScreenshot(html)
  2. Puppeteerͷίʔυྫ const generateHTML = (props) => { return `<html> <head>

    <style>…</style> </head> <body> <!— contents —> </body> </html>` }
  3. ֤ϑϨʔϜͷը૾Λ࡞Δ const puppeteer = require("puppeteer-core" ) const { getHtml }

    = require("./template") ; (async () => { const props = {} ; const browser = await puppeteer.launch( { executablePath : "/Applications/Google Chrome.app/Contents/ MacOS/Google Chrome" , }) ; const page = await browser.newPage() ; for (let i = 1; i <= 60; i++) { const path = `./tmp/frame_${i}.png` ; const html = getHtml({ ...props, frame }) ; await page.setContent(html) ; await page.setViewport({ width: 1200, height: 630 }) ; await page.screenshot( { path , }) ; } await browser.close() ; })();
  4. Remotionͷίʔυྫ import { useCurrentFrame } from "remotion" ; export const

    MyVideo = () => { // ݱࡏͷϑϨʔϜ਺Λऔಘ const frame = useCurrentFrame(); return ( <div style={{ flex: 1, justifyContent: "center", alignItems: "center" }} > The current frame is {frame} . </div > ) ; } ; export const RemotionVideo: React.FC = () => ( < > <Compositio n id="MyVideo " component={MyVideo } durationInFrames={150 } fps={30 } width={1920 } height={1080 } / > </ > )