vThumb.js - The smallest library to generate video thumbnails on client side.

Last update: Jun 6, 2022

The smallest library to generate video thumbnails on client side.

About

Generate n numbers of Image thumbnails of a video file.

A full working `React.js` sample code is in `./example` folder.

code sandbox example

This package can be used with any JS framework or in vanila js.

NPM

Purpose?

This module will generate n numbers of image thumbnails of a given video file.

By default the thumbnail's file format will be the base64.

Usage

generateVideoThumbnails(selectedFile, numberOfThumbnails)

Async/Await (Typescript & ES7)

{ console.error(err); })">
generateVideoThumbnails(videoFile, numberOfThumbnails).then((thumbnailArray) => {
    // output will be arry of base64 Images
    // example - ["img1", "imgN"]

    // @todo - implement your logic here
}).catch((err) => {
    console.error(err);
})

Using promises and dynamic Import (Html5)

{ res.generateVideoThumbnails(videoFile, noThumb).then((thumbArray) => { thumbArray.map((item) => { // type of item is base64 image // @todo - your logic here }) }) }); ">
// please change the location of index.js as needed

import("./index.js").then((res) => {
    res.generateVideoThumbnails(videoFile, noThumb).then((thumbArray) => {
        thumbArray.map((item) => {
            // type of item is base64 image

            // @todo - your logic here
        })              
    })
});

Examples

From File Input

complete working example is in the index.html file or you can visit the demo link

{ res.importFileandPreview(e.target.files[0]).then((url) => { source.setAttribute('src', url); source.setAttribute('type', e.target.files[0]?.type); res.generateVideoThumbnails(e.target.files[0], 1).then((thumbnails) => { // video operations // video.setAttribute("poster", thumbnails[1]) // video.setAttribute("src", url) video.style.width = "auto"; video.style.height = "auto" video.style.transform = "scale(1)" }) // numberInput numberWrapper.style.display = "block"; buttonWrapper.style.display = "block"; video.style.transform = "scale(1)" video.innerHTML = ""; video.appendChild(source); }); }) } }); thumbButton.addEventListener("click", function () { thumbnaislWrapper.innerHTML = ""; loader.style.display = "block"; import("./index.js").then((res) => { res.generateVideoThumbnails(selectedFile, parseInt(numberInput.value)).then((thumbArray) => { let thumbnailsImg = thumbArray.map((item) => { let img = document.createElement('img'); img.src = item; img.alt = ""; img.style.width = "200px"; img.style.objectFit = "cover"; img.style.margin = "10px"; img.style.cursor = "pointer"; img.addEventListener("click", function () { video.setAttribute("poster", item); }) return img; }) thumbnaislWrapper.innerHTML = ""; loader.style.display = "none"; thumbnailsImg.forEach((item) => { thumbnaislWrapper.appendChild(item); }) }) }); }) ">
 let video = document.getElementById("video");
        let inputFile = document.getElementById("inputfile");
        let numberInput = document.getElementById("numberofthumbnails");
        let numberWrapper = document.getElementById("numberWrapper");
        let buttonWrapper = document.getElementById("buttonWrapper");
        let thumbButton = document.getElementById("generatethumbnails");
        let thumbnaislWrapper = document.getElementById("thumbnails");
        let loader = document.getElementById("loader");
        let selectedFile = "";

        inputFile.addEventListener("change", function (e) {
            if (e.target.files?.length) {
                selectedFile = e.target.files[0];

                var source = document.createElement('source');
                import("./index.js").then((res) => {
                    res.importFileandPreview(e.target.files[0]).then((url) => {

                        source.setAttribute('src', url);
                        source.setAttribute('type', e.target.files[0]?.type);

                        res.generateVideoThumbnails(e.target.files[0], 1).then((thumbnails) => {
                            // video operations
                            // video.setAttribute("poster", thumbnails[1])
                            // video.setAttribute("src", url)
                            video.style.width = "auto";
                            video.style.height = "auto"
                            video.style.transform = "scale(1)"
                        })
                        // numberInput
                        numberWrapper.style.display = "block";
                        buttonWrapper.style.display = "block";
                        video.style.transform = "scale(1)"
                        video.innerHTML = "";
                        video.appendChild(source);
                    });
                })
            }
        });
        thumbButton.addEventListener("click", function () {
            thumbnaislWrapper.innerHTML = "";
            loader.style.display = "block";
            import("./index.js").then((res) => {
                res.generateVideoThumbnails(selectedFile, parseInt(numberInput.value)).then((thumbArray) => {
                    let thumbnailsImg = thumbArray.map((item) => {
                        let img = document.createElement('img');
                        img.src = item;
                        img.alt = "";
                        img.style.width = "200px";
                        img.style.objectFit = "cover";
                        img.style.margin = "10px";
                        img.style.cursor = "pointer";
                        img.addEventListener("click", function () {
                            video.setAttribute("poster", item);
                        })
                        return img;
                    })
                    thumbnaislWrapper.innerHTML = "";
                    loader.style.display = "none";
                    thumbnailsImg.forEach((item) => {
                        thumbnaislWrapper.appendChild(item);
                    })
                })
            });

        })

Your contributions are more than welcome 😀


ROADMAP 🗺

  1. Lib roubstness and accuracy increment.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

GitHub

https://github.com/Rajesh-Royal/vThumb.js
You might also like...

Mobile-friendly gallery carousel 🎠🎠🎠 with batteries included (touch, mouse emulation, lazy loading, thumbnails, fullscreen, RTL, keyboard navigation and customisations).

Mobile-friendly gallery carousel 🎠🎠🎠 with batteries included (touch, mouse emulation, lazy loading, thumbnails, fullscreen, RTL, keyboard navigation and customisations).

react-gallery-carousel Mobile-friendly Carousel with batteries included (supporting touch, mouse emulation, lazy loading, thumbnails, fullscreen, RTL,

Jun 11, 2022

React Native Image Gallery with Thumbnails

React Native Image Gallery with Thumbnails

React Native Image Gallery with Thumbnails Features Image gallery with thumbnails Made with PanResponder, no external dependencies Written in Typescri

Jun 22, 2022

Broprint.js - The world's easiest, smallest and powerful visitor identifier for browsers

Broprint.js - The world's easiest, smallest and powerful visitor identifier for browsers

This package generates a unique ID/String for different browsers. Like chrome, Firefox or any other browsers which support `canvas` and `audio` fingerprinting. You can easily do the browser fingerprinting with this library. Its small and minimal.

Jun 21, 2022

A Web library to simply integrate Agora Video Calling or Live Video Streaming to your website with just a few lines of code

Agora React Web UIKit Instantly integrate Agora video calling or streaming into your web application using a React based UIKit for the Agora Web SDK.

Jun 19, 2022

The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State.

The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State.

The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State. Table of Contents Articles Featu

Jun 9, 2022

Video conferencing application with screen sharing, participant control and more with SignalWire Video APIs in ReactJS

React Zoom Clone This React/Node.js codebase implements Zoom's core features using the SignalWire Video SDK and the SignalWire Video REST API. Running

Mar 30, 2022

A full-screen video component on top of react-native-video

react-native-fullscreen-video A full-screen video component on top of react-native-video One of the main issues of react-native-video is making video

Jun 5, 2022

Resolution switcher adds the ability to select the video quality in video.js player.

Video.js Resolution Switcher Resolution switcher for video.js v5 Example Working examples of the plugin you can check out if you're having trouble. Or

Apr 19, 2022

Video-chat-app - A React video chat app using WebRTC

Video-chat-app - A React video chat app using WebRTC

video-chat-app Description Il s'agit d'une application de chat vidéo React utili

Jan 11, 2022

VideoPlayer for the React Native Video component at react-native-video

VideoPlayer for the React Native Video component at react-native-video

🕹 react-native-media-console VideoPlayer for the React Native Video component at react-native-video. ⭐️ Features This package contains a simple set

Jun 15, 2022

Redux bindings for client-side search

Redux bindings for client-side search

redux-search Higher-order Redux library for searching collections of objects. Search algorithms powered by js-worker-search. Check out the live demo a

Jun 26, 2022

HTML meta tags for React-based apps. Works for both client- and server-side rendering, and has a strict but flexible API.

React Document Meta HTML meta tags for React-based apps. Works for both client- and server-side rendering, and has a strict but flexible API. Built wi

Jun 14, 2022

Redux bindings for client-side search

Redux bindings for client-side search

redux-search Higher-order Redux library for searching collections of objects. Search algorithms powered by js-worker-search. Check out the live demo a

Jun 16, 2022

Integration of React + Webpack + Rails + rails/webpacker including server-side rendering of React, enabling a better developer experience and faster client performance.

Integration of React + Webpack + Rails + rails/webpacker including server-side rendering of React, enabling a better developer experience and faster client performance.

These are the docs for React on Rails 12. To see the version 11 docs, click here. News October 14, 2020: RUBY ROGUES RR 474: React on Rails V12 – Don’

Jun 18, 2022

Client side Feathers build

@feathersjs/client Important: The code for this module has been moved into the main Feathers repository at feathersjs/feathers (package direct link).

Mar 4, 2022

react table (client and server-side) based on bootstrap.

react-strap-table react table (client and server side) based on bootstrap style. You can customize any thing (headings, contents ...) not only by text

Mar 16, 2022

React validatable form hook that is used to create dynamic client side validations on react forms

React Validatable Form React validatable form hook that is used to create dynamic client side validations on React forms. Table of Contents Install Ge

Apr 19, 2022

Shopping and E-commerce: A client-side utility project for a Shop product page. Calculate the order price, and check availability with supporting N* filters.

Shopping and E-commerce: A client-side utility project for a Shop product page. Calculate the order price, and check availability with supporting N* filters.

Shop Price Checker Shopping and E-commerce: A client-side utility project for a Shop product page. Calculate the order price, and check availability w

Feb 22, 2022
nextjs-image-generation is a POC on how to do server-side image generation.
nextjs-image-generation is a POC on how to do server-side image generation.

nextjs-image-generation is a POC on how to do server-side image generation.

May 29, 2022
react library for generating avatar
react library for generating avatar

react library for generating avatar

Jun 22, 2022
Vue library for generating nice user avatar. (Inspired by react-nice-avatar)
Vue library for generating nice user avatar. (Inspired by react-nice-avatar)

holiday-avatar Vue library for generating nice user avatar. (Inspired by react-nice-avatar)

Apr 15, 2022
React library to support easy zoom, pan, pinch on various html dom elements like images and divs

react-zoom-pan-pinch Super fast and light react npm package for zooming, panning and pinching html elements in easy way Demo Docs Features ?? Fast and

Jun 26, 2022
A React library for zooming images like Medium

react-medium-zoom A React library for zooming images like Medium Install npm install --save react-medium-zoom Usage import React, { Component } from '

Jul 24, 2021
⚡️The Fullstack React Framework — built on Next.js
⚡️The Fullstack React Framework — built on Next.js

⚡️The Fullstack React Framework — built on Next.js

Jun 16, 2022
⚡️The Fullstack React Framework — built on Next.js — Inspired by Ruby on Rails
⚡️The Fullstack React Framework — built on Next.js — Inspired by Ruby on Rails

⚡️The Fullstack React Framework — built on Next.js — Inspired by Ruby on Rails

Oct 12, 2021
This plugin allows side-by-side notetaking with videos. Annotate your notes with timestamps to directly control the video and remember where each note comes from.

This plugin allows side-by-side notetaking with videos. Annotate your notes with timestamps to directly control the video and remember where each note comes from.

Jun 19, 2022
A simple Hooks wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance.

A simple Hooks wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance.

Jun 17, 2022
A wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance

A wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance. Works with solid-js

May 31, 2022