Skip to main content
The video compression feature uses FFmpeg to reduce video file sizes while maintaining quality. The app applies a 1000k bitrate configuration to compress videos efficiently.

​
How FFmpeg compression works

The application uses the fluent-ffmpeg library with ffmpeg-static to perform video compression. When you compress a video, FFmpeg re-encodes it with the following settings:
  • Video bitrate: 1000k (1 Mbps)
  • Output format: Same as input (typically MP4)
  • File naming: Compressed files are prefixed with compressed_
renderer.js
ffmpeg(tempPath)
  .outputOptions('-b:v 1000k')
  .on('progress', (progress) => {
    const percent = Math.round(progress.percent);
    progressBar.style.width = percent + '%';
    console.log('Compression progress:', percent + '%');
  })
  .on('end', () => {
    output.innerText = 'Compression complete!';
    progressBar.style.width = '0%';
    console.log('Compression complete');
    fs.unlinkSync(tempPath);
  })
  .on('error', (err) => {
    output.innerText = `Error: ${err.message}`;
    progressBar.style.width = '0%';
    console.error('Compression error:', err);
    fs.unlinkSync(tempPath);
  })
  .save(path.join('videooutputs', 'compressed_' + file.name));
The -b:v 1000k option sets the video bitrate to 1000 kilobits per second, which provides a good balance between file size and quality for most videos.

​
File selection process

The compression workflow begins when you select a video file through the file input element.
1

Select a video file

Click the file input button and choose a video file from your computer. The input accepts any video format supported by your browser.
index.html
<input type="file" id="videoInput" accept="video/*">
<button id="compressButton">Compress Video</button>
2

Validate file selection

When you click the compress button, the app validates that a file has been selected:
renderer.js
if (videoInput.files.length === 0) {
  output.innerText = 'Please select a video file.';
  console.log('No video file selected');
  return;
}
3

Load file into buffer

The selected file is read into an ArrayBuffer using the FileReader API:
renderer.js
const file = videoInput.files[0];
const reader = new FileReader();

reader.onload = function(event) {
  const buffer = event.target.result;
  const tempPath = path.join(os.tmpdir(), file.name);
  fs.writeFileSync(tempPath, Buffer.from(new Uint8Array(buffer)));
  // Compression starts here
};

reader.readAsArrayBuffer(file);

​
Compression workflow

Once the file is loaded, the compression process follows these steps:
The video file is temporarily saved to your system’s temp directory to allow FFmpeg to process it:
renderer.js
const tempPath = path.join(os.tmpdir(), file.name);
fs.writeFileSync(tempPath, Buffer.from(new Uint8Array(buffer)));
This temporary file is automatically deleted after compression completes or if an error occurs.
FFmpeg reads the temporary file and applies the 1000k bitrate compression:
renderer.js
ffmpeg(tempPath)
  .outputOptions('-b:v 1000k')
The output options specify the video bitrate, which controls the compression level and resulting file size.
The compression process emits three types of events:
  • progress: Updates the progress bar as compression advances
  • end: Displays completion message and resets the progress bar
  • error: Shows error message and performs cleanup
All events ensure proper cleanup by deleting the temporary file.

​
Output file naming

Compressed videos are saved to the videooutputs directory with the compressed_ prefix:
renderer.js
.save(path.join('videooutputs', 'compressed_' + file.name));

my-video.mp4
Make sure the videooutputs directory exists before compressing videos. If the directory doesn’t exist, the compression will fail.

​
Dependencies

The compression feature relies on two npm packages:
package.json
"dependencies": {
  "ffmpeg-static": "^5.0.0",
  "fluent-ffmpeg": "^2.1.2"
}
  • ffmpeg-static: Provides a static FFmpeg binary
  • fluent-ffmpeg: Offers a fluent API for FFmpeg operations
The FFmpeg path is automatically configured using ffmpeg-static at application startup:
renderer.js
const ffmpegPath = require('ffmpeg-static');
ffmpeg.setFfmpegPath(ffmpegPath);

Build docs developers (and LLMs) love

Get started for freeTalk to us