mediainfo.js

When using mediainfo.js with Webpack, you must configure the webpack.config.js to ensure the WebAssembly (WASM) file is preserved with its original name and is discoverable via an alias. This prevents Webpack from renaming the file during the build process, which would break the internal loading mechanism of the library.

// In webpack.config.js
module.exports = {
  // 1. Preserve the original WASM filename
  assetModuleFilename: '[name][ext]',

  // 2. Make the WASM file discoverable via alias
  alias: {
    'MediaInfoModule.wasm': wasmFilePath
  },
};

To use mediainfo.js with Vite and React, you should leverage Vite's asset pipeline to handle the WebAssembly (WASM) file. Instead of relying on relative paths that might break after bundling, import the WASM file as an asset URL using the ?url suffix. This ensures Vite fingerprints the file and provides a reliable URL that can be passed to the locateFile option in the mediaInfoFactory configuration.

import mediaInfoFactory from 'mediainfo.js'
import mediaInfoWasmUrl from 'mediainfo.js/MediaInfoModule.wasm?url'

await mediaInfoFactory({
  locateFile: (path, prefix) =>
    path === 'MediaInfoModule.wasm' ? mediaInfoWasmUrl : `${prefix}${path}`,
})

To use mediainfo.js in an Angular project, you must ensure the WebAssembly module (MediaInfoModule.wasm) is included in your build assets. This allows the application to load the WASM binary at runtime. Add the following configuration to your angular.json file under the assets array of your build target:

"assets": [
  {
    "input": "node_modules/mediainfo.js/dist",
    "glob": "MediaInfoModule.wasm",
    "output": ""
  }
],

To ensure mediainfo.js can find its required WebAssembly binary in a React application, you must provide a locateFile function to the mediaInfoFactory. This function tells the library how to resolve the path to the .wasm file. In a standard Webpack setup, you can override it to return the filename directly, allowing the alias configured in Webpack to handle the resolution.

// In App.tsx
const mediaInfo = await mediaInfoFactory({
  locateFile: (filename) => filename,
});

In the BaseTrack interface, the @type property identifies the category of the media track. Supported values are:

• General
• Video
• Audio
• Text
• Image
• Menu
• Other

The @typeorder property (optional) provides a string indicating the sequence of tracks of the same type within the bitstream.

When creating a MediaInfo instance via the factory, you can specify the output format. The available FormatType options are:

• 'object': Returns a parsed JavaScript object (MediaInfoResult). This is the default.
• 'JSON': Returns a serialized JSON string.
• 'XML': Returns a serialized XML string.
• 'HTML': Returns a serialized HTML string.
• 'text': Returns a serialized text string.

The FORMAT_CHOICES constant contains the string literals ['JSON', 'XML', 'HTML', 'text'] which correspond to the non-object formats.

// The available format strings are:
// 'JSON', 'XML', 'HTML', 'text'

If you prefer a callback-based approach over Promises, analyzeData supports a ResultCallback signature. The callback is invoked with (result, err), where result is the analyzed data (or null) and err is an error object if the analysis fails.

mediaInfo.analyzeData(size, readChunk, (result, err) => {
  if (err) {
    console.error('Analysis failed:', err);
    return;
  }
  console.log('Analysis result:', result);
});

Use mediaInfoFactory to create a new MediaInfo instance. This function is asynchronous and handles the loading of the underlying WASM module. You can use it in two ways:

1. Promise-based: Call it with options to receive a Promise that resolves to a MediaInfo instance.
2. Callback-based: Provide a success callback and an optional error callback.

By default, the output format is set to object unless specified otherwise in the options.

import mediaInfoFactory from './mediaInfoFactory.js';

// Promise approach
const mediaInfo = await mediaInfoFactory({
  format: 'JSON'
});

// Callback approach
mediaInfoFactory(
  { format: 'XML' },
  (instance) => {
    console.log('MediaInfo ready:', instance);
  },
  (err) => {
    console.error('Failed to load MediaInfo:', err);
  }
);