added thumbnail generator and meta function

Author: k9p5

README.md

@@ -1,9 +1,17 @@
+<p align="center">
+  <img src="./public/icon.png" alt="Library Icon" width="164" height="164" />
+</p>
+
+[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/diffusion-studio/ffmpeg-js/graphs/commit-activity)
+[![Website shields.io](https://img.shields.io/website-up-down-green-red/http/shields.io.svg)](https://ffmpeg-js-preview.vercel.app)
+[![Discord](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.gg/n3mpzfejAb)
+[![GitHub license](https://badgen.net/github/license/Naereen/Strapdown.js)](https://github.com/diffusion-studio/ffmpeg-js/blob/main/LICENSE)
+[![TypeScript](https://badgen.net/badge/icon/typescript?icon=typescript&label)](https://typescriptlang.org)
+
 # 🎥 FFmpeg.js: A WebAssembly-powered FFmpeg Interface for Browsers
 
 Welcome to FFmpeg.js, an innovative library that offers a WebAssembly-powered interface for utilizing FFmpeg in the browser. 🌐💡
 
-### [👥Join our Discord](https://discord.gg/n3mpzfejAb)
-
 ## Demo
 
 ![GIF Converter Demo](./public/preview.gif)
@@ -58,6 +66,7 @@ server: {
 ### △Next.js
 
 Here is an example `next.config.js` that supports the SharedArrayBuffer:
+
 ```
 module.exports = {
     async headers() {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@diffusion-studio/ffmpeg-js",
   "private": false,
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "FFmpeg.js - Use FFmpeg in the browser powered by WebAssembly",
   "type": "module",
   "files": [
@@ -28,6 +28,7 @@
   "keywords": [
     "ffmpeg",
     "webassembly",
+    "emscripten",
     "audio",
     "browser",
     "video",
@@ -42,9 +43,14 @@
     "mp3",
     "wav",
     "flac",
+    "mkv",
+    "mov",
     "ogg",
     "hevc",
     "h264",
+    "h265",
+    "quicktime",
+    "matroska",
     "editing",
     "cutting"
   ],

public/icon.png

@@ -222,7 +222,7 @@ export class FFmpegBase {
    * have been written to the memfs memory
    */
   public clearMemory(): void {
-    for (const path of this._memory) {
+    for (const path of [...new Set(this._memory)]) {
       this.deleteFile(path);
     }
     this._memory = [];

public/samples/video.mkv

@@ -2,7 +2,7 @@ import { IFFmpegConfiguration } from './interfaces';
 import { FFmpegBase } from './ffmpeg-base';
 import * as types from './types';
 import configs from './ffmpeg-config';
-import { noop } from './utils';
+import { noop, parseMetadata } from './utils';
 
 export class FFmpeg<
   Config extends IFFmpegConfiguration<
@@ -220,6 +220,82 @@ export class FFmpeg<
     return file;
   }
 
+  /**
+   * Get the meta data of a the specified file.
+   * Returns information such as codecs, fps, bitrate etc.
+   */
+  public async meta(source: string | Blob): Promise<types.Metadata> {
+    await this.writeFile('probe', source);
+    const meta: types.Metadata = {
+      streams: { audio: [], video: [] },
+    };
+    const callback = parseMetadata(meta);
+    ffmpeg.onMessage(callback);
+    await this.exec(['-i', 'probe']);
+    ffmpeg.removeOnMessage(callback);
+    this.clearMemory();
+    return meta;
+  }
+
+  /**
+   * Generate a series of thumbnails 
+   * @param source Your input file
+   * @param count The number of thumbnails to generate
+   * @param start Lower time limit in seconds
+   * @param stop Upper time limit in seconds
+   * @example
+   * // type AsyncGenerator<Blob, void, void>
+   * const generator = ffmpeg.thumbnails('/samples/video.mp4');
+   * 
+   * for await (const image of generator) {
+   *    const img = document.createElement('img');
+   *    img.src = URL.createObjectURL(image);
+   *    document.body.appendChild(img);
+   * }
+   */
+  public async *thumbnails(
+    source: string | Blob,
+    count: number = 5,
+    start: number = 0,
+    stop?: number
+  ): AsyncGenerator<Blob, void, void> {
+    // make sure start and stop are defined
+    if (!stop) {
+      const { duration } = await this.meta(source);
+
+      // make sure the duration is defined
+      if (duration) stop = duration;
+      else {
+        console.warn(
+          'Could not extract duration from meta data please provide a stop argument. Falling back to 1sec otherwise.'
+        );
+        stop = 1;
+      }
+    }
+
+    // get the time increase for each iteration
+    const step = (stop - start) / count;
+
+    await this.writeFile('input', source);
+
+    for (let i = start; i < stop; i += step) {
+      await ffmpeg.exec([
+        '-ss',
+        i.toString(),
+        '-i',
+        'input',
+        '-frames:v',
+        '1',
+        'image.jpg',
+      ]);
+      try {
+        const res = await ffmpeg.readFile('image.jpg');
+        yield new Blob([res], { type: 'image/jpeg' });
+      } catch (e) {}
+    }
+    this.clearMemory();
+  }
+
   private parseOutputOptions(): string[] {
     if (!this._output) {
       throw new Error('Please define the output first');

public/samples/video_xl.mp4

@@ -108,3 +108,86 @@ export type WasmModuleURIs = {
    */
   worker: string;
 };
+
+/**
+ * Defines the metadata of an audio stream
+ */
+export type AudioStream = {
+  /**
+   * String containing the id given
+   * by ffmpeg, e.g. 0:1
+   */
+  id?: string;
+  /**
+   * String containing the audio codec
+   */
+  codec?: string;
+  /**
+   * Number containing the audio sample rate
+   */
+  sampleRate?: number;
+};
+
+/**
+ * Defines the metadata of a video stream
+ */
+export type VideoStream = {
+  /**
+   * String containing the id given
+   * by ffmpeg, e.g. 0:0
+   */
+  id?: string;
+  /**
+   * String containing the video codec
+   */
+  codec?: string;
+  /**
+   * Number containing the video width
+   */
+  width?: number;
+  /**
+   * Number containing the video height
+   */
+  height?: number;
+  /**
+   * Number containing the fps
+   */
+  fps?: number;
+};
+
+/**
+ * Defines the metadata of a ffmpeg input log.
+ * These information will be extracted from
+ * the -i command.
+ */
+export type Metadata = {
+  /**
+   * Number containing the duration of the
+   * input in seconds
+   */
+  duration?: number;
+  /**
+   * String containing the bitrate of the file.
+   * E.g 16 kb/s
+   */
+  bitrate?: string;
+  /**
+   * Array of strings containing the applicable
+   * container formats. E.g. mov, mp4, m4a,
+   * 3gp, 3g2, mj2
+   */
+  formats?: string[];
+  /**
+   * Separation in audio and video streams
+   */
+  streams: {
+    /**
+     * Array of audio streams
+     */
+    audio: AudioStream[];
+    /**
+     * Array of video streams
+     */
+    video: VideoStream[];
+  };
+};

src/ffmpeg-base.ts

@@ -71,6 +71,7 @@ export type ExtensionGPLExtended =
   | 'mp4'
   | 'mpg'
   | 'mpeg'
+  | 'mkv'
   | 'mov'
   | 'ts'
   | 'm2t'

src/ffmpeg.ts

@@ -72,6 +72,7 @@ export type ExtensionBase =
   | 'mpg'
   | 'mpeg'
   | 'mov'
+  | 'mkv'
   | 'ts'
   | 'm2t'
   | 'm2ts'