Nuns Practicing Misanthropy

    plyr-stream-thumbs

    0.1.0 • Public • Published

    Plyr Cloudflare Stream Thumbnails Generator

    Generate thumbnails from Cloudflare Stream for use with @sampotts/plyr. Works in Node and the browser.

    Plyr Stream Thumbs example output

    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)

    Install

    npm i plyr-stream-thumbs

    DownloadsWeekly Downloads

    6

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    43.3 kB

    Total Files

    8

    Last publish

    Collaborators

    • theprojectsomething