Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
video-frames
Advanced tools
Readme
Client-side video frames extraction as base64 encoded images.
:warning: Doesn't work in Safari on iOS
From Apple Developer Documentation,
The image object can be an
img
element, acanvas
element, or avideo
element. Use of thevideo
element is not supported in Safari on iOS, however.
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>
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)
// },
// ...
// ]
});
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`) }
MIT © Utkarsh Verma
FAQs
Client-side video frames extraction as base64 encoded images
The npm package video-frames receives a total of 135 weekly downloads. As such, video-frames popularity was classified as not popular.
We found that video-frames demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.