ad
ad

Build a Electron.js Video Compressor Using Vue.js & Handbrake.js With Progressbar GUI Desktop App

Education

Introduction

In this article, we will explore the development of a desktop video compressor application using Electron.js, Vue.js, and the Handbrake.js library. This project aims to provide a comprehensive guide for beginners interested in combining these technologies. The application includes a user-friendly interface with a built-in progress bar for an enhanced user experience.

Overview of Technologies Used

  • Electron.js: A framework for building cross-platform desktop applications using web technologies like HTML, CSS, and JavaScript.
  • Vue.js: A progressive JavaScript framework for building user interfaces, particularly single-page applications.
  • Handbrake.js: A JavaScript library that provides encoding capabilities similar to FFmpeg, allowing efficient video compression.
  • Element UI: A component library for Vue.js that provides predefined UI elements for quicker development.

Getting Started

To start the application, follow these simple steps:

  1. Clone the Repository: Clone the project repository to your local machine.
  2. Install Dependencies: Run the command npm install to install all necessary packages defined in the package.json file.
  3. Run the Application: Execute the command npm run electron:serve to build the Vue.js application and start the Electron app.

User Interface

The application features a straightforward interface built with HTML, CSS, and Vue.js. Users can select video files from their local file system for compression. Currently, it supports MP4, MOV, and WMV formats.

Compression Process

  1. Select Video File: Choose a video file, which initially may be around 43.4 MB in size.
  2. Set Output Location: Specify the location where the compressed video will be saved.
  3. Start Compression: Click on the compress button, and the application will begin encoding the video using Handbrake.js.
  4. Progress Tracking: A progress bar indicates the estimated time remaining for the compression, providing users with real-time feedback. Once the process is complete, a notification will appear confirming the successful compression of the video.

Key Features

  • Drag and Drop Support: Users can drag and drop video files directly into the application interface.
  • Notification System: The app will notify the user upon successful video compression.
  • Size Reduction with Quality Preservation: The application significantly reduces file sizes (e.g., from 43 MB to approximately 5 MB) while maintaining the original quality of the video.

Application code breakdown

The core functionality for the application resides in the JavaScript code, where Electron's inter-process communication (IPC) is utilized. The application processes selections, compression, and notifications through various functions. The Handbrake.js library manages video encoding operations, ensuring a seamless user experience.

Code Examples

const ( app, BrowserWindow ) = require('electron');
const path = require('path');

function createWindow() (
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        )
    });

    win.loadFile('index.html');
}

app.on('ready', createWindow);

The above code initializes the Electron application, creating a main window with specified dimensions.

Conclusion

This project demonstrates how to build a functional video compressor desktop application using Electron.js and Vue.js along with the Handbrake.js library. It provides an excellent opportunity for beginners to explore these technologies and enhance their coding skills.

Keywords

  • Electron.js
  • Vue.js
  • Handbrake.js
  • Video Compression
  • Desktop Application
  • Progress Bar
  • UI/UX
  • Open Source

FAQ

Q: What is Electron.js?
A: Electron.js is a framework that enables developers to build cross-platform desktop applications using web technologies such as HTML, CSS, and JavaScript.

Q: What is Handbrake.js?
A: Handbrake.js is a JavaScript library that provides encoding capabilities, allowing users to compress video files efficiently.

Q: Can I compress various video formats using this application?
A: Yes, the application currently supports several video formats, including MP4, MOV, and WMV.

Q: How does the progress bar work?
A: The progress bar displays real-time feedback during the compression process, indicating the estimated time remaining until the compression is complete.

Q: Is the source code available for purchase?
A: Yes, the source code is available for purchase on the website mentioned in the article. After payment, you will receive a zip file containing the project.