Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/eugenehp/video-thumbnailer

Last synced: about 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/eugenehp/video-thumbnailer
Owner: eugenehp
License: mit
Created: 2023-10-06T06:26:57.000Z (about 1 year ago)
Default Branch: master
Last Pushed: 2024-03-15T19:42:10.000Z (10 months ago)
Last Synced: 2024-10-30T20:53:08.028Z (2 months ago)
Language: TypeScript
Size: 3.75 MB
Stars: 1
Watchers: 2
Forks: 0
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # Video Thumbnailer

[![GitHub license](https://img.shields.io/github/license/eugenehp/video-thumbnailer.svg?color=blue&style=for-the-badge)](./LICENSE)

[![npm](https://img.shields.io/npm/v/video-thumbnailer.svg?color=green&style=for-the-badge)](https://www.npmjs.com/package/video-thumbnailer)

[![npm downloads](https://img.shields.io/npm/dw/video-thumbnailer.svg?label=npm%20downloads&style=for-the-badge)](https://npmcharts.com/compare/video-thumbnailer?minimal=true)

[![total npm downloads](https://img.shields.io/npm/dt/video-thumbnailer.svg?label=total%20npm%20downloads&style=for-the-badge)](https://npmcharts.com/compare/video-thumbnailer?minimal=true)

[![GitHub watchers](https://img.shields.io/github/watchers/eugenehp/video-thumbnailer.svg?style=for-the-badge)](https://github.com/eugenehp/video-thumbnailer/watchers)

[![GitHub stars](https://img.shields.io/github/stars/eugenehp/video-thumbnailer.svg?label=GitHub%20stars&style=for-the-badge)](https://github.com/eugenehp/video-thumbnailer/stargazers)

[![GitHub forks](https://img.shields.io/github/forks/eugenehp/video-thumbnailer.svg?style=for-the-badge)](https://github.com/eugenehp/video-thumbnailer/network/members)

[![open bugs](https://img.shields.io/github/issues-raw/eugenehp/video-thumbnailer/bug.svg?color=d73a4a&label=open%20bugs&style=for-the-badge)](https://github.com/eugenehp/video-thumbnailer/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+label%3Abug)

[![total open issues](https://img.shields.io/github/issues-raw/eugenehp/video-thumbnailer.svg?label=total%20open%20issues&style=for-the-badge)](https://github.com/eugenehp/video-thumbnailer/issues)

[![GitHub pull requests](https://img.shields.io/github/issues-pr-raw/eugenehp/video-thumbnailer.svg?style=for-the-badge)](https://github.com/eugenehp/video-thumbnailer/pulls)

Get thumbnails from video files (mp4) in a browser using [ffmpeg](https://ffmpeg.org) via [wasm](https://webassembly.org)

```shell

npm install video-thumbnailer

```

## Getting started

You can find full example in [example/src/routes/+page.svelte](example/src/routes/+page.svelte) built with [SvelteKit](https://kit.svelte.dev)

```typescript

import { VideoThumbnailer } from "video-thumbnailer";

await thumbnailer.load();

// or you can select a File from the browser

const urlOrFile =

  "https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";

// contains a Blob that can be directly set to img.src

const { blob, metadata } = await thumbnailer.getThumbnail(urlOrFile);

```

## Demo

To run the demo:

```shell

cd example

npm run dev

# navigate to http://localhost:5173

```

Demo (GIF) 👇

![Demo](./docs/demo.gif)

## Development

To build the library:

```shell

cd video-thumbnailer

npm run build

```

## License

[MIT](./LICENSE)

Copyright © 2023-2024 [Eugene Hauptmann](http://twitter.com/eugenehp)