Failed to construct 'URL': Invalid URL

[nickycdk]

I am trying to compress and resize a video in my vue application, but have run into a few headaches, where I am getting errors I cant quite any documentation on (Error compress video: TypeError: Failed to construct 'URL': Invalid URL).

import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile } from '@ffmpeg/util';

const _ffmpeg = ref(new FFmpeg());

const compressVideo = async (file: File) => {
  const fileName = file.name;
  const fileData = await fetchFile(file);

  await _ffmpeg.value.load();

  _ffmpeg.value.writeFile(fileName, fileData);

  try {
    await _ffmpeg.value.exec([
      '-i',
      fileName,
      '-vf',
      'scale=720:-1',
      '-b:v',
      '1000k',
      '-c:v',
      'libx264',
      '-crf',
      '23',
      '-preset',
      'medium',
      'output.mp4',
    ]);

    // Read the compressed file
    const data = await _ffmpeg.value.readFile('output.mp4');

    // Create a Blob from the compressed file data
    const compressedBlob = new Blob([data], { type: 'video/mp4' });

    // Optional: Create a downloadable link
    const url = URL.createObjectURL(compressedBlob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'compressed_' + fileName;
    link.click();

    // Clean up
    URL.revokeObjectURL(url);

    console.log('Video compressed successfully');
  } catch (error) {
    console.error('Compression failed:', error);
  }
};

I am using it like so when the user selects a video file using an input file element:

const target = e.target as HTMLInputElement;
const newFile = target.files[0];
    try {
      const test = await compressVideo(file);
      console.log('the resized file', newFile)
    } catch (error) {
      console.log('Error compress video:', error);
    }

The error I am getting is: Error compress video: TypeError: Failed to construct 'URL': Invalid URL

What am I doing wrong?