A modern typescript version of whammy. You can use it to encode images(webp) to webm video.
npm install ts-whammy---
A modern typescript version of whammy. You can use it to encode images(webp) to webm video.
ts-whammy only includes the core video encoding functions of whammy, you can use it whatever modern frontend stack you prefer.
``shell`
npm install ts-whammy -S
`js
// for js
import tsWhammy from 'ts-whammy'
// for ts
// import tsWhammy from 'ts-whammy/src/libs'
// image URLs can from: canvas.toDataURL(type, encoderOptions)
const images = ['data:image/webp;base64,UklGRkZg....',
'data:image/webp;base64,UklGRkZg....']
// create a video at 1 FPS
const blob = tsWhammy.fromImageArray(images, 1)
// create a 5 second video
const blob = tsWhammy.fromImageArrayWithOptions(images, { duration: 5 })
console.log(blob.type, blob.size)
`
- Upload images to video
- Convert Canvas-recorded images into a video
- node
- browsers (must support webp): https://caniuse.com/#feat=webp
`shelltest data
images info length(5),
total base64 size(157.37890625 kb),
total blob size(118.029296875 kb)
Docs
$3
ts
fromImageArray(images: string[], fps: number, outputAsArray?: boolean): Blob | Uint8Array
`-
: An array of image base64 strings, image type must be 'image/webp', see more: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL. images must have same width and height, must not have Alpha Channel
- fps: frames per second number, FPS number can't be 0. (if you set FPS to equal 0, FPS will be reset to default of 1).
- outputAsArray: return Uint8Array output, the default output is Blob. In node environments, the output always be Uint8Array.`ts
fromImageArrayWithOptions(images: string[], options: IFromImageArrayOptions = {}): Blob | Uint8Array
`-
: Same as fromImageArray's imagesoptions:fps: Same as fromImageArray's fpsduration set output video's duration in seconds. This will adjust the video's FPS to make sure the video has the exact duration.outputAsArray: Same as fromImageArray's outputAsArray``ts`
async fixImageDataList(images: string[], options?: ImageSrcToWebpDataUrlOptions): Promise
This function can make common image(jpg,png,webp...) url or base64 to be an valid webp image. Then can send it to make an video.
See this demo: Convert Canvas-recorded images into a video
- images: An array of image url or base64.options
-
- : image width for all, use it to fix image widthheight
- : image height for all, use it to fix image heightbackgroundColor`: image background color, use it to fix image alpha channel
-
Feel free to contribute this project.
- update the demo, support [✅ ]record canvas/[TODO]HTML, ✅ upload images to video...
- [✅]upgrade docs to astro
- [✅]support build out the esm lib
- update tests case, up test codecov