This NPM package provides a client library for the images-to-video-converter service that converts a series of images into a MP4 video.
Please note the images-to-video-converter service is only accessible to applications hosted on the living atlas server.
You can install this package via npm. Use the following command:
npm i @vannizhang/images-to-video-converter-clientCreates a new job that encodes a MP4 video asynchronously from the provided images data.
Parameters:
| Parameter | Type | Description |
|---|---|---|
| data | AnimationFrameData[] |
Array of animation frame data to be used to create video file, (e.g., [{image: new Image(), imageInfo: "2024-01-05"}]) |
| animationSpeed | number |
animation speed in millisecond |
| outputWidth | number |
width of the output video file |
| outputHeight | number |
height of the output video file |
| authoringApp | string |
title of the authoring application. This is be added to the header of each animation frame |
| abortController | AbortController |
abort controller to cancel the pending job |
Returns:
| Type | Description |
|---|---|
Promise<{ filename:string, fileContent:Blob }> |
When resolved, returns an object that contains the name and content of the encoded MP4 video. |
Example:
import {
convertImages2Video
} from '@vannizhang/images-to-video-converter-client';
const {
// name of the output .MP4 video
filename,
// Blob object represents the content of the output .MP4 video
fileContent
} = await convertImages2Video({
data: [
{
image: document.getElementById('frame1'), // should use a real HTMLImageElement that represent this animation frame
imageInfo: `First Animation Frame`
},
{
image: document.getElementById('frame2'), // should use a real HTMLImageElement that represent this animation frame
imageInfo: `Second Animation Frame`
},
//...
],
animationSpeed: 1000,
outputWidth: 400,
outputHeight: 600,
authoringApp: 'Name of the app',
abortController: new AbortController(),
});Here is a example of using UMD build of the package via unpkg:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://www.unpkg.com/@vannizhang/images-to-video-converter-client@latest/dist/index.js"></script>
<script>
const images2VideoClient = window['@vannizhang/images-to-video-converter-client'];
images2VideoClient.convertImages2Video({
// params...
}).then(response=>{
// use the blob from response
});
</script>
</head>
<body>
</body>
</html>