zzarcon / video-snapshot

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

video-snapshot

Get snapshots from a video file in the browser

Demo 💅

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

Install 🚀

$ yarn add 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]);
  const previewSrc = await snapshoter.takeSnapshot();
  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) {};
  takeSnapshot(time?: VideoTime): Promise<string>;
  end(): void;
}

Features 💸

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

Author 🦄

@zzarcon

video-snapshot's Issues

Demo page from /docs

Use ts-react-toolbox

https://github.com/zzarcon/ts-react-toolbox

how to pass a param to VideoSnapshot when live stream

how to pass a param to VideoSnapshot when live stream
when live stream, new VideoSnapshot(), how can i pass its param

Remove unnecessary async await in package

I notice this project use typescript and use async await ony 2 times
why not replace then call

Before

After

Failed to set the 'currentTime' property

When specifying the time as a CustomVideoTime (ie, 'middle'), the error TypeError: Failed to set the 'currentTime' property on 'HTMLMediaElement': The provided double value is non-finite. is thrown.

The cause of this seems to be that video.currentTime is NaN. A quick bit of digging suggests that awaiting for the onloadedmetadata event on the video element before obtaining the current time might solve it.

Feature request: Add support for iOS devices (e.g. iPhone)

Script not loading MP4 or MOV files from iPhone web accessible file picker :(

I was so excited to try it on my phone!

Great script though!

Propose Logo

Hi @zzarcon ,, I made a logo for your project. What do you think? If you need to make some change please let me know. Thank you.

Idea : Camera, screenshot and play icon.
Best regard. Mirza Zulfan

Cool example page

Under the safari is invalid

Under the safari is invalid

Allow to specify time of the snapshot

const videoSnapper = new VideoSnapshot(videoFile);

videoSnapper.takeSnapshot(100); // Will return image from 100 second

videoSnapper.takeSnapshot('middle'); // Convenient value
videoSnapper.takeSnapshot('end'); // Convenient value

Not working iOS Safari