Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@api.video/video-uploader

Package Overview
Dependencies
Maintainers
3
Versions
25
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@api.video/video-uploader

api.video video uploader

  • 1.1.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
640
decreased by-50.81%
Maintainers
3
Weekly downloads
 
Created
Source

badge   badge   badge

api.video typescript video uploader

npm ts

api.video is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app.

Table of contents

Project description

Typescript library to upload videos to api.video using delegated upload token (or usual access token) from the front-end.

It allows you to upload videos in two ways:

  • standard upload: to send a whole video file in one go
  • progressive upload: to send a video file by chunks, without needing to know the final size of the video file

Getting started

Installation

Installation method #1: requirejs

If you use requirejs you can add the library as a dependency to your project with

$ npm install --save @api.video/video-uploader

You can then use the library in your script:

// standard upload:
var { VideoUploader } = require('@api.video/video-uploader');

var uploader = new VideoUploader({
    // ... (see bellow)
}); 

// progressive upload:
var { ProgressiveUploader } = require('@api.video/video-uploader');

var uploader = new ProgressiveUploader({
    // ... (see bellow)
}); 

Installation method #2: typescript

If you use Typescript you can add the library as a dependency to your project with

$ npm install --save @api.video/video-uploader

You can then use the library in your script:

// standard upload:
import { VideoUploader } from '@api.video/video-uploader'

const uploader = new VideoUploader({
    // ... (see bellow)
});

// progressive upload:
import { ProgressiveUploader } from '@api.video/video-uploader'

const uploader = new ProgressiveUploader({
    // ... (see bellow)
});

Simple include in a javascript project

Include the library in your HTML file like so:

<head>
    ...
    <script src="https://unpkg.com/@api.video/video-uploader" defer></script>
</head>

Then, once the window.onload event has been trigered, create your player using new VideoUploader():

...
<form>
    <input type="file" id="input" onchange="uploadFile(this.files)">
</form>
<script type="text/javascript">
    function uploadFile(files) {
        new VideoUploader({
            file: files[0],
            uploadToken: "YOUR_DELEGATED_TOKEN"
        }).upload();
    }
</script>

Documentation - Standard upload

Instanciation

Options

The upload library is instanciated using an options object. Options to provide depend on the way you want to authenticate to the API: either using a delegated upload token (recommanded), or using a usual access token.

Using delegated upload tokens for authentication is best options when uploading from the client side. To know more about delegated upload token, read the dedicated article on api.video's blog: Delegated Uploads.

Option nameMandatoryTypeDescription
uploadTokenyesstringyour upload token
videoIdnostringid of an existing video
common options (see bellow)
Using an access token (discouraged):

Warning: be aware that exposing your access token client-side can lead to huge security issues. Use this method only if you know what you're doing :).

Option nameMandatoryTypeDescription
accessTokenyesstringyour access token
refreshTokennostringyour refresh token (please not that if you don't provide a refresh token, your upload may fails due to the access token lifetime of 60 minutes)
videoIdyesstringid of an existing video
common options (see bellow)
Using an API key (strongly discouraged):

Warning: be aware that exposing your API key client-side can lead to huge security issues. Use this method only if you know what you're doing :).

Option nameMandatoryTypeDescription
API Keyyesstringyour api.video API key
videoIdyesstringid of an existing video
common options (see bellow)
Common options
Option nameMandatoryTypeDescription
fileyesFilethe file you want to upload
videoNamenostringthe name of your video (overrides the original file name for regular uploads, overrides the default "file" name for progressive uploads)
chunkSizenonumbernumber of bytes of each upload chunk (default: 50MB, min: 5MB, max: 128MB)
apiHostnostringapi.video host (default: ws.api.video)
retriesnonumbernumber of retries when an API call fails (default: 5)
retryStrategyno(retryCount: number, error: VideoUploadError) => number | nullfunction that returns the number of ms to wait before retrying a failed upload. Returns null to stop retrying

Example

    const uploader = new VideoUploader({
        file: files[0],
        uploadToken: "YOUR_DELEGATED_TOKEN",
        chunkSize: 1024*1024*10, // 10MB
        retries: 10,
    });

Methods

upload()

The upload() method starts the upload. It takes no parameter. It returns a Promise that resolves once the file is uploaded. If an API call fails more than the specified number of retries, then the promise is rejected. On success, the promise embeds the video object returned by the API. On fail, the promise embeds the status code & error message returned by the API.

Example

    // ... uploader instanciation

    uploader.upload()
        .then((video) => console.log(video))
        .catch((error) => console.log(error.status, error.message));

onProgress()

The onProgress() method let you defined an upload progress listener. It takes a callback function with one parameter: the onProgress events. An onProgress event contains the following attributes:

  • uploadedBytes (number): total number of bytes uploaded for this upload
  • totalBytes (number): total size of the file
  • chunksCount (number): number of upload chunks
  • chunksBytes (number): size of a chunk
  • currentChunk (number): index of the chunk being uploaded
  • currentChunkUploadedBytes (number): number of bytes uploaded for the current chunk

Example

    // ... uploader instanciation
    
    uploader.onProgress((event) => {
        console.log(`total number of bytes uploaded for this upload: ${event.uploadedBytes}.`);
        console.log(`total size of the file: ${event.totalBytes}.`);
        console.log(`number of upload chunks: ${event.chunksCount} .`);
        console.log(`size of a chunk: ${event.chunksBytes}.`);
        console.log(`index of the chunk being uploaded: ${event.currentChunk}.`);
        console.log(`number of bytes uploaded for the current chunk: ${event.currentChunkUploadedBytes}.`);
    });

Documentation - Progressive upload

Instanciation

Options

The progressive upload object is instanciated using an options object. Options to provide depend on the way you want to authenticate to the API: either using a delegated upload token (recommanded), or using a usual access token.

Using delegated upload tokens for authentication is best options when uploading from the client side. To know more about delegated upload token, read the dedicated article on api.video's blog: Delegated Uploads.

Option nameMandatoryTypeDescription
uploadTokenyesstringyour upload token
videoIdnostringid of an existing video
common options (see bellow)
Using an access token (discouraged):

Warning: be aware that exposing your access token client-side can lead to huge security issues. Use this method only if you know what you're doing :).

Option nameMandatoryTypeDescription
accessTokenyesstringyour access token
videoIdyesstringid of an existing video
common options (see bellow)
Common options
Option nameMandatoryTypeDescription
apiHostnostringapi.video host (default: ws.api.video)
retriesnonumbernumber of retries when an API call fails (default: 5)
retryStrategyno(retryCount: number, error: VideoUploadError) => number | nullfunction that returns the number of ms to wait before retrying a failed upload. Returns null to stop retrying
preventEmptyPartsnobooleanif true, the upload will succeed even if an empty Blob is passed to uploadLastPart(). This may alter performances a bit in some cases (default: false)

Example

    const uploader = new ProgressiveUploader({
        uploadToken: "YOUR_DELEGATED_TOKEN",
        retries: 10,
    });

Methods

uploadPart(file: Blob)

The upload() method starts the upload. It takes no parameter. It returns a Promise that resolves once the file is uploaded. If an API call fails more than the specified number of retries, then the promise is rejected. On success, the promise embeds the video object returned by the API. On fail, the promise embeds the status code & error message returned by the API.

Example

    // ... uploader instanciation

    uploader.uploadPart(blob)
        .catch((error) => console.log(error.status, error.message));

uploadLastPart(file: Blob)

The upload() method starts the upload. It takes no parameter. It returns a Promise that resolves once the file is uploaded. If an API call fails more than the specified number of retries, then the promise is rejected. On success, the promise embeds the video object returned by the API. On fail, the promise embeds the status code & error message returned by the API.

Example

    // ... uploader instanciation

    uploader.uploadLastPart(blob)
        .then((video) => console.log(video))
        .catch((error) => console.log(error.status, error.message));

onProgress()

The onProgress() method let you defined an upload progress listener. It takes a callback function with one parameter: the onProgress events. An onProgress event contains the following attributes:

  • uploadedBytes (number): total number of bytes uploaded for this upload
  • totalBytes (number): total size of the file

Example

    // ... uploader instanciation
    
    uploader.onProgress((event) => {
        console.log(`total number of bytes uploaded for this upload: ${event.uploadedBytes}.`);
        console.log(`total size of the file: ${event.totalBytes}.`);
    });

Keywords

FAQs

Package last updated on 10 Oct 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc