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 (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T17:04:32.000Z (almost 2 years ago)
• Last Synced: 2024-07-29T11:36:43.350Z (3 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: 88
• Watchers: 3
• Forks: 16
• Open Issues: 37
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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)