@intersoft-uz/media-client v0.0.8

@intersoft-uz/media-client

A TypeScript library for handling media files, including image processing and video manipulation using FFmpeg.

Demo

Demo is here

Installation

npm i @intersoft-uz/media-client

Usage for Image

import { TypedImageHandler } from "@intersoft-uz/media-client";

const imageHandler = new TypedImageHandler({
  baseUrl: "your-base-url",
  uploadPath: "image-api-path",
  validationConfig: {
    minImageSize: [300, 300],
    maxImageSize: [8000, 8000],
    maxFileSize: 20 * DataSize.MB,
    validMimeTypes: new Set([MediaImageMimeType.JPEG, MediaImageMimeType.WEBP]),
  },
  processingConfig: {
    imageSize: [1280, 720],
    resizeQuality: 0.8,
    imageMimeType: MediaImageMimeType.WEBP,
    resizeFilter: PicaResizeFilter.MKS2013,
  },
  fileValidatedCallback: ({ fileUrl }) => {
    setOriginalImageUrl(fileUrl);
    setUploadProgress(0);
  },
  fileProcessedCallback: (_, compressedImageUrl) => {
    setProcessedImageUrl(compressedImageUrl);
  },
  fileUploadProgressCallback: (event) => {
    setUploadProgress((event.progress || 0) * 100);
  },
  fileUploadErrorCallback: () => {
    setUploadProgress(0);
  },
  fileUploadedCallback: () => {
    setUploadProgress(0);
  },
  fileUploadFinishedCallback: () => {
    alert("Image uploaded successfully");
  },
  fileHandlerErrorCallback: (error) => {
    console.error(error);
  },
});

Usage for Video

import { TypedFFMPEGHandler } from "@intersoft-uz/media-client";

const videoHandler = new TypedFFMPEGHandler({
  baseUrl: "your-base-url",
  uploadPath: "video-api-path",
  validationConfig: {
    maxFileSize: 1000 * DataSize.MB,
    validMimeTypes: new Set([VideoFileMimeType.MP4, VideoFileMimeType.WEBM]),
  },
  processingConfig: {
    ffmpegTask: {
      inputOptions: {},
      outputOptions: {
        ...{
          "c:v": FFMPEGVideoEncoder.H264,
          crf: "28",
          preset: EncoderH264Preset.FAST,
          maxrate: 2.5 * BitrateUnit.MBS,
          bufsize: 2.5 * BitrateUnit.MBS,
        },
        ...{ "c:a": FFMPEGAudioEncoder.AAC, "b:a": 128 * BitrateUnit.KBS },
        pix_fmt: FFMPEGPixelFormat.YUV420P,
        vf:
          "scale=1280:720" +
          ":force_original_aspect_ratio=decrease" +
          ":force_divisible_by=2" +
          ":flags=bicubic",
      },
      outputName: "output.mp4",
      outputMimeType: "video/mp4",
    },
  },
  fileValidatedCallback: ({ fileUrl }) => {
    setOriginalVideoUrl(fileUrl);
    setUploadProgress(0);
    setProcessingProgress(0);
  },
  fileProcessingProgressCallback: (pct) => {
    setProcessingProgress(pct);
  },
  fileProcessedCallback: (_, compressedVideoUrl) => {
    setProcessedVideoUrl(compressedVideoUrl);
    setProcessingProgress(0);
  },
  fileUploadProgressCallback: (event) => {
    setUploadProgress((event.progress || 0) * 100);
  },
  fileUploadErrorCallback: () => {
    setUploadProgress(0);
    setProcessingProgress(0);
  },
  fileUploadedCallback: (responseData) => {
    setUploadProgress(0);
    setServerSideProgress(responseData?.progress || null);
  },
  fileUploadProcessCallback: (responseData) => {
    setServerSideProgress(responseData?.progress || null);
  },
  fileUploadFinishedCallback: () => {
    alert("Video uploaded successfully");
    setServerSideProgress(null);
  },
  fileHandlerErrorCallback: (error) => {
    console.error(error);
  },
});

FFmpeg WASM Configuration

For projects using FFmpeg functionality, you need to configure your Vite setup properly:

1. Copy the example Vite configuration from example-vite.config.js to your project
2. Or add these settings to your existing vite.config.js:

export default defineConfig({
  optimizeDeps: {
    exclude: ["@ffmpeg/ffmpeg", "@ffmpeg/util"],
  },
  server: {
    headers: {
      "Cross-Origin-Embedder-Policy": "require-corp",
      "Cross-Origin-Opener-Policy": "same-origin",
    },
  },
  worker: {
    format: "es",
  },
});

3. Make sure your site is served with CORS headers for FFmpeg WASM to work properly.

Features

• Image processing utilities
• FFmpeg video handling
• Base file handler functionality
• TypeScript support with full type definitions

Development

# Build the package
npm run build

# Development mode
npm run dev

License

Private Package