plyr-stream-thumbs
v0.1.0
Published
Generate thumbnails from Cloudflare Stream for use with @sampotts/plyr. Works in Node and the browser.
Downloads
3
Maintainers
Readme
Plyr Cloudflare Stream Thumbnails Generator
Generate thumbnails from Cloudflare Stream for use with @sampotts/plyr. Works in Node and the browser.
Features
Supply a Stream ID and get sprite sheets (jpg) and a corresponding text track (VTT) back in multiple formats.
Install
Node/Browser
npm install plyr-stream-thumbs
Node additional dependency
npm install canvas
Generating thumbs
Node example
import fs from 'fs';
import PlyrStreamThumbs from 'plyr-stream-thumbs';
// Note: @Automattic/node-canvas must be installed for use in node: npm i canvas
// Cloudflare example stream ID, exporting 1 frame per 50secs
const id = '5d5bc37ffcf54c9b82e996823bffbb81';
const options = { secondsPerFrame: 50, maxSquare: 800 };
// given an id and {options}
// - each format returns multiple file buffers
// - be careful this example writes to disk!
PlyrStreamThumbs(id, options)
.then(formats => formats.forEach(format =>
format.content.forEach(item =>
fs.writeFileSync(item.name, item.data))));
Browser example
import PlyrStreamThumbs from 'plyr-stream-thumbs';
// Cloudflare example stream ID, exporting 1 frame per 50secs
const id = '5d5bc37ffcf54c9b82e996823bffbb81';
const options = { secondsPerFrame: 50, maxSquare: 800 };
// given an id and {options}
// - each format returns multiple Blobs
// - this example logs the output
PlyrStreamThumbs(id, options)
.then(formats => formats.forEach(format =>
format.content.forEach(item =>
console.log(item.name, item.data))));
Options
formats: (object, array of objects) define output formats for e.g standard and hi-res players. Parameters (width, height, prefix) can also be defined directly on the options object where only one format is required. default:
[{
prefix: '@2x',
width: 320,
height: 180,
}, {
width: 144,
height: 120,
}]
width: (number) width of each frame in pixels (default defined by formats)
height: (number) height of each frame in pixels (default defined by formats)
prefix: (string) prefix for a given format; useful where multiple formats are defined (default defined by formats)
maxSquare: (number) max dimensions (width/height) of the resulting sprite sheet in pixels (default: 2000)
secondsPerFrame: (number) seconds between each frame (smart default based on duration, minimum defined by minSecondsPerFrame)
minSecondsPerFrame: (number) minimum seconds between each frame, is overidden by secondsPerFrame (default: 2)