I attempted to upload and compress a video using ffmpeg.js. However, it appears that this process is ineffective on modern browsers. I have already implemented console logging to verify if the video compression is occurring, yet thus far, no compression has been achieved. Could anyone suggest an alternative library for video compression that might better suit the requirements?

<template>
  <div>
    <input type="file" @change="handleFileInputChange" accept="video/*">
    <video ref="video" controls></video>
  </div>
</template>

<script>
import { FFmpeg } from '@ffmpeg/ffmpeg';

export default {
  methods: {
    async handleFileInputChange(event) {
      const file = event.target.files[0];
      if (!file) return;

      const video = this.$refs.video;
      const url = URL.createObjectURL(file);
      video.src = url;

      const inputVideoPath = 'input.mp4';
      const outputVideoPath = 'compressed_output.mp4';

      console.log("Compressing video...");
      await this.compressVideo(file, inputVideoPath, outputVideoPath);
      console.log("Compression completed.");

      video.src = URL.createObjectURL(await this.downloadFile(outputVideoPath));
    },
    async compressVideo(file, inputVideoPath, outputVideoPath) {
      const ffmpeg = new FFmpeg();
      await ffmpeg.load();

      // Writing the input file to the FFmpeg file system
      await ffmpeg.writeFile(inputVideoPath, file);

      // Execute FFmpeg command for compression
      await ffmpeg.exec(['-i', inputVideoPath, '-vcodec', 'libx264', '-crf', '28', outputVideoPath]);
    },
    async downloadFile(filePath) {
      const ffmpeg = new FFmpeg();
      await ffmpeg.load();

      // Read the compressed file from FFmpeg file system
      const data = await ffmpeg.readFile(filePath);

      return new Blob([data.buffer], { type: 'video/mp4' });
    }
  }
};
</script>

<style scoped>
</style>