rupor-uploader-js-sdk v0.1.8

SDK для загрузки видео

Установка:

npm i rupor-uploader-js-sdk

Важно: чтобы этот SDK работал, необходимо чтобы на сервере был Вот такой API.

Этот SDK позволяет выполнять загрузку видео по кускам (chunks). Размер одного куска настраивается, по умолчанию стоит значение в 1MB.

Работает это так: сначала идет POST запрос с meta информацией о видео, в том числе размер видео, например: POST на your-api.com/v1/ с payload

{
    "metadata": {
        "originalFilename": "4.mp4",
        "lastModified": 1640256801618,
        "fingerprint": "fd8e7ca5165cf69976c58b82fd18ea868223ede2"
    },
    "mimeType": "video/mp4",
    "size": 4291343,
    "uid": "C"
}

. Далее идут PUT запросы с offset, например: your-api.com/v1/some-unique-task-id/1048576, где offset равен 1048576

Он так же поддерживает функцию паузы, и многопоточную загрузку видео. Так же можно загружать несколько видео файлов за раз.

Примеры использования:

React

Создаем хук useUploadManager:

import { UploadTasksManager } from 'to-be-deleted-video-uploader-sdk';
...
...
export const useUploadManager = () => {
    const managerRef = useRef<UploadTasksManager>();

    const handleUploadDone = () => console.log('DONE!');
    const handleUploadProgress = (n:number) => console.log(n);

    useEffect(() => {
        if (managerRef.current) {
            return;
        }

        const manager = new UploadTasksManager(UPLOADER_SERVER_URL, 'SOME_UUID', 4);
        managerRef.current = manager;
        managerRef.current.on('upload-progress', handleUploadProgress);
        managerRef.current.on('all-done', handleUploadDone);

        const ref = managerRef;

        // eslint-disable-next-line consistent-return
        return () => {
            ref.current!.removeAllListeners();
        };
    }, []);

    return {
        managerRef,
    };
};

В компоненте:

import type { FC } from 'react';

import { useUploadManager } from './hooks/useUploadManager';

export const AddVideo: FC = () => {
    const { managerRef } = useUploadManager();

    const handleSelectFiles = async (video: File) => {
        // пользователь выбрал видео
        try {
            const task = await managerRef.current.upload(video);
            //далее делаем все что нужно с task
            ...
            ... 

            await task.pause()
            ...
            await task.resume()
        } catch (error) {
            console.error(error);
        }
    };

    return (
        <CustomFileInput onSelectFiles={handleSelectFiles}/>
    );
};

API

UploadTasksManager

Constructor args:

Methods:

Примеры использования:

const manager = new UploadTasksManager('https://my-uploader.ru/api/v1/', 'ASD', 4);

const task1 = manager.upload(videoFile as File);
manager.on('upload-progress', (n:number) => setProgress(n));

//..cleanup
manager.removeAllListeners();

Task

Methods