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
;;// Note: @Automattic/node-canvas must be installed for use in node: npm i canvas // Cloudflare example stream ID, exporting 1 frame per 50secsconst 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!;
Browser example
; // Cloudflare example stream ID, exporting 1 frame per 50secsconst id = '5d5bc37ffcf54c9b82e996823bffbb81';const options = secondsPerFrame: 50 maxSquare: 800 ; // given an id and {options}// - each format returns multiple Blobs// - this example logs the output;
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)