@kuaizi/video-snapshot
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published
Logo

video-snapshot

Get snapshots from a video file in the browser

EN | 中文文档

Demo 💅

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

Install 🚀

$ yarn add @kuaizi/video-snapshot

Usage

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]);
  // Support URL
  // const snapshoter = new VideoSnapshot('http://myserver.com/demo.mp4');
  const previewSrc = await snapshoter.takeSnapshot();
  // Support custom your snapshot size
  // const previewSrc = await snapshoter.takeSnapshot(0, 200, 300);
  const img = document.createElement('img');

  img.src = previewSrc;

  document.body.appendChild(img);
};

Api 👀

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

class VideoSnapshot {
  constructor(blob: Blob | String) {};
  takeSnapshot(time?: VideoTime, width?: Number, height?: Number): Promise<string>;
  end(): void;
}

Features 💸

  • Dependency free
  • 2kb size
  • Take snapshot at any time
  • You can pass smart times to easily get better previews

Development

Install

yarn install --ignore-engines

Author 🦄

@zzarcon

Updated by @tommyshao

Readme

Keywords

none

Package Sidebar

Install

npm i @kuaizi/video-snapshot

Weekly Downloads

0

Version

1.0.4

License

MIT

Unpacked Size

10.8 kB

Total Files

4

Last publish

Collaborators

  • tomieric
  • kuaizi-co