dom-vcr
v1.0.1TypeScript
Generates an video or GIF from a DOM node using HTML5 canvas and SVG
0/weekUpdated 2 years agoMITUnpacked: 111.7 KB
Published by wxm
npm install dom-vcrDOM VCR
Generates an video or GIF from a DOM node using HTML5 canvas and SVG
English | 简体中文
📦 Install
``shell
npm i dom-vcr
optional deps
npm i modern-gif # by export GIF
npm i modern-mp4 # by export MP4
npm i mp4box
`
CDN
html
`
🦄 Usage
ts
import { createVcr } from 'dom-vcr'const dom = document.querySelector('#app')
const vcr = createVcr(dom, {
type: 'webm',
interval: 1000,
})
async function generate() {
dom.style.backgroundColor = 'red'
await vcr.addFrame()
dom.style.backgroundColor = 'yellow'
await vcr.addFrame()
dom.style.backgroundColor = 'green'
await vcr.addFrame()
const blob = await vcr.render()
window.open(URL.createObjectURL(blob))
}
generate()
`
MP4
> Need install
、modern-mp4ts
import { createVcr } from 'dom-vcr'const dom = document.querySelector('#app')
const vcr = createVcr(dom, {
type: 'mp4',
interval: 1000,
})
async function generate() {
dom.style.backgroundColor = 'red'
await vcr.addFrame()
dom.style.backgroundColor = 'yellow'
await vcr.addFrame()
dom.style.backgroundColor = 'green'
await vcr.addFrame()
const blob = await vcr.render()
window.open(URL.createObjectURL(blob))
}
generate()
`
GIF
> Need install
ts
import { createVcr } from 'dom-vcr'const dom = document.querySelector('#app')
const vcr = createVcr(dom, {
type: 'gif',
interval: 1000,
})
async function generate() {
dom.style.backgroundColor = 'red'
await vcr.addFrame()
dom.style.backgroundColor = 'yellow'
await vcr.addFrame()
dom.style.backgroundColor = 'green'
await vcr.addFrame()
const blob = await vcr.render()
window.open(URL.createObjectURL(blob))
}
generate()
``