npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

video-frames

v1.0.18

Published

Client-side video frames extraction as base64 encoded images

Downloads

728

Readme

video-frames

circleci npm size known vulnerabilities javascript style guide license

Client-side video frames extraction as base64 encoded images.

Demo / CodePen

:warning: Doesn't work in Safari on iOS

From Apple Developer Documentation,

The image object can be an img element, a canvas element, or a video element. Use of the video element is not supported in Safari on iOS, however.

Installation

npm

npm install video-frames

CDN

<script src="https://cdn.jsdelivr.net/npm/video-frames@1/dist/videoframes.umd.min.js"></script>

or

<script src="https://unpkg.com/video-frames@1"></script>

Usage

const videoFrames = require('video-frames');

videoFrames({
	// Big Buck Bunny (1080p 60fps)
	url: 'http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4',
	// Extract 10 evenly spaced (time-wise) frames
	count: 10
}).then((frames) => {
	// frames is an array of objects
	// [
	//   {
	//     offset: (timestamp in seconds)
	//     image: (base64 encoded image)
	//   },
	//   ...
	// ]
});

API

videoFrames(options)

Returns a Promise for when all frames have been extracted. There are a few properties that can be set in options.

options

  • url (required)

    Default value: empty

    The URL (self, remote [an Access-Control-Allow-Origin header must be present in case of a remote URL], or blob) of the source video from which the frames are to be extracted. Since the video element is used in the extraction process, the allowed formats are the ones that are playable in it. You can search for the supported formats on caniuse.com/?search=video%20format

  • width

    Default value: 128

    Width of the extracted frames in pixels. If no value for width is set, but a value for height is set, then the width will be calculated using the video dimensions.

  • height

    Default value: auto

    Height of the extracted frames in pixels. If not set, height is calculated automatically from the value of width using the video dimensions.

  • format

    Default value: image/png

    MIME type of the extracted frames. Since the canvas element is used for drawing the frames and toDataURL(format) is used for reading them as base64 encoded images, the allowed MIME types are the ones that are supported by toDataURL.

    From MDN,

    toDataURL(type)

    ...

    type

    A string indicating the image format. The default type is image/png; this image format will be also used if the specified type is not supported.

    So, if a type is not supported, it will fall back to image/png.

  • startTime

    Default value: 0

    Start timestamp (in seconds) of the range from where the frames are to be extracted. It will be ignored if a valid value for offsets is set.

  • endTime

    Default value: Video Duration

    End timestamp (in seconds) of the range from where the frames are to be extracted. It will be ignored if a valid value for offsets is set.

  • count

    Default value: 1

    Number of frames to be extracted from the range set by startTime and endTime. The frames are extracted from evenly spaced timestamps across the range. It will be ignored if a valid value for offsets is set.

  • offsets

    Default value: []

    Array of timestamps (in seconds) to extract frames at. If a valid value for offsets is set, startTime, endTime, and count are ignored.

  • onLoad

    Default value: false

    Function to be called when the source video has loaded and the extraction process has started.

    onLoad: () => { console.log('video loaded') }
  • onProgress

    Default value: false

    Function to be called on every successful frame extraction.

    onProgress: (framesExtracted) => { console.log(`${framesExtracted} frames extracted`) }
    onProgress: (framesExtracted, totalFrames) => { console.log(`${framesExtracted} of ${totalFrames} frames extracted`) }

License

MIT © Utkarsh Verma