canvasstream

Streamize canvas with puppeteer.

Usage

You can create stream like below:

import canvasstream from 'canvasstream'
import fs from 'fs'
 
canvasstream({
  width: 1024,
  height: 768,
  source: `async (canvas) => {
    const ctx = canvas.getContext('2d')
    let r = 0
 
    const sleep = msec => new Promise(resolve => setTimeout(resolve, msec))
 
    for(let i=0; i<60*2; i++) {
      ctx.fillStyle = 'white'
      ctx.fillRect(0, 0, canvas.width, canvas.height)
      ctx.save()
      ctx.translate(canvas.width/2, canvas.height/2)
      ctx.rotate(r)
      ctx.beginPath()
      ctx.moveTo(0,0)
      ctx.lineTo(50, 50)
      ctx.lineWidth = 4
      ctx.strokeStyle = 'black'
      ctx.stroke()
      ctx.restore()
      r += 0.03
 
      await sleep(1000/60)
    }
  }`
}).pipe(fs.createWriteStream('./output.webm'))

Author

Yusuke Shibata

License

MIT