https://github.com/zzarcon/video-snapshot

Get snapshots from a video file in the browser :movie_camera: :sunrise:
https://github.com/zzarcon/video-snapshot

browser canvas capture preview screenshot snapshot thumbnail video

Last synced: 3 months ago
JSON representation

Get snapshots from a video file in the browser :movie_camera: :sunrise:

• Host: GitHub
• URL: https://github.com/zzarcon/video-snapshot
• Owner: zzarcon
• License: mit
• Created: 2018-02-05T09:46:23.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T17:04:32.000Z (over 1 year ago)
• Last Synced: 2023-12-12T09:20:41.565Z (7 months ago)
• Topics: browser, canvas, capture, preview, screenshot, snapshot, thumbnail, video
• Language: TypeScript
• Homepage: https://zzarcon.github.io/video-snapshot
• Size: 33.9 MB
• Stars: 83
• Watchers: 3
• Forks: 17
• Open Issues: 37
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-1kb - video-snapshot

README

        


  

  





# video-snapshot [![Build Status](https://travis-ci.org/zzarcon/video-snapshot.svg?branch=master)](https://travis-ci.org/zzarcon/video-snapshot)

> Get snapshots from a video file in the browser

# Demo 💅

[https://zzarcon.github.io/video-snapshot](https://zzarcon.github.io/video-snapshot)

# Install 🚀

```

$ yarn add video-snapshot

```

# Usage ⛏

```javascript

import VideoSnapshot from 'video-snapshot';

document.querySelector('input[type="file"]').addEventListener('change', onChange);

const onChange = async (e) => {

  const snapshoter = new VideoSnapshot(e.target.files[0]);

  const previewSrc = await snapshoter.takeSnapshot();

  const img = document.createElement('img');

  img.src = previewSrc;

  document.body.appendChild(img);

};

```

# Api 👀

```typescript

type CustomVideoTime = 'start' | 'middle' | 'end';

type VideoTime = number | CustomVideoTime;

class VideoSnapshot {

  constructor(blob: Blob) {};

  takeSnapshot(time?: VideoTime): Promise;

  end(): void;

}

```

# Features 💸

* Dependency free

* [2kb size](https://bundlephobia.com/[email protected])

* Take snapshot at any time

* You can pass **smart times** to easily get better previews

# Author 🦄

[@zzarcon](https://twitter.com/zzarcon)