@vannizhang/images-to-video-converter-client NPM

images-to-video-converter-client

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.

Installation

You can install this package via npm. Use the following command:

npm i @vannizhang/images-to-video-converter-client

API Documentation

`convertImages2Video`

Creates 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>