first-last-frame

A lightweight JavaScript library to efficiently extract the first and last frames from a video. Ideal for generating thumbnails, previews, and analyzing video content.

Installation

Install the package using npm: bash npm install first-last-frame

Usage

Here are several examples demonstrating how to use first-last-frame in your projects:

1. Basic Usage (Browser):

This example shows how to extract frames directly in a browser environment. Note that cross-origin issues may arise if the video source is on a different domain. html

2. Node.js with Canvas (Server-Side):

This example demonstrates using first-last-frame in a Node.js environment using the canvas package to process the video. Requires ffmpeg to be installed and accessible in your system's PATH. javascript const firstLastFrame = require('first-last-frame'); const { createCanvas, loadImage } = require('canvas'); const fs = require('fs');

async function extractFramesNode(videoPath, outputPathPrefix) { try { const frames = await firstLastFrame(videoPath);

const firstFrameData = frames.first;
const lastFrameData = frames.last;

const firstFrameBuffer = Buffer.from(firstFrameData.split(',')[1], 'base64');
const lastFrameBuffer = Buffer.from(lastFrameData.split(',')[1], 'base64');

fs.writeFileSync(`${outputPathPrefix}-first.png`, firstFrameBuffer);
fs.writeFileSync(`${outputPathPrefix}-last.png`, lastFrameBuffer);

console.log(`Frames extracted and saved to ${outputPathPrefix}-first.png and ${outputPathPrefix}-last.png`);

} catch (error) { console.error("Error extracting frames:", error); } }

// Example usage: extractFramesNode('path/to/your/video.mp4', 'output/frames');

3. Handling CORS (Browser):

If you encounter CORS issues, you might need to configure your server to allow cross-origin requests or use a proxy. This example shows setting the crossOrigin attribute on the video element. html

4. Using with async/await in Node.js javascript const firstLastFrame = require('first-last-frame');

async function processVideo(videoPath) { try { const frames = await firstLastFrame(videoPath); console.log('First Frame Data URI:', frames.first); console.log('Last Frame Data URI:', frames.last); // Further processing with the frame data (e.g., saving to a file). } catch (error) { console.error('Error processing video:', error); } }

processVideo('path/to/your/video.mp4');

API Summary

The first-last-frame package exposes a single function: javascript async function firstLastFrame(videoElementOrFilePath: HTMLVideoElement | string): Promise<{ first: string; last: string; }>;

• videoElementOrFilePath: Either an HTMLVideoElement representing the video in the browser, or a string representing the file path to the video in a Node.js environment.
• Returns: A Promise that resolves to an object containing two properties:
  • first: A base64 encoded data URI of the first frame of the video.
  • last: A base64 encoded data URI of the last frame of the video.

License

MIT

This package is part of the first-last-frame ecosystem. For advanced features and enterprise-grade tools, visit: https://supermaker.ai/video/first-last-frame/